TD n 5 : Feuilles de styles

TD n 5 : Feuilles de styles 1. Préparation du site a. Récupérez le site avec liens internes et tableaux du TD4 et assurez vous qu il soit dans un dossier aide-memoire sous D:\et-l2. 2. Joindre une feuille de style b. Créez un dossier feuillesdestyle dans le dossier aide-memoire. c. Stockez dans ce dossier la feuille de style aidememoire.css disponible sur le BV. d. Dans l en-tête de chaque document de votre site (FeuillesDeStyles.html, images.html, index.html, introduction.html, lehtml.html) ajouter un lien (relatif) vers la feuille de style aidememoire.css récupérée dans la question précédente : <link href="chemin" rel="stylesheet" type="text/css"> 3. Gestion des polices e. Comparez la mise en forme obtenue avec la saisie d écran ci-dessous : f. Examinez la feuille de style et expliquez le fonctionnement de la propriété font-family, sous le titre «font-family» que vous ajouterez sous «modification des propriétés pour un sélecteur». g. Modifiez les styles associés aux titres jusqu à h5 (y compris h1) de manière à ce que la police utilisée pour les titres soit Verdana si elle est disponible, Arial sinon et enfin une police «sans-serif» si aucune des deux autres n est accessible. Page 1 de 5

h. Changez la taille (font-size) des éléments h2 en "large" et en "medium" pour les titres de niveau inférieur. 4. Couleurs Dans cette partie nous allons modifier la mise en forme des tableaux pour qu elles aient un cadre. i. Modifiez le fond des tableaux pour qu il soit noir. Une liste des couleurs est accessible ici : http://www.w3schools.com/css/css_colornames.asp. En passant par un logiciel d édition d image vous pourriez obtenir n importe quelle couleur à travers sa composition RVB en hexadécimal. j. Profitez-en pour que la police utilisée dans les tableaux soit une police Verdana de petite taille (font-size: small). k. Visualisez le document ainsi obtenu dans votre navigateur. Que constatez-vous? l. Changez maintenant la couleur du fond des cellules du tableau en blanc. m. Pour les en-têtes du tableau, appliquez une couleur de fond gris-foncé et une police blanche et en gras. 5. Classe et styles Dans notre site, nous avons souvent des exemples de code HTML ou CSS pour donner des exemples. Il serait intéressant qu ils se remarquent plus, mais il n y a pas de balise spéciale pour ces éléments. Nous allons donc créer une classe. Pour différencier les classes des balises, les noms de classes commenceront toujours par un point. /*La classe important s écrirait de la manière suivante :*/.important{ font-weight: bold; } n. Créez dans la feuille de style, un style "code", dont la police sera courier new, en petite taille, en gras et en bleu foncé sur fond "cornsilk" (c est un code couleur prédéfini). Pour appliquer le style associé à une classe à un élément, il faut lui ajouter l attribut class="nomdelaclassesanspoint" : <p class="important">notez bien qu on indique qu il s agit d une classe avec un. dans la CSS. Mais que dans le document HTML on fait appel à cette classe en n utilisant que son nom.</p> o. Appliquez la classe aux cases des tableaux contenant les réponses aux exercices sur les liens relatifs et sur les entités (lehtml.html > exercice). p. Quelle est la couleur du fond qui a été privilégiée? Celle associée aux cellules du tableau ou celle associée à la classe? Page 2 de 5

Dans ce site il se peut que le code ne soit pas l unique contenu d une balise. Dans ce cas, on utilise une balise span pour séparer, dans le contenu de l élément père, ce qui appartient à une classe donnée, de ce qui ne lui appartient pas. <p>seul le mot "<span class="important">important</span>" l est (important)...</p> q. Dans le paragraphe «appel en cascade depuis un document HTML» du document feuilledestyle.html ajoutez le paragraphe suivant : Dorénavant à chaque fois que vous ferez figurer dans votre site un exemple de code (HTML ou CSS), vous lui appliquerez la classe "code". 6. Styles associés à un identifiant unique. Notre redéfinition des styles pour les tableaux a aussi affecté nos menus. Or les menus sont des tableaux particuliers que nous voudrions différencier. Dans chaque page il n y aura qu un seul menu, nous pouvons donc lui donner un identifiant unique dans la page. Nous l appellerons menu. Nous pouvons associer un style à un identifiant donné, pour ce faire nous allons utiliser le #. r. Créez dans la feuille de style, un style associé à l identifiant menu, pour lequel la couleur de fond sera #660202. s. Ajoutez l identifiant menu (attribut id="menu"), créée ci-dessus aux menus de vos différentes pages. 7. Combinaisons de sélecteurs Nous avons modifié la couleur de fond des menus, mais les cellules qu ils contiennent gardent la même couleur. Plutôt que d appliquer une classe à chaque cellule du tableau, nous allons les sélectionner en combinant les sélecteurs. t. Créez un sélecteur qui permette d accéder aux propriétés des éléments td qui sont situés (quelque part) dans l élément d identifiant menu et choisissez leur comme couleur de fond #770B0B. Vous remarquez que la couleur a été modifier pour toutes les cellules du menu, mais les liens sont devenus illisibles : u. Créez un sélecteur qui permette d accéder aux liens qui sont situés (quelque part) dans l élément d identifiant menu et assurez vous qu ils seront en blanc et ne seront pas soulignés (text-decoration: none). 8. Pseudo classes v. En utilisant le sélecteur de pseudo-classe :hover, faites que lorsque l on passe sa souris au dessus d un élément du menu, sa couleur de fond soit #E30101. Page 3 de 5

9. Le modèle de la boîte 9.1. Le padding (remplissage) w. Cela se voit particulièrement dans les menus, mais c est aussi le cas dans les autres : le contenu des cases des tableaux est "collé" aux bordures, nous allons modifier le style associé aux cellules des tableaux en rajoutant un padding de 2 pixels (px) en haut (padding-top) et en bas (padding-bottom) et de l équivalent d un caractère (em) à gauche(padding-left) et à droite (padding-right). 9.2. Border (bordures) La gestion des bordures se fait à travers 3 propriétés : border-width (valeurs : thin, medium, thick, *px) border-style (valeurs : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset) border-color (valeurs : cf. autres attributs de couleur) On peut définir séparément les bordures haute, basse, de gauche et de droite : border-left-width, border-top-style, border-bottom-color, border-right-style x. Pour les éléments h1, définissez une fine bordure solide. 9.3. Margin (marges) vs. padding y. Nous allons travailler sur les titres de niveau 1 (h1), pour bien voir ce qui se passe, modifiez la couleur de fond associée en blanc. Nous allons rendre les gros titre plus imposants, pour cela nous allons commencer par en agrandir la hauteur : la ligne au dessus et la ligne en dessous du titre seront laissées vides mais appartiendront au titre : z. Ajoutez aux éléments h1 un padding en haut et en bas de 1 élément. aa. Ajoutez leur aussi une marge en haut et en bas de 2 éléments 9.4. Dimensions et positionnement Notre menu tel qu il est, n est pas toujours accessible, nous allons utiliser les propriétés de positionnement pour améliorer cela. Nous allons mettre le menu sur la gauche de l écran. Il y a 4 manières de positionner un élément : De manière statique : c est le positionnement automatique, dit dans le flux. Quand un objet est positionné ainsi, on ne peut pas modifier ses propriétés de positionnement. De manière relative : par rapport à la position qu il occuperait dans le flux (en statique). Avec ce type de positionnement, la place qui aurait été allouée à l élément normalement est laissée libre. (position : relative;) De manière absolue : par rapport à la fenêtre. (position : absolute;) De manière fixe : les coordonnées sont identiques à celles dans un positionnement absolu, mais quand on fait défiler l écran l élément ne bouge pas. (position : fixed;) bb. Définissez un positionnement fixe pour l élément d identifiant unique menu. Page 4 de 5

Le menu passe maintenant au dessus du contenu de la page, nous allons donc lui faire de la place en ajoutant une marge à gauche pour toute la page : cc. Ajoutez une marge à gauche de 150 pixels au style associé au body. La place est effectivement laissée libre mais le menu est déplacé aussi. Nous allons donc positionner le menu en fonction de la fenêtre (car nous avons choisi un positionnement fixe) : La propriété top donne la position du haut de l élément, par rapport au haut de la fenêtre. La propriété bottom donne la position du bas de l élément, par rapport au bas de la fenêtre. La propriété left donne la position de la gauche de l élément, par rapport à la gauche de la fenêtre. La propriété right donne la position de la droite de l élément, par rapport à la droite de la fenêtre. dd. Positionnez le menu à 12 pixels de la gauche de la fenêtre. ee. Positionnez le haut du menu au tiers de la fenêtre. On veut avoir de chaque côté du menu le même écart, il faudra donc qu à droite de l élément, il y ait un espacement de 12 pixels entre le menu et le corps du document. On ne peut gérer cela par rapport à la droite de la fenêtre dont la largeur est variable. Cependant on sait que l espace laissé est de 200 px : 200-12 (gauche) - 12 (droite) = 176 px (largeur) Attention la largeur est la largeur du contenu de l élément comme ici, il n y a ni padding ni marge, on peut considérer que la largeur de l élément est identique à celle de son contenu. ff. Donnez au menu une largeur (width) de 176 pixels. Vous devriez maintenant avoir quelque chose ressemblant à : Page 5 de 5