Exemple de commentaire CSS - Comment commenter CSS

Les commentaires sont utilisés en CSS pour expliquer un bloc de code ou pour apporter des modifications temporaires au cours du développement. Le code commenté ne s'exécute pas.

Les commentaires sur une ou plusieurs lignes en CSS commencent /*et se terminent par */, et vous pouvez ajouter autant de commentaires à votre feuille de style que vous le souhaitez. Par exemple:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

Vous pouvez également rendre vos commentaires plus lisibles en les stylisant:

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

Organiser CSS avec des commentaires

Dans les projets plus volumineux, les fichiers CSS peuvent rapidement grossir et devenir difficiles à gérer. Il peut être utile d'organiser votre CSS en sections distinctes avec une table des matières pour faciliter la recherche de certaines règles à l'avenir:

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

Un peu plus sur CSS: syntaxe et sélecteurs CSS

Lorsque nous parlons de la syntaxe du CSS, nous parlons de la façon dont les choses sont présentées. Il existe des règles sur ce qui va où, à la fois pour que vous puissiez écrire du CSS de manière cohérente et qu'un programme (comme un navigateur) puisse l'interpréter et l'appliquer correctement à la page.

Il existe deux manières principales d'écrire du CSS.

CSS en ligne

Spécificités sur la spécificité CSS: astuces CSS

Le CSS en ligne applique le style à un seul élément et à ses enfants, jusqu'à ce qu'un autre style remplaçant le premier soit rencontré.

Pour appliquer du CSS en ligne, ajoutez l'attribut "style" à un élément HTML que vous souhaitez modifier. Entre guillemets, incluez une liste délimitée par des points-virgules de paires clé / valeur (chacune à son tour séparée par deux-points) indiquant les styles à définir.

Voici un exemple de CSS en ligne. Les mots «Un» et «Deux» auront une couleur d'arrière-plan de jaune et une couleur de texte de rouge. Le mot «Trois» a un nouveau style qui remplace le premier, et aura une couleur d'arrière-plan de vert et une couleur de texte de cyan. Dans l'exemple, nous appliquons des styles aux balises, mais vous pouvez appliquer un style à n'importe quel élément HTML.

 One Two Three 

CSS interne

Bien que l'écriture d'un style en ligne soit un moyen rapide de modifier un seul élément, il existe un moyen plus efficace d'appliquer le même style à de nombreux éléments de la page à la fois.

Le CSS interne a ses styles spécifiés dans la balise et il est incorporé dans la balise.

Voici un exemple qui a un effet similaire à l'exemple «en ligne» ci-dessus, sauf que le CSS a été extrait dans sa propre zone. Les mots «Un» et «Deux» correspondront au divsélecteur et seront du texte rouge sur fond jaune. Les mots «Trois» et «Quatre» correspondent également au divsélecteur, mais ils correspondent également au .nested_divsélecteur qui s'applique à tout élément HTML faisant référence à cette classe. Ce sélecteur plus spécifique remplace le premier, et ils finissent par apparaître sous forme de texte cyan sur fond vert.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Les sélecteurs illustrés ci-dessus sont extrêmement simples, mais ils peuvent devenir assez complexes. Par exemple, il est possible d'appliquer des styles uniquement aux éléments imbriqués; c'est-à-dire un élément qui est un enfant d'un autre élément.

Voici un exemple où nous spécifions un style qui ne devrait être appliqué qu'aux divéléments qui sont un enfant direct d'autres divéléments. Le résultat est que «Deux» et «Trois» apparaîtront sous forme de texte rouge sur fond jaune, mais «Un» et «Quatre» resteront inchangés (et très probablement du texte noir sur fond blanc).

 div > div { color: red; background: yellow; } One Two Three Four 

CSS externe

Tout le style a son propre document qui est lié dans la balise. L'extension du fichier lié est.css