Wikiversité

Cascading Style Sheet/Appliquer un style à un élément

< Cascading Style Sheet
Début de la boite de navigation du chapitre
Appliquer un style à un élément
Icône de la faculté
Chapitre no 3
Leçon : CSS
Chap. préc. :Lier une feuille de style
Chap. suiv. :Cascade, héritage et spécificité
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Cascading Style Sheet : Appliquer un style à un élément
Cascading Style Sheet/Appliquer un style à un élément », n'a pu être restituée correctement ci-dessus.

Introduction

modifier

Pour réaliser une mise en page d'un document HTML ou XML, il faut appliquer des styles aux éléments du document source en CSS. Ceci se passe en deux étapes :

  1. Sélectionner un ou plusieurs éléments à l'aide de sélecteurs.
  2. Appliquer un ou plusieurs styles aux éléments retenus par le sélecteur.

Les déclarations

modifier
 

Syntaxe du langage CSS : 

selecteur{propriété:valeur;}

Soit l'exemple suivant : 

 input {background-color:yellow;}
  • input {background-color:yellow;} : un jeu de règles
  • input : un sélecteur
  • {background-color:yellow;} : un bloc de déclarations
  • background-color:yellow; : une déclaration
  • background-color : une propriété
  • yellow : une valeur

Les sélecteurs

modifier

Sélecteur de type

modifier

Le sélecteur de type sélectionne tous les éléments ayant le même type, par exemple si on a besoin de sélectionner tous les éléments h1 d'un document, notre code serait : 

h1 {}

Sélecteur universel

modifier

Le sélecteur universel sélectionne tous les éléments, on l'utilise avec l'étoile "*" : 

* {}

Dans la pratique

modifier

Ce sélecteur universel est très peu utilisé, du moins il est recommandé de ne pas l’utiliser pour ces 2 bonnes raisons :

  1. Il stoppe la cascade : on ne pourra pas redéfinir une propriété déjà définie dans ce sélecteur
  2. Il pose un problème de performances pour le navigateur

Sélecteur d'ID

modifier

Les langages de balisage tel (X)HTML, SVG ou MathML définissent un attribut id (identifiant) ayant une valeur qui correspond au type ID qui peut être appliqué à tous les éléments. Si nous reprenons l'exemple plus haut et souhaitons que seul le premier h1 soit retenu par notre sélecteur, on pourrait donc ajouter un attribut id à notre premier élément h1, comme cela : 

<h1 id="premh1">Premier H1</h1>
<h1>Deuxième H1</h1>

Pour sélectionner le premier h1 en CSS, on doit donner la valeur de l'attribut id précédée du caractère croisillon "#" : 

#premh1 {}

Il est aussi possible de combiner le sélecteur de type et le sélecteur d'ID : 

h1#premh1 {}

En étant rigoureux dans le vocabulaire, on devrait parler ici pour "h1#premh1" d'un sélecteur qui est composé d'une séquence de deux sélecteurs simples (h1 et #premh1). Ce lexique peut vous être utile dans la suite de votre apprentissage. Pour que notre sélecteur retienne un élément, il faut que ce dernier soit à la fois de type h1 et qu’il ait comme valeur d'attribut ID "premh1".

À noter aussi qu’il est important de faire la différence entre le nom d'attribut "id" et la valeur d'attribut "ID". Il est tout à fait possible d’avoir un document qui définit un attribut n'ayant pas comme nom "id" mais ayant un type de valeur "ID". D'autre part XML propose de façon générique un attribut "xml:id".

Dans la pratique

modifier

On utilisera plus aisément les classes pour gérer des styles de mise en forme. Les "id" sont souvent utilisés pour cibler une interaction en JavaScript. Ainsi, il est plus clair d’utiliser des id ou des classes avec un préfixe "js" pour tout ce qui est ciblé par le JavaScript et d’utiliser les classes pour les CSS.

Sélecteur de classe

modifier

Ce sélecteur a beaucoup de points communs avec le sélecteur d'ID mais il est utile de connaître les quelques différences. Premièrement il ne se base lui que sur l'attribut class (notamment utilisé en (X)HTML) et n’est pas associé au type ID. Il est ainsi possible que deux éléments dans un document ait un même nom de classe (identifiant). Deuxièmement on l'indique non pas avec un croisillon mais avec un point "." : 

.premh1 {}

Autre chose moins importante qu'on utilise assez rarement, comme la spécification HTML 4 nous l'indique il est possible de définir plusieurs noms de classe par élément en les séparant par un espace : 

<p class="rouge">Tomate rouge</p>
<p class="rouge">Pomme rouge</p>

p.rouge {}

Si vous avez bien compris, nos deux éléments p sont retenus par le sélecteur "p.rouge" puisque ces éléments ont bien comme type "p" et ont bien un nom de classe "rouge". À noter ici que le sélecteur simple "p" pourrait être ommis, mais on peut le garder pour nous faciliter la lisibilité du code.

Pour être honnête et complet, il est aussi possible de définir plusieurs identifiants de type ID par élément, mais ceci est moins facile à faire et surtout beaucoup moins bien supporté par les navigateurs actuels.

Combinateur de descendance

modifier

Les sélecteurs simples étudiés précédemment peuvent être un peu lourds pour sélectionner un élément précis dans un document. C'est pourquoi le combinateur de descendance existe, il s'intercale entre deux séquences de sélecteurs simples, avec un espace blanc : 

<ul>
<li>Premier item de liste</li>
<li>Deuxième item de liste</li>
</ul>

ul li {}

Notre sélecteur "ul li" retient tous les éléments li qui sont dans l'arbre du document descendants d'un élément ul.

Liste de sélecteurs

modifier

Il arrive quelque fois qu'on veuille appliquer les mêmes styles à plusieurs éléments différents, avec ce qu'on a appris jusque là, on serait obligé de faire : 

h1 {}
h2 {}
h3 {}

Il est possible de regrouper ces sélecteurs en une liste de sélecteurs avec l'aide d'une virgule : 

h1, h2, h3 {}

Note : l'espace après la virgule est optionnel.

Pseudo-classes d'ancres

modifier
modifier

À l'intérieur des documents se trouvent souvent des liens, qui permettent comme vous le savez de naviguer à l'intérieur d'un document ou vers des documents externes. 

<lien xhref:type="simple" xhref:href="doc.xml">Document XML</lien>

Pour sélectionner l'élément lien et afficher l'intitulé du lien en bleu, on pourrait faire : 

lien {color:blue;}

Mais on peut aussi utiliser la pseudo-classe :link : 

:link {color:blue;}

:visited

modifier

Changer le style d'un lien lorsque celui-ci a déjà été visité par l'utilisateur, rien de plus simple avec la pseudo-classe :visited, justement faite pour cet usage. 

:link {color:blue;}
:visited {color:purple;}

Le lien sera bleu et violet si l'utilisateur l'a déjà visité récemment. Notons qu'on pourrait aussi ajouter le sélecteur simple "lien" devant nos pseudo-classes, mais il n’est pas indispensable de le mettre ici.

Pseudo-classes dynamiques

modifier

On peut être amené à changer l'effet d'un élément lorsque celui-ci reçoit l'attention d'un navigateur, c’est la raison pour laquelle nous parlons de pseudo-classes dynamiques.

:hover

modifier

Cette pseudo-classe sélectionne les éléments qui sont survolés par un système de pointage tel une souris ou un stylet. Pour reproduire le soulignement des liens de Wikipedia, nous appliquerons la feuille de style suivante : 

a:hover {text-decoration:underline;}

Note : IE6 ne comprend pas cette pseudo-classe lorsqu'elle n’est pas attachée aux liens.

:active

modifier
active sélectionne les éléments qui sont activés par l'utilisateur, par exemple lorsqu'on clique avec la souris sur un lien.
a:active {color:red;}

Note : Internet Explorer ne comprend pas :active lorsque non attachée à un lien.

:focus

modifier
focus sélectionne les éléments qui reçoivent l'attention de l'utilisateur, par exemple quand celui-ci est prêt à taper du texte dans un formulaire :
input {background-color:yellow;}

Cette pseudo-classe est notamment utilisée sur Firefox pour afficher un contour en pointillé lorsqu'on clique sur un lien, dans ce genre de cas elle prend en faite le dessus sur :active. Les navigateurs basés sur le moteur de rendu Webkit tel Google Chrome ou Apple Safari ne l'entendent pas de cette oreille et ne considèrent pas qu'un clic sur un lien est synonyme de focus.

Note : Internet Explorer ne supporte pas cette propriété avant la version 8.

Les pseudo-éléments

modifier

Les pseudo-éléments sont des éléments qui ne sont pas présents physiquement dans l'arbre du document. Ils ne peuvent être écrits qu’à la fin d'un sélecteur.

:first-letter

modifier 
<article>First-letter</article>

article:first-letter {font-size:200%;}

La première lettre de notre article aura une taille de police multipliée par 2.

:first-line

modifier

Ce n’est pas la première lettre qui est retenue ici mais la première ligne : 

p:first-line {text-decoration:overline;}

Une barre horizontale sera placée au dessus de la première ligne du paragraphe.

Nous étudierons plus en détail ces pseudo-éléments dans la suite du cours.


Les propriétés

modifier

Certaines propriétés changent d'un navigateur à l'autre[1] :

Sélecteur Navigateur
-ms-transform Internet Explorer 9
-moz-transform Mozilla (Firefox[2])
-webkit-transform Webkit (Chrome, Safari)
-o-transform Opera
-khtml-transform Konqueror

Les valeurs

modifier

Les couleurs

modifier

Il est possible de définir les couleurs de 3 façons :

  1. Par leurs 16 noms : aqua, black, blue, fushia, gray (ou grey), green, lime, maroon, navy, purple, red, silver, teal, white, yellow. Ex : 
    body{background-color:blue;}. /* Couleur de fond bleue */
  2. Par code RGB (red, green, blue). Ex : 
    h1{color:rgb(10,60,110);} /* Titre 1 bleuté */
  3. Par valeur hexadécimale. Ex: 
    p{color:#3300FF;} /* Paragraphe bleu */

Le texte

modifier
  1. font-style propose 3 styles de texte : normal, italic, et oblique.
  2. font-weight influe sur la graisse de la police de caractère : normal, bold, bolder, lighter. Il accepte également les valeurs entre 100 et 900 par pas de 100.
  3. font-size : joue sur la taille des caractères, ses unités peuvent être : cm, mm, in (pouces), pt (1 point = 1/72 de pouce), pc (1 picas = 12 points), em (emphasize), ex (minuscule), px (pixels), %. Exemple de classes de paragraphes :
    1. p#t1 { font-size: 12px; }
    2. p#t2 { font-size: 1.5em; }
    3. p#t3 { font-size: 175%; }

Les listes

modifier
  1. Non ordonnées (<ul>).
    Ses styles sont : none, disc, circle, square, url([image]).
    Exemple : ul {list-style-type:square;}.
  2. Ordonnées (<ol>).
    list-style-type comprend : none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman, url([image]).
    Exemple : ol {list-style-type:upper-roman;}

Le positionnement

modifier
  1. Trois valeurs possibles pour position : static, relative, absolute, personnalisables avec left, right, top, bottom.
    Exemple : déplacement de l'id p1 vers le bas de 20 pixels, et vers la gauche de 30 :
    #p1 { position:relative; bottom:20px; left:-30px; }
  2. Dans le coin supérieur droit : 
    #p1 { position:absolute; top:0; right:0; width:200px; }
  3. Remplacement des positionnements précédents : 
    #p1 { position:static; }

En position relative, il existe float, qui peut être égal à left, right, none, inherit : 

#p1 { float:none; }

Pour aligner du texte, il existe : 

#p1 { text-align:center; }

Pour aligner un bouton contenant du texte, utiliser text-align dans une balise qui le contient.

Références

modifier
  1. ↑ http://stackoverflow.com/questions/9144244/css-unknown-property-transform
  2. ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions?redirectlocale=en-US&redirectslug=Web%2FCSS%2FCSS_Reference%2FMozilla_Extensions


  Lier une feuille de style
Récupérée de « https://fr.wikiversity.org/w/index.php?title=Cascading_Style_Sheet/Appliquer_un_style_à_un_élément&oldid=912782 »