Ensemble de règles CSS
Syntaxe
SélecteurValeur de la propriété;
Exemple 1
Pour suivre cet ensemble de règles dans notre code CSS, nous devons écrire du code en HTML et styliser ces éléments HTML dans un fichier CSS en suivant la règle dans notre code CSS. Nous devons créer un nouveau fichier puis, après avoir sélectionné HTML comme langue, commencez à coder dans ce fichier. Vous pouvez également utiliser le bloc-notes ou tout éditeur de texte pour compiller ces codes.
Maintenant, nous allons déclarer les 1 et 2 en utilisant les balises et créer un paragraphe simple en dessous de ces titres. Nous créons ces titres et les paragraphes dans le corps du HTML, et après avoir enregistré cela, nous allons passer au fichier CSS pour appliquer des propriétés à ces titres et paragraphes en suivant la règle. Nous devons lier le fichier CSS à ce fichier afin que toutes les propriétés que nous utiliserons dans le fichier CSS soient appliquées ici à ce paragraphe et à ce titre.
Nous allons suivre la règle pour styliser ces titres et paragraphes; Tout d'abord, nous utilisons le nom du sélecteur, puis nous plaçons les accolades bouclées selon la règle. Après cela, nous devons donner le nom de la propriété que nous voulons utiliser. Ici, «H1» est le sélecteur, et à l'intérieur des accolades bouclées, nous avons la propriété «couleur», qui est utilisée pour changer la couleur de la police en cette couleur que nous plaçons ici comme valeur pour cette propriété. Nous allons utiliser la couleur «blanc» comme couleur de police, puis changer la «famille de police» en définissant «Times New Roman» comme valeur pour cette «famille de police."
Comme nous avons sélectionné la couleur «blanc» de la police, nous devons donc changer la couleur de l'arrière-plan. Donc, pour cela, nous utilisons la propriété «Color de fond» et définissons le «noir» comme valeur de cette propriété. Ici, nous complétons le style de «H1», et nous fermons les accolades bouclées. Maintenant, pour appliquer un style sur «H2», nous utilisons à nouveau le sélecteur, qui est «H2», puis donnons la propriété à l'intérieur des accolades bouclées. Nous définissons la propriété «Black» «Black» et la propriété «Font-Family» que nous utilisons ici et donnons «Arial» comme valeur. Comme ici, nous utilisons Black Font, nous avons donc réglé la propriété «Color de fond» sur «blanc» et fermer les accolades du «H2» ici.
Vient ensuite le paragraphe, nous allons donc utiliser le «P» comme sélecteur, puis déclarer des propriétés ici pour le paragraphe. Nous définissons la taille de la police du paragraphe à l'aide de la propriété «taille de police», puis définissant la valeur «15px» pour cela. Ensuite, changez la «famille de police» de ce paragraphe en «calibri», qui définit la police simple du paragraphe à «calibri». Nous voulons également changer le style de la police, donc, pour cela, nous utilisons la propriété «de style police» et utilisons ici le «mot-clé», qui est «italique."Notre police de paragraphe apparaîtra dans" Italic "" Style de police.«Ensuite, nous avons la propriété« Font-Weight »et utilisons le mot-clé« Bold »pour changer la police en un style audacieux. La couleur de la police de paragraphe est définie en utilisant la propriété «couleur» sur «rouge."
La sortie donnée montre que toutes les propriétés que nous avons utilisées dans le fichier CSS sont appliquées au texte que nous écrivons dans le code HTML. Le style de police, la couleur et la couleur d'arrière-plan, toutes les propriétés que nous utilisons toutes rendues ici dans la sortie. Si nous ne suivons pas la règle, ces propriétés de style ne sont pas appliquées à notre texte ou à notre document.
Exemple n ° 2
Ici, dans ce code HTML, nous créons un «div» au début, à l'intérieur du corps. Ensuite, nous allons créer deux titres différents. Après ces titres, nous avons également un paragraphe dans ce code. Tous ces rubriques et paragraphes sont écrits à l'intérieur du «div.«Nous fermons le« div »à la fin du code avant de fermer la balise« Body ».
Maintenant, ici, vous pouvez voir comment nous changeons le style de tous ces titres, div et paragraphes. Nous suivons à nouveau la règle pour appliquer le style. Premièrement, nous modifions la «couleur» de la police et définissons sa valeur comme «orange.»Et utilisez une autre propriété pour modifier la famille des polices en utilisant la propriété« Font-Family »et en définissant le nom« algérien »comme valeur.
Ensuite, nous changeons simplement la couleur de la deuxième rubrique en utilisant la propriété «couleur» et définissons la couleur de la deuxième tête vers «Blue.«Nous avons également un paragraphe, nous avons donc mis sa« couleur fond »sur« Pink."Ensuite, la propriété" Color "modifie la couleur de la police en" noir "et la valeur" 15px "pour régler la taille".«Nous voulons également rendre tout cela au centre de la page, donc pour cela, nous utilisons la propriété« Text-Align »et définissons le mot-clé« Centre », qui définit tous ces sélecteurs sur le« centre »et comme nous utilisons Pour appliquer ce «Text-Align» sur tous les sélecteurs, nous utilisons donc le «corps» et à l'intérieur de ce «corps», nous utilisons cette propriété.
Dans la sortie, vous pouvez voir que tous les en-têtes et paragraphes sont alignés au centre, et toutes les propriétés que nous définissons ci-dessus sont appliquées ici. Dans la sortie, vous pouvez facilement remarquer la différence dans le texte car nous utilisons différentes propriétés pour tous les sélecteurs.
Exemple n ° 3
Dans notre troisième et dernier exemple, nous allons créer trois titres, un paragraphe et aussi une liste qui est une liste non ordonnée, et nous ferons un style sur tous ces éléments.
Tout d'abord, nous allons appliquer le style à «H1». Nous mettons le nom du sélecteur «H1» et utilisons ici différentes propriétés ici. Nous définissons sa couleur de texte en utilisant «Color: Green», puis utilisons «Font-Family», qui est une propriété, et utilisons «algérien» pour cela. Vient ensuite la «couleur d'arrière-plan», que nous avons définie comme «jaune."En outre, alignez cette direction vers le" Centre "à l'aide de la propriété" Text-Align "et donnez un style" italique "à ce" H1 ".
Maintenant, nous allons changer le style de «H2» de la même manière que «H1». La «couleur» est définie ici comme «orange», et la «Font-Family» est «Arial» pour cela. Le «Color en arrière-plan» est «rose», et il est aligné «Centre». Nous avons également un paragraphe, alors maintenant nous allons utiliser ce «P» comme sélecteur; La propriété que nous utilisons pour cela est la propriété «taille de la police», et nous l'avons définie comme «15px», et la «font-famille» est «calibri», et le «poids de police» que nous utilisons est «audacieux."
Comme nous avons une liste dans cet exemple, nous utilisons ce sélecteur «UL» et appliquons des styles. Nous définissons sa «couleur», qui définit la couleur du texte en «violet», et la «taille de police» de cette liste est «20px» et «italique» dans «Style de police."
Dans la sortie, la couleur d'arrière-plan de la première tête est différente du deuxième titre, et la famille des polices est modifiée. Ensuite, la famille des polices, la couleur et le style des paragraphes et des listes sont également différents. Nous utilisons différentes propriétés pour tous les sélecteurs, alors voici la sortie, toutes ces propriétés sont appliquées.
Conclusion
Nous avons discuté de l'ensemble de règles dans CSS dans ce tutoriel. Nous avons écrit ce tutoriel pour expliquer ce qu'est le règlement et comment nous suivons cet ensemble de règles dans CSS pour appliquer différentes propriétés. Nous avons expliqué que nous devons d'abord utiliser le nom du sélecteur, puis ouvrir un support bouclé; Ensuite, après avoir ouvert ce support bouclé, nous plaçons le nom de la propriété que nous voulons utiliser, puis définissons sa valeur, ou nous utilisons également le mot-clé si disponible pour cette propriété. Nous avons discuté que nous devons suivre cette règle dans CSS. Après avoir appris ce concept à partir de ce tutoriel, vous utiliserez une propriété dans votre code CSS.