les commentaires sont utilisés dans CSS pour expliquer un bloc de code ou pour apporter des modifications temporaires pendant le développement. Le code commenté ne s’exécute pas.
les commentaires simples et multi-lignes dans CSS commencent par/*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:
dans les grands projets, les fichiers CSS peuvent rapidement augmenter en taille et devenir difficiles à maintenir., 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:
un peu plus sur CSS: syntaxe CSS et sélecteurs
lorsque nous parlons de la syntaxe de CSS, nous parlons de la façon dont les choses sont disposées. Il existe des règles sur ce qui se passe où, à la fois pour que vous puissiez écrire CSS de manière cohérente et qu’un programme (comme un navigateur) puisse l’interpréter et l’appliquer correctement à la page.
Il y a deux façons principales d’écrire CSS.,
inline CSS
détails sur la spécificité CSS: astuces CSS
inline CSS applique le style à un seul élément et à ses enfants, jusqu’à ce qu’un autre style remplace le premier soit rencontré.
pour appliquer du CSS en ligne, ajoutez l’attribut « style” à un élément HTML que vous souhaitez modifier. À l’intérieur des guillemets, incluez une liste délimitée par des points-virgules de paires clé/valeur (chacune à son tour séparée par un deux-points) indiquant les styles à définir.
Voici un exemple de CSS en ligne. Les mots » Un « et” deux » auront une couleur de fond jaune et une couleur de texte rouge., Le mot « trois » a un nouveau style qui remplace le premier, et aura une couleur de fond de vert et la couleur du texte de cyan. Dans l’exemple, nous appliquons des styles aux balises <div>, mais vous pouvez appliquer un style à n’importe quel élément HTML.
<div style="color:red; background:yellow"> One <div> Two </div> <div style="color:cyan; background:green"> Three </div></div>CSS interne
bien que l’écriture d’un style en ligne soit un moyen rapide de changer un seul élément, il existe un moyen plus efficace d’appliquer le même style à plusieurs éléments de la page à la fois.,
le CSS interne a ses styles spécifiés dans la balise<style>, Et il est intégré dans la balise<head>.
Voici un exemple qui a un effet similaire à l’exemple « inline” ci-dessus, sauf que le CSS a été extrait dans sa propre zone. Les mots » Un « et” deux »correspondront au sélecteur div et seront du texte rouge sur fond jaune., Les mots « trois” et « quatre” correspondent également au sélecteur div, mais ils correspondent également au sélecteur .nested_div 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.
Les sélecteurs ci-dessus sont extrêmement simples, mais ils peuvent être assez complexes. Par exemple, il est possible d’appliquer des styles uniquement aux éléments imbriqués; c’est un élément qui est un enfant d’un autre élément.,
Voici un exemple où nous spécifions un style qui ne doit être appliqué qu’aux élémentsdivqui sont un enfant direct d’autres élémentsdiv. Le résultat est que « deux” et « trois” apparaîtront sous forme de texte rouge sur un fond jaune, mais « un” et « quatre » resteront inchangés (et très probablement du texte noir sur un fond blanc).
<style type="text/css"> div > div { color: red; background: yellow; }</style><div> One <div> Two </div> <div> Three </div></div><div> Four</div>CSS
Tout le style a son propre document, qui est lié dans le <head> balise. L’extension du fichier lié est .css