Comment fonctionne CSS
CSS peut être utilisé pour modifier la conception de la disposition, vous n'avez donc qu'à écrire un seul code pour tous vos éléments. En utilisant CSS, vous pouvez utiliser moins de code pour créer votre page Web. Vous pouvez appliquer une règle CSS à toutes les balises d'une page. En apprenant CSS, vous pouvez rendre votre site Web génial.
Comment fonctionne CSS
Le processus en cascade de CSS permet de combiner plusieurs styles. Il aide à éviter les conflits lorsque différents styles définissent la même propriété, comme la taille de la police. Lorsqu'un élément a plus d'une feuille de style, le navigateur choisira le plus approprié (le dernier) et résoudra le conflit.
Composants d'un code CSS
Cette section décrit les instances fondamentales d'un code CSS.
Prenons l'exemple d'un simple code CSS pour un titre (H1):
H1 couleur: noir; Police-poids: Bold;Le code CSS ci-dessus comprend les parties suivantes:
- H1 est connu comme "sélecteur"
- Le texte écrit à l'intérieur des accolades bouclés est appelé «déclaration«;; Le code à l'intérieur des accolades bouclés est appliqué au sélecteur défini avant les accolades bouclées.
- Le couleur et poids de police sont les propriétés tandis que le noir et gras sont les valeurs des propriétés
En dehors des composants indiqués ci-dessus, un semi-colon est inséré après chaque propriété avant de démarrer l'autre. En bref, un simple code CSS a quatre composants: sélecteur, déclaration, propriété et valeur.
Comment le code CSS est intégré
Un code CSS peut être intégré de l'une des manières suivantes:
- À l'intérieur d'un élément HTML: Les propriétés sont définies dans un élément spécifique de HTML et l'image indiquée ci-dessous montre l'application de CSS en ligne.
- En tant que CSS interne: Le code est écrit en utilisant l'élément et à l'intérieur du diriger Tag du fichier html. Pour mieux sous-estimer les CSS internes, nous avons joint l'image qui montre que la police et la couleur sont définies pour les paragraphes:
- En tant que fichier CSS externe: un code CSS est écrit dans un fichier séparé, puis le fichier CSS est lié au fichier html:
Comment CSS et HTML fonctionnent ensemble
Les phénomènes CSS et HTML sont liés les uns aux autres. Un code HTML peut être appelé la structure du bâtiment tandis que CSS est le processus d'embellissement de cette structure. Une structure brute est inutile sans peinture et d'autres décorations. Le HTML et le CSS travaillent en collaboration sur une page Web:
Une page Web suit le processus indiqué ci-dessous pour charger correctement:
- Une page HTML est chargée par le navigateur
- Le navigateur convertit que HTML en arbre DOM (modèle d'objet de données)
- Pendant ce temps, le navigateur charge les styles associés à cette page HTML: pour cela, le fichier CSS (lié à ce fichier HTML) est analysé pour créer un arbre de modèle d'objet de données (DOM).
- Après l'ajout réussi des règles de style, la dernière étape (affichage) est ensuite effectuée
La représentation visuelle du chargement d'une page Web s'affiche ci-dessous
Le modèle d'objet de données (DOM) est une structure hiérarchique (en forme d'arbre) du code HTML. Chaque élément et ses propriétés associées sont appelées nœuds DOM. Les sélecteurs CSS (il peut être n'importe quel élément HTML) sont vérifiés avec les nœuds DOM et les nœuds correspondants adoptent les propriétés / valeurs définies dans un fichier CSS.
Conclusion
Le processus CSS identifie les éléments d'une page Web. Il détermine également comment les styles sont appliqués à ces éléments. Il est essentiel de comprendre que CSS n'est pas une langue limitée à une langue ou à une seule feuille de style. Ce post descriptif éclaire les principes fondamentaux et le travail de CSS. Initialement, nous avons fourni de brefs détails sur le concept fondamental de CSS, puis décrits le travail collaboratif de HTML et CSS.
Happy Computing!