Style de mise en page CSS
Page 23 | Écouter en audio
Style de mise en page CSS
CSS est un langage de style utilisé pour définir l'apparence d'un document HTML. Avec lui, vous pouvez définir les couleurs, les polices, les tailles, l'espacement et d'autres éléments visuels qui composent une mise en page. Styliser les mises en page en CSS est une tâche essentielle pour créer un site Web ou une application Web agréable et professionnel.
Sélecteur CSS
Pour styliser un élément HTML avec CSS, il est nécessaire de le sélectionner à l'aide d'un sélecteur. Il existe plusieurs types de sélecteurs, tels que le sélecteur de balise, le sélecteur de classe, le sélecteur d'identifiant, le sélecteur d'attribut, entre autres.
Le sélecteur de balises est utilisé pour sélectionner tous les éléments d'un certain type, par exemple :
corps {
famille de polices : Arial, sans empattement ;
}
Le sélecteur de classe est utilisé pour sélectionner des éléments qui ont une classe spécifique, par exemple :
.highlight {
couleur de fond : jaune ;
}
Le sélecteur d'identifiant est utilisé pour sélectionner des éléments qui ont un identifiant spécifique, par exemple :
# en-tête {
bordure inférieure : 1 pixel noir uni ;
}
Propriétés CSS
Les propriétés CSS sont utilisées pour définir le style d'un élément sélectionné. Plusieurs propriétés sont disponibles, par exemple :
- background-color : définit la couleur d'arrière-plan de l'élément ;
- couleur : définit la couleur du texte de l'élément ;
- font-family : définit la famille de polices utilisée par l'élément ;
- font-size : définit la taille de la police utilisée par l'élément ;
- marge : définit les marges de l'élément ;
- remplissage : définit l'espacement intérieur de l'élément ;
- bordure : définit la bordure de l'élément ;
- width : définit la largeur de l'élément ;
- hauteur : définit la hauteur de l'élément ;
- display : définit comment l'élément doit être affiché (bloc, inline, inline-block, etc) ;
- float : définit comment l'élément doit être positionné par rapport aux autres éléments ;
- position : définit comment l'élément doit être positionné sur la page (statique, relatif, absolu, fixe) ;
- z-index : définit l'ordre d'empilement des éléments positionnés ;
- pacity : définit l'opacité de l'élément ;
- transition : définit la transition d'une propriété CSS ;
- animation : définit une animation CSS.
Cascade et spécificité
Lorsque plusieurs règles CSS sont appliquées à un même élément, il est nécessaire de déterminer laquelle doit prévaloir. Cela se fait par cascade et spécificité.
La cascade définit que les dernières règles CSS déclarées sont prioritaires sur les précédentes. Par exemple :
p {
La couleur rouge;
}
P {
Couleur bleue;
}
Dans ce cas, tous les paragraphes seront colorés en bleu, car la deuxième règle prévaut sur la première.
La spécificité définit que les règles CSS plus spécifiques prévalent sur les règles moins spécifiques. Par exemple :
p {
La couleur rouge;
}
# en-tête p {
Couleur bleue;
}
Dans ce cas, tous les paragraphes seront colorés en rouge, sauf ceux à l'intérieur de l'élément avec l'identifiant "header", qui seront colorés en bleu.
Conclusion
Le style des mises en page en CSS est une tâche fondamentale pour créer un site Web ou une application Web agréable et professionnel. En utilisant correctement les sélecteurs et les propriétés CSS, il est possible de définir les couleurs, les polices, les tailles, l'espacement et d'autres éléments visuels qui composent une mise en page. De plus, il est important de comprendre la cascade et la spécificité pour s'assurer que les règles CSS sont correctement appliquées aux éléments sélectionnés.
Répondez maintenant à l’exercice sur le contenu :
_Quelle est la propriété CSS utilisée pour définir la couleur de fond d'un élément ?
Tu as raison! Félicitations, passez maintenant à la page suivante
Vous avez raté! Essayer à nouveau.
Page suivante de lebook gratuit :
24Style réactif en CSS
1 minutes
Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !
