CSS (Cascading Style Sheets) est un langage de feuille de style de représentation utilisé pour décrire l'apparence et la mise en forme des documents HTML (HyperText Markup Language), XML (Extensible Markup Language) et des éléments SVG, y compris (mais sans s'y limiter) les couleurs, la mise en page, les polices, et animations. Il décrit également comment les éléments doivent être affichés à l'écran, sur papier, dans un discours ou sur d'autres supports.

CSS, ou feuilles de style en cascade, est un langage utilisé pour contrôler la présentation visuelle des documents écrits dans un balisage langage, y compris HTML, XML, XHTML, SVG et XUL.

La présentation visuelle de HTML était initialement définie par des attributs HTML, mais HTML 4 a déprécié ces attributs car CSS a été introduit pour séparer le contrôle de la présentation visuelle du contenu. En octobre 1994, Håkon Wium Liea d'abord proposé Feuilles de style HTML en cascadetout en travaillant au CERN avec Sir Tim Berners-Lee, qui avait développé un navigateur Web et inventé le HTML.

Un document CSS de base est constitué d'ensembles de règles. Chaque jeu de règles commence par un sélecteur, un modèle qui correspond aux éléments d'un document HTML ou XML, et est suivi d'un bloc de zéro ou plusieurs déclarations de propriété qui définissent la présentation des éléments correspondants. Le sélecteur est quasi-identique au sélecteur utilisé par .querySelectorAllde Javascript. Par exemple:

/* This is a comment */ 

a {                             /* Select all <a> elements (HTML links), */
    color: orange;              /* change their text color to orange, */
    background-color: pink;     /* their background color to pink, */
    text-decoration: none;      /* and remove text decorations like underlines. */
}

a:hover {                       /* Select all <a> elements which are currently being hovered over with the :hover pseudo-class*/
    color: red;                 /* change the color to red */
    text-decoration: underline; /* and add an underline again */
}

L'exemple simple ci-dessus illustre également l'élément en cascade de CSS. Lorsque vous survolez un lien (c'est-à-dire un élément <a>) dans une page HTML avec cette feuille de style qui lui est appliquée, les deux règles s'appliquent. En raison de la première règle, le lien aura un fond rose. Mais, comme le sélecteur a:hoverest plus spécifique, ses propriétés color et text-decoration remplacent celles de l'ensemble de règles <a>.

La commande en cascadedéfinit comment spécificitéet d'autres facteurs déterminent quelle valeur de propriété est appliquée à un élément.


Priorité et spécificité du sélecteur

Chaque composant d'un sélecteur CSS peut être basé sur un ou plusieurs des quatre attributs possibles d'un élément HTML:

  1. L'ID de l'élément (à partir de l'attribut id)
  2. Le nom d'une des classes de l'élément (dans l'attribut class)
  3. Le nom de la balise de l'élément
  4. Les propriétés de l'élément ou leurs valeurs

Les sélecteurs utilisant un sélecteur d'ID ont une priorité plus élevée que les sélecteurs utilisant des noms de classe, et les sélecteurs utilisant un nom de classe ont une priorité plus élevée que les sélecteurs utilisant des noms de balise. C'est ce qu'on appelle la priorité du sélecteur. L'annotation !important peut être utilisée pour remplacer la priorité du sélecteur, en élevant une déclaration normale à une déclaration importante. Dans la mesure du possible, cependant, une spécificité plus élevée dans une déclaration normale doit être utilisée de préférence à la création d'une déclaration importante via l'annotation !important, afin d'éviter les remplacements sur tout autre style qui pourrait devoir être ajouté, en particulier ceux qui sont ensuite ajoutés avec une intention de priorité naturelle.

Par exemple:

/* any anchor element */
a {                
    color: orange;
}

/* any element with class name class1 */
.class1 {          
    color: red;
}    

/* the element with id anchor1 */
#anchor1 {
    color: green;
}
<!-- Creates an anchor with a class of class1 and an ID of anchor1 -->
<a class="class1" id="anchor1">Sample</a>

Dans l'exemple ci-dessus, la couleur du texte du contenu de l'élément <a>, la chaîne "Sample", sera verte.

Les occurrences répétées du même sélecteur augmentent également la spécificité, comme indiqué dans la Recommandation W3C des sélecteurs de niveau 3.

.class1.class1 {    /* repeated class selector */
    font-weight: bold;
}

.class1 {
    font-weight: normal;
}

Ici, le sélecteur répété a une spécificité plus élevée que le sélecteur singulier, et le font-weight de notre exemple de chaîne sera en gras.

Selon MDN,

La spécificité est essentiellement une mesure de la spécificité d'un sélecteur - combien d'éléments il pourrait correspondre. Les sélecteurs [...] d'éléments ont une faible spécificité. Les sélecteurs de classe ont une spécificité plus élevée, donc [les classes] gagneront contre les sélecteurs d'éléments. Les sélecteurs d'ID ont une spécificité encore plus élevée, donc les [ID] gagneront contre les sélecteurs de classe.

Des sélecteurs complexes peuvent être créés en joignant plusieurs simples. Il est également possible de styliser des éléments en fonction d'un attribut:

/* The first <a> element inside a <p> element that's next to an <h3> element
   that's a direct child of #sidebar matches this rule */
#sidebar > h3 + p a:first-of-type {
    border-bottom: 1px solid #333;
    font-style: italic;
}

/* Only <img> elements with the 'alt' attribute match this rule */
img[alt] {
    background-color: #F00;
}

Un calculateur de spécificité des règles CSS est disponible ici. Cela peut être utile lorsqu'un projet contient un ou plusieurs fichiers CSS volumineux.


Héritage

L'héritage est une fonctionnalité clé en CSS.

L'héritage est le mécanisme par lequel les propriétés sont appliquées non seulement à un élément spécifié mais également à ses descendants. En général, les éléments descendants héritent automatiquement des propriétés liées au texte, mais les propriétés liées à la boîte ne sont pas automatiquement héritées.

  • Les propriétés héritées par défaut sont color, font, letter-spacing, line-height, list-style, list-style, text-align, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-indent, text-align {X7}}, visibility, white-space et word-spacing.
  • Les propriétés qui ne sont généralement pas héritées sont background, border, display, float et clear, clear, height et width, et width, margin, min / max-height / width, outline, overflow, overflow, padding, position, position, position, position, position, position, position, position, position, position, position, position, position, position, position, position, position, position, position X15}}, vertical-align et z-index.

Il convient de noter que toute propriété peut être héritéeen utilisant inheritvaleur de propriété. Cela doit cependant être utilisé avec précaution, car Internet Explorer (jusqu'à la version 7 incluse) ne prend pas en charge ce mot clé. Par exemple:

/* Set the color of <p> elements to a light blue */
p {
    color: #C0FFEE;
}

/* Set the color of #sidebar to a light red */
#sidebar {
    color: #C55;
}

/* <p> elements inside #sidebar inherit their parent's color (#C55) */
#sidebar p {
    color: inherit;
}


/* You may also override inherited styles using the !important annotation */
#sidebar p:first-of-type {
    color: orange !important;
}

Avis important:

Pour les questions liées au CSS, essayez de démontrer votre code de manière reproductible en utilisant Les extraits de pile de Stack Exchangeou tout autre éditeur en ligne qui permet d'exécuter et de partager du code tel que JS Bin, JSFiddleou CodePen(mais assurez-vous de toujours inclure le code pertinent dans la question).


Les références

Tutoriel interactif

Diner CSS- Un jeu interactif pour en savoir plus sur les sélecteurs CSS.

Didacticiel vidéo

Pseudo-sélecteur CSS

Validation

Conventions de nommage et méthodologies: bulbe:

Prise en charge du navigateur

Pré-processeurs CSS

Post-processeurs CSS

Réinitialiser les feuilles de style

Cadres CSS css-frameworks

L'avenir

Les éléments suivants ont actuellement très peu (voire aucun) prise en charge du navigateur et sont toujours en cours de réalisation:

Tchat

Discutez de CSS (et HTML / DOM) avec d'autres utilisateurs de Stack Overflow:


Tags associés pour des fonctionnalités spécifiques

css-animationscss-calccss-contentcss-filterscss-floatcss-gridcss-modulescss-multicolumn-layoutcss-positioncss-preprocessorcss-selectorscss-shapescss-specificitycss-spritescss-tablescss-transformscss-transitionscss-variables