This page has been robot translated, sorry for typos if any. Original content here.

CSS - Feuilles de style en cascade

CSS - Cascading Style Sheets

CSS (English Cascading Style Sheets) est un langage formel pour décrire l'apparence d'un document écrit en utilisant un langage de balisage.

Il est principalement utilisé comme un moyen de décrire, de visualiser l'apparence des pages Web écrites en utilisant les langages de balisage HTML et XHTML, mais peut également être appliqué à tout document XML, par exemple, à SVG ou XUL.

Le but de la création de CSS

CSS est utilisé par les créateurs de pages Web pour spécifier les couleurs, les polices, l'emplacement des blocs individuels et d'autres aspects de la représentation de l'apparence de ces pages Web. Le but principal du développement CSS était de séparer la description de la structure logique d'une page web (qui est produite en HTML ou autres langages de balisage) de la description de l'apparence de cette page web (qui est maintenant faite en langage CSS formel). Cette séparation peut augmenter la disponibilité du document, offrir une plus grande souplesse et la capacité de gérer sa présentation, et également réduire la complexité et la répétabilité du contenu structurel. En outre, CSS vous permet de représenter le même document dans différents styles ou méthodes de sortie, tels qu'une vue d'écran, une présentation imprimée, une lecture vocale (un navigateur vocal ou un lecteur d'écran) ou une sortie par des appareils utilisant le Braille.

Façons de connecter CSS à un document

Les règles CSS sont écrites dans le langage CSS officiel et se trouvent dans des feuilles de style, c'est-à-dire que les feuilles de style contiennent des règles CSS. Ces feuilles de style peuvent être placées à la fois dans le document Web lui-même, dans l'apparence de leur description et dans des fichiers individuels au format CSS. (En fait, le format CSS est un fichier texte. Le fichier .css ne contient qu'une liste de règles CSS et de commentaires à leur sujet.)

En d'autres termes, ces feuilles de style peuvent être connectées, intégrées dans le document Web qu'elles décrivent de quatre manières différentes:

+ Lorsque la feuille de style est dans un fichier séparé, elle peut être connectée au document Web via la balise <link> située dans ce document entre les balises <head> et </ head>. (La balise <link> aura un attribut href qui a la valeur de l'adresse de cette feuille de style). Toutes les règles de cette table sont valables dans tout le document;

  <! DOCTYPE html>
  <html>
  <tête>
  .....
  <link rel = "feuille de style" href = "style.css">
  </ head>
  <body>
  .....
  </ body>
  </ html>
 

+ Lorsque la feuille de style est dans un fichier séparé, elle peut être attachée au document Web via la directive @import, située dans ce document entre les balises <style> et </ style> (qui se trouvent dans ce document entre les < head> et </ head>) immédiatement après la balise <style>, qui indique également (entre parenthèses, après le mot url) l'adresse de cette feuille de style. Toutes les règles de cette table sont valables dans tout le document;

  <! DOCTYPE html>
  <html>
  <tête>
  .....
  <style media = "tous">
  @import url (style.css);
  </ style>
  </ head>
  </ html>
 

+ Lorsqu'une feuille de style est décrite dans le document lui-même, elle peut être placée entre les balises <style> et </ style> (qui se trouvent à leur tour dans ce document entre les balises <head> et </ head>). Toutes les règles de cette table sont valables dans tout le document;

  <! DOCTYPE html>
  <html>
  <tête>
  .....
  <style>
  corps {
  couleur: rouge;
  }
  </ style>
  </ head>
  <body>
  .....
  </ body>
  </ html>
 

+ Lorsqu'une feuille de style est décrite dans le document lui-même, elle peut y figurer dans le corps d'une étiquette particulière (grâce à son attribut style) de ce document. Toutes les règles de cette table s'appliquent uniquement au contenu de cette balise.

  <! DOCTYPE>
  <html>
  <tête>
  .....
  </ head>
  <body>
  <p style = "font-size: 20px; couleur: vert; font-famille: arial, helvetica, sans-serif">
  .....
  </ p>
  </ body>
  </ html>
 

Dans les deux premiers cas, il est dit que les feuilles de style externes sont appliquées au document et, dans les deux autres cas, les feuilles de style internes.

Pour ajouter un CSS à un document XML, ce dernier doit contenir un lien spécial vers la feuille de style. Par exemple:

  <? xml-stylesheet type = "texte / css" href = "style.css"?> 

Hiérarchie des éléments dans un document

Comme vous le savez, les documents HTML sont construits sur la base de la hiérarchie des éléments, qui peuvent être représentés visuellement sous forme arborescente. Les éléments HTML les uns pour les autres peuvent être parent, enfant, ancêtre, descendant, soeur .

Un élément est le parent d'un autre élément, s'il se trouve immédiatement dans la structure hiérarchique du document, directement au-dessus de cet élément. Un élément est l'ancêtre d'un autre élément, si dans la structure hiérarchique du document, il se situe quelque part au-dessus de cet élément.

Soit, par exemple, deux paragraphes de p dans le document, y compris une police avec caractères gras b . Alors les éléments de b sont les enfants de leurs éléments parents p et descendants du corps de leurs ancêtres. À son tour, pour les éléments p, l'élément body sera seulement le parent. Et d'ailleurs, ces deux éléments p seront des éléments frères, ayant le même parent- corps .

En CSS, non seulement des éléments individuels peuvent être spécifiés en utilisant des sélecteurs, mais aussi des éléments qui sont des descendants, des enfants ou des éléments frères d'autres éléments (voir la sous-section "Types de sélecteurs").

Règles de construction CSS

Dans les trois premiers cas de connexion d'une table CSS à un document (voir ci-dessus), chaque règle CSS de la feuille de style comporte deux parties principales: un sélecteur et un bloc d'annonces. Le sélecteur situé à gauche de la règle détermine les parties du document auxquelles la règle s'applique. Le bloc d'annonces est situé sur le côté droit de la règle. Il est placé entre accolades, et, à son tour, se compose d'une ou plusieurs déclarations séparées par un ";". Chaque déclaration est une combinaison d'une propriété CSS et d'une valeur séparées par un ":". Les sélecteurs peuvent être groupés sur une ligne, séparés par une virgule. Dans ce cas, la propriété est appliquée à chacun d'eux.

  selector, selector {
  propriété: valeur;
  propriété: valeur;
  propriété: valeur;
  }
 

Dans le quatrième cas de connexion d'une table CSS à un document (voir liste), la règle CSS (valeur de l'attribut style de la balise sur laquelle elle agit) est une liste d'annonces (la "propriété CSS: valeur" ) séparées par un ";" .