juil

4

Aide-mémoire CSS

Catégorie: Webmastering | 184 lectures

Un élément est une balise existante (h1, p, abbr). Un ID identifie un bloc dans une page web. Il ne peut en exister q’un seul. Le signe dièse précède le nom de l’ID (#footer). Une classe est un regroupement personnel dont le but est de styliser différents éléments de la même façon. Contrairement à l’élément, la classe nécessite une intervention dans le code (X)HTML. Chaque classe est précédée d’un point (.legende) et peut suivre un élément (p.legende). Une pseudo-classe se comporte comme une classe mais n’en est pas une. On s’en sert pour sélectionner certaines parties d’un élément qui ne peuvent être mises ni dans un <div> ni dans un <span> ni sélectionné autrement.

Propriétés CSS

Ajouter du style

Il existe différentes façons pour positionner les différents éléments sur la page et leur donner un style personnalisé. La technique des tableaux imbriquées est totalement désuète et n’a aucun sens. Faites appel aux feuilles de style.

1. Liaison externe par link

  1. <head>
  2. <title>Comment relier une CSS à une page ?</title>
  3. <link rel="stylesheet" type="text/css" href="Mafeuilledestyle.css" />
  4. </head>

2. Liaison externe par @import

  1. <head>
  2. <title>Comment relier une CSS à une page ?</title>
  3. <style type="text/css">@import url(commun/screen.css);</style>
  4. </head>

3. Liaison interne dans le head

  1. <head>
  2. <title>Comment relier une CSS à une page ?</title>
  3. <style type="text/css">
  4. body{ background-color: red; color: green;}
  5. </style>
  6. </head>

4. Liaison interne dans le body

Le style interne s’applique à n’importe quel élément (h1, p, span) et peut contenir plusieurs déclarations terminées par un point virgule. Attention à bien respecter la syntaxe.

  1. <body>
  2. <p>Les textes mis en <span style="color:red;">évidence</span> sont…</p>
  3. </body>

Principe de la cascade

Ce n’est pas pour rien que les feuilles de styles en cascade portent ce nom. La cascade agit sur plusieurs éléments. Le premier se situe au niveau des intervenants. Par exemple, les règles spécifiques du navigateur configurées par l’internaute dominent celles définies par le webmaster à travers la CSS. Le deuxième élément va du spécifique au général. Un h1 est général alors qu’un blockquote h1 est spécifique et donc prioritaire. Dernier élément, l’ordre d’apparition de la déclaration a son importance; la dernière est dominante en cas de conflit.

Padding et margin

Il est impératif de bien comprendre comment cela fonctionne…

Espaces dans un bloc de texte

Respecter l’ordre des pseudo-éléments a:

Pour personnaliser l’aperçu des liens et des liens survolés, il faut faire appel aux pseudo-éléments (précédés par un double points) de la balise <a>. Il est très important de respecter l’ordre d’apparition dans la feuille de style au risque de voir le navigateur s’en mêler les pinceaux. Le truc est de retenir les mots-clés LoVe HAte: Link, Visited, Hover et Active.

Liste à puce en image

La propriété list-style-image n’est pas gérée de la même façon en fonction des navigateurs. Ce qui cause évidemment des problèmes dans une mise en page soignée. L’astuce consiste alors à utiliser une image d’arrière plan et de la positionner exactement avec la propriété background-position.

Puce en image
Firefox 2 gère beaucoup mieux les images qu’Internet Explorer 6

Pense-bête CSS

Au début, commencez par personnaliser des éléments (body, a, p). Introduisez progressivement votre touche personnelle par des classes (.encart, .infos). Une fois à l’aise avec ces concepts, élaborez une mise en page par blocs et l’utilisation des ID (#header, #navbar). Cela ne sert à rien de vouloir tout apprendre d’un coup. L’habilitée et la maîtrise viennent avec le travail.

Liste des sélecteurs
Code source Effets
* sélecteur universel: stylise tous les éléments
p élément: stylise les éléments p
p, cite stylise les éléments p et cite
p.vert stylise les § dont la classe est “vert”
.vert p stylise les § descendants de la classe “vert”
p#vert stylise les § dont l’ID (unique) est “vert”
.gris classe: stylise un élément
h3 em sélecteur descendant: stylise l’élément em dans les h3
p>em stylise les éléments em à l’intérieur d’un §
h1+p stylise tous les § précédés de h1
#tip stylise tous les blocs dont l’ID est “tip”
#tip h2 stylise tous les h2 du bloc dont l’ID est “tip”
input[type=text] stylise les champs “texte” de l’attribut type

Exemple animé

De nombreux webdesigners travaillent d’abord sur papier. Ensuite, ils reproduisent la maquette dans un logiciel de traitement d’image. La composition graphique est découpée puis intégrée dans une page HTML grâce à une feuille de style externe. Un petit truc pour caler son modèle parfaitement à sa composition dans Photoshop, ajoutez l’image entière en fond de page en semi-transparence.

Intégration d'une page en CSS

Liens utiles

  1. Les feuilles de style en cascade, recommandation du W3C
  2. Web Devout, compatibilité des navigateurs
  3. CSS Validator, W3C
  4. Des CSS plus efficaces grâce aux raccourcis
  5. Habillage de tableaux avec des CSS
  6. Faire une feuille de style pour l’impression
  7. Tutoriels CSS, Alsacréations
  8. CSS Library, code source des menus et layouts


Commentaires

Laisser un commentaire