Conception de documents et d interfaces numériques

Transcription

1 CAEN Conception de documents et d interfaces numériques TD n 10 WEB Les Feuilles de styles CSS 2 ANNE Jean-François D après le cours de Mme DRAFATE

2 Style des tableaux Feuilles de Style (CSS) Nous avons constaté dans les cours (HTML) précédents que les tableaux peuvent avoir des applications très variées, qu il s agisse d organiser des données de manière structurée, de présenter un formulaire ou encore, malgré les réserves indiquées, d ordonner toute une page. Cela dit, les styles par défaut appliqués aux tableaux et à leur contenu dans les éléments <td> ou <th> ont un rendu particulièrement pauvre et austère du point de vue esthétique. Nous allons voir maintenant qu un certain nombre de propriétés, déjà étudiées par ailleurs, peuvent s appliquer aux tableaux et à leurs composants, comme les bordures, les couleurs et images de fond. Le tableau ci-dessous résume l'ensemble de ces propriétés : Tableau 1 : Propriétés de style d'un tableau border-collapse separate, collapse ou fusion des bordures des cellules (collapse : par défaut) ou non (separate). border-spacing en px; espacement entre les bordures. caption-side empty-cells top, bottom, left, right ou emplacement de la légende du tableau (par défaut : top). show, hide ou affichage (show) ou masquage (hide) des bordures des cellules vides. table-layout fixed, auto ou largeur des colonnes fixe ou variable (fixed : indépendamment du contenu des cellules ou auto : selon le contenu des cellules). width, height px, %,.. dimensions du tableau. speak-headers always, once ou les en-têtes de table (th) sont lues avant chaque cellule ou seulement lors du changement d'en-tête lors de la lecture (always : systématiquement avant chaque cellule, once : une seule fois,valeur par défaut) Style des listes De prime abord, les listes peuvent sembler être des éléments mineurs dans la structuration du contenu d une page. Cependant, leur utilisation ne se limite pas au simple affichage d un sommaire. Au niveau de la présentation, qu elle soit ordonnée ou non, une liste a un aspect pauvre, et nous pouvons nous en satisfaire dans la mesure où son rôle est avant tout d ordre sémantique. L aspect esthétique d une liste doit donc être élaboré à l aide de styles CSS. Nous allons voir que les rendus visuels d une liste peuvent être très variés tant au niveau des différentes possibilités de numérotation que s agissant du choix des puces dans les listes non ordonnées. Les listes sont également très en vogue pour la création des menus d un site. Le TD 10 - M1105 Page 2/5 JFA 2016

3 CAEN tableau ci-dessous résume l'ensemble des propriétés pouvant être modifiées : Tableau 2 : Propriétés de style d'une liste list-style-type decimal, upper/lowerroman, lower/upperalpha, disc, circle, square, none ou list-style-image url('image.png'), none ou type de puces et de numérotation. permet de personnaliser les puces avec une image. list-style-position inside, outside ou alignement gauche du texte par rapport à l'item ou puce lors d'un retour à la ligne automatique (inside : le texte s'aligne au début de la puce, outside : le texte s'aligne à la fin de la puce) display inline, bolck, none, marker, table,... type d'affichage d'un élément (none : le bloc ne sera pas affiché, inline : le bloc sera affiché en une seule ligne, block : spécifie un bloc, marker : crée un marqueur pour les listes,...) list-style - raccourci pour les propriétés list-style-... Mise en page : dimensionnement et positionnement Les méthodes de mise en page au moyen de cadres ou à l aide de tableaux, outre qu elles sont aujourd hui considérées comme obsolètes, ne manquent pas de présenter des inconvénients importants. Si les cadres gênent considérablement l indexation correcte des pages web, les mises en page à base de tableaux, pour pratiques qu elles aient l air à première vue, impliquent des structures trop complexes qui nuisent à la lisibilité de l organisation et à la maintenance des sites. Nous allons voir que tous ces problèmes peuvent être contournés en utilisant conjointement le dimensionnement et le positionnement des éléments qui contiennent les différentes zones d une page. Ces méthodes apportent enfin des réponses simples permettant de créer les mises en page les plus diverses, et qui plus est en respectant le principe, fondamental en HTML, de séparation du contenu et de la présentation. Tableau 3 : Propriétés de styles pour la mise en page width, height px, %, auto, dimensionnement des éléments TD 10 - M1105 Page 3/5 JFA 2016

4 overflow min maxwidth, min maxheight display visible, hidden, scroll, auto, affichage du contenu d'un élément bloc dépassant l'élément parent (visible :le contenu débordant est affiché, hidden : le contenu débordant est caché et donc illisible, scroll : des barres de défilement horizontales et verticales apparaissent sur les côtés droit et bas de la boîte de l élément, ce qui permet d accéder au contenu débordant. Cette valeur a l inconvénient de laisser apparaître ces barres même si le contenu ne déborde pas, auto : le navigateur fait apparaître les barres de défilement en cas de débordement uniquement). px, %, auto, dimensionnement minimal et maximal des éléments none, inline, block, list-item, contrôle le type d'affichage (none : l élément n est pas affiché et la boîte qui lui est associée n est pas créée. Tout se passe comme s il n existait pas dans le code HTML, inline : l élément devient du type en ligne comme <span> par exemple, block : l élément devient du type bloc comme <h1>, <p>,, list-item : l élément devient du type liste, équivalent de <li>). float clear position clip bottom, top, right, left left, right, none, none, left, right, both, static, relative, absolute, fixed, auto, rect (haut, droite, bas,gauche), en %, px, em,ex (valeur -/+), auto, définition d'un positionnement flottant. définition du placement des éléments flottants les uns par rapport aux autres. Les éléments flottants sont définis par la propriété float : ils sont contournés par le texte. Clear permet d'éviter qu'un élément se mette à coté de l'élément flottant précédent. détermination du mode d'emplacement d'un élément positionné (static : valeur par défaut, left, top, right et bottom ne s'y appliquent pas, relative : positionnement se fera par rapport à l'élément supérieur, absolute, positionnement se fera par rapport au coin haut gauche de la page HTML ou par rapport au parent si ce dernier est relative, fixed ou absolute, fixed reste fixe, ne bouge pas quand l'écran est défilé). dimensionnement de la partie visible d'un élément bloc (auto, s'adapte au contenu, rect(,,, ), l'unité "%" ne semble pas être acceptée). distance entre le côté haut/bas/ gauche/droit d'un élément positionné et son élément conteneur TD 10 - M1105 Page 4/5 JFA 2016

5 visibility z-index visible, hidden, auto, nombre, visibilité d'un élément (visible : valeur par défaut, hidden : caché mais le conteneur de l'élément est maintenu vide, collapse : similaire à hidden et appliqué aux cellules du tableau) contrôle de la superposition des éléments positionnées ou l'ordre d'empilement (auto : l élément a la même valeur que celle de son parent direct, le dernier ayant la priorité, nombre : entier positif ou négatif, sachant que plus le nombre est grand, plus l élément est placé en avant, et se superpose à ceux dont la valeur est inférieure) TD 10 - M1105 Page 5/5 JFA 2016