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 - feuilles de style en cascade) est un langage formel décrivant l'apparence d'un document écrit à l'aide d'un langage de balisage.

Il est principalement utilisé pour décrire et façonner l'apparence des pages Web écrites à l'aide des langages de balisage HTML et XHTML, mais peut également être appliqué à tout document XML, par exemple, SVG ou XUL.

Le but de créer CSS

CSS est utilisé par les créateurs de pages Web pour spécifier les couleurs, les polices de caractères, l'emplacement de blocs individuels et d'autres aspects de l'apparence de ces pages Web. L'objectif principal du développement de CSS était de séparer la description de la structure logique d'une page Web (produite à l'aide de HTML ou d'autres langages de balisage) de la description de l'apparence de cette page Web (désormais produite à l'aide du langage CSS formel). Cette séparation peut augmenter la disponibilité d'un document, offrir une plus grande flexibilité et un meilleur contrôle de sa présentation, ainsi que réduire la complexité et la répétabilité du contenu structurel. De plus, CSS vous permet de présenter le même document dans différents styles ou méthodes de sortie, tels que la présentation à l’écran, la présentation imprimée, la lecture vocale (avec un navigateur vocal spécial ou un lecteur d’écran) ou lors de la sortie par des périphériques utilisant le braille.

Manières de connecter CSS à un document

Les règles CSS sont écrites dans le langage CSS formel et sont situées dans des feuilles de style, c'est-à-dire que les feuilles de style contiennent des règles CSS. Ces feuilles de style peuvent être situées à la fois dans le document Web lui-même, dont elles décrivent l'apparence, et dans des fichiers distincts au format CSS. (En substance, le format CSS est un fichier texte brut. Le fichier .css ne contient rien, mais une liste de règles CSS et leurs commentaires.)

C'est-à-dire que ces feuilles de style peuvent être connectées, incorporées dans le document Web qu'elles décrivent de quatre manières différentes:

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

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

+ Lorsqu'une feuille de style est dans un fichier séparé, elle peut être connectée à un document Web à l'aide de la directive @import, située dans ce document entre les balises <style> et </ style> (qui, à leur tour, sont situées dans ce document entre < 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 ce tableau sont valables dans tout le document;

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

+ lorsque la feuille de style est décrite dans le document lui-même, elle peut être située entre les balises <style> et </ style> (qui, à leur tour, sont situées dans ce document entre les balises <head> et </ head>). Toutes les règles de ce tableau sont valables dans tout le document;

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

+ Lorsque la feuille de style est décrite dans le document lui-même, elle peut être localisée dans le corps d'une balise individuelle (par son attribut style) de ce document. Toutes les règles de ce tableau n'affectent que le contenu de cette balise.

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

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

Pour ajouter du CSS à un document XML, ce dernier doit contenir une référence spéciale à la feuille de style. Par exemple:

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

La hiérarchie des éléments dans le document

Comme vous le savez, les documents HTML sont construits sur la base d'une hiérarchie d'éléments, qui peuvent être clairement représentés sous forme d'arborescence. Les éléments HTML les uns pour les autres peuvent être des parents, des enfants, des éléments ancêtres, des descendants, des éléments frères .

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 un ancêtre d'un autre élément s'il se situe quelque part au-dessus de cet élément dans la structure hiérarchique d'un document.

Soit, par exemple, dans le document, il y a deux paragraphes p , y compris la police en gras b . Alors les éléments b seront des enfants de leurs éléments parents p et des descendants du corps de leurs ancêtres. À son tour, pour les éléments p , l'élément body ne sera que le parent. Et en outre, ces deux éléments de p seront des éléments frères, ayant le même corps parent.

En CSS, vous pouvez spécifier des éléments non seulement des éléments simples, mais également des éléments descendants, 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 d'une feuille de style comporte deux parties principales: un sélecteur et un bloc de déclarations. 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é à droite de la règle. Il est placé entre accolades et comprend une ou plusieurs déclarations séparées par le signe ";". Chaque annonce est une combinaison de propriétés CSS et de valeurs séparées par un ":". Les sélecteurs peuvent être regroupés sur une ligne, séparés par des virgules. Dans ce cas, la propriété est appliquée à chacun d'eux.

  sélecteur, sélecteur {
  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 (qui est la valeur de l'attribut style de la balise sur laquelle elle opère) est une liste de déclarations ( «propriété CSS: valeur» ) séparées par un «;» .