Maison >interface Web >tutoriel CSS >À quoi servent les ensembles de règles CSS ?
À quoi servent les ensembles de règles CSS ?
- PHPzavant
- 2023-09-09 16:01:021253parcourir
CSS signifie Feuilles de Style en Cascade. Il est utilisé pour styliser les éléments HTML. HTML est utilisé pour créer ou ajouter du contenu aux pages Web. Après cela, les développeurs utilisent CSS pour restituer le contenu HTML dans un style spécifique afin de lui donner une belle apparence.
L'ensemble de règles CSS contient principalement deux parties. L'un est un sélecteur CSS et l'autre est un bloc de déclaration.
Les sélecteurs CSS sont utilisés pour sélectionner des éléments HTML, les blocs de déclaration contiennent des propriétés CSS au format clé-valeur à appliquer aux éléments HTML.
Grammaire
Les utilisateurs peuvent utiliser le jeu de règles CSS pour styliser les éléments HTML selon la syntaxe suivante.
selector {
/* declaration block */
}
Dans la syntaxe ci-dessus, « sélecteur » peut être le nom de classe, l'identifiant, etc. de l'élément HTML, qui est utilisé pour sélectionner les éléments HTML. Un bloc de déclaration contient plusieurs propriétés CSS et leurs valeurs à appliquer aux éléments HTML.
Exemple 1 (sélecteur de nom de classe CSS)
Dans l'exemple ci-dessous, nous utilisons le nom de la classe comme sélecteur CSS lors de la définition de l'ensemble de règles CSS. Le code ci-dessous comporte trois éléments div avec des noms de classe différents. Nous avons sélectionné chaque élément div par son nom de classe et appliqué un style CSS différent, que l'utilisateur peut observer dans la sortie.
<html>
<head>
<style>
.one {
background-color: red;
color: white;
padding: 10px;
margin: 10px;
border: 1px solid green;
}
.two {
background-color: green;
color: white;
padding: 10px;
margin: 10px;
border: 3px solid yellow;
}
.three {
background-color: blue;
color: white;
padding: 10px;
margin: 10px;
border: 2px solid pink;
}
</style>
</head>
<body>
<h2> Using the <i> class selector </i> in CSS ruleset </h2>
<div class = "one"> One </div>
<div class = "two"> Two </div>
<div class = "three"> Three </div>
</body>
</html>
Exemple 2 (sélecteur d'ID CSS)
Dans l'exemple ci-dessous, nous utilisons l'identifiant de l'élément HTML comme sélecteur CSS lors de la définition de l'ensemble de règles CSS. En HTML, deux éléments ne peuvent jamais contenir le même identifiant.
Ici, nous avons un élément div avec l'identifiant "card" qui contient deux autres éléments div avec l'identifiant égal à "content1" et "content2". Nous stylisons tous les éléments HTML en y accédant par leur ID, que l'utilisateur peut observer dans la sortie.
<html>
<head>
<style>
#card {
width: 140px;
height: 300px;
background-color: grey;
border-radius: 12px;
border: 2px solid red;
display: flex;
justify-content: space-between;
flex-direction: column;
}
#content1 {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 12px;
color: white;
border: 2px solid red;
margin: 20px;
}
#content2 {
width: 100px;
height: 100px;
color: white;
background-color: blue;
border-radius: 12px;
border: 2px solid red;
margin: 20px;
}
</style>
</head>
<body>
<h2> Using the <i> id selector </i> in CSS ruleset </h2>
<div id = "card">
<div id = "content1"> HTML </div>
<div id = "content2"> CSS </div>
</div>
</body>
</html>
Exemple 3 (sélecteur multiple CSS)
Dans l'exemple ci-dessous, nous utilisons plusieurs sélecteurs CSS pour appliquer le même style CSS à plusieurs éléments HTML à la fois.
Nous avons trois éléments
avec des noms de classe et des identifiants différents. En CSS, nous utilisons le sélecteur CSS « .text1, .text2, #para1 » pour appliquer les mêmes styles ajoutés dans le bloc de déclaration à tous les éléments HTML.
De plus, nous avons sélectionné les trois éléments HTML individuellement à l'aide des sélecteurs CSS de nom de classe et d'ID pour appliquer différents styles sur différents éléments.
<html>
<head>
<style>
.text1,
.text2,
#para1 {
margin: 10px;
height: auto;
padding: 10px;
width: 200px;
}
.text1 {
background-color: red;
color: white;
font-size: 2rem;
}
.text2 {
background-color: green;
color: red;
font-size: 1.7rem;
}
#para1 {
background-color: blue;
color: white;
font-size: 1rem;
}
</style>
</head>
<body>
<h2> Using the <i> Multiple selector </i> in CSS ruleset </h2>
<p class = "text1"> This is the first paragraph </p>
<p class = "text2"> This is a second paragraph. </p>
<p id = "para1"> This is the third paragraph. </p>
</body>
</html>
Exemple 4 (sélecteur d'éléments imbriqués CSS)
Dans l'exemple ci-dessous, nous introduisons les sélecteurs imbriqués de CSS. En HTML, un élément div contient plusieurs éléments avec le nom de classe « lien ».
En CSS, nous avons utilisé le sélecteur CSS « div .link », qui sélectionne tous les éléments HTML portant le nom de classe « link » et les descendants de l'élément div. Si nous utilisons "div.link" comme sélecteur CSS, il appliquera le style à tous les éléments div portant le nom de classe "link". Par conséquent, "div.link" et "div .link" sont tous deux des sélecteurs CSS différents.
Dans le résultat, l'utilisateur peut observer que les styles CSS sont appliqués à tous les éléments HTML qui sont des descendants de l'élément div, mais pas aux éléments extérieurs à l'élément div.
<html>
<head>
<style>
div .link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h2> Using the <i> nested selectors </i> in CSS ruleset </h2>
<div>
<a href = "#" class = "link"> Link1 </a>
<a href = "#" class = "link"> Link2 </a>
<a href = "#" class = "link"> Link3 </a>
</div><br>
<a href = "#" class = "link"> Link 5 </a>
</body>
</html>
Exemple 5 (pseudo-sélecteur CSS)
Dans cet exemple, nous démontrons l'utilisation de pseudo-sélecteurs CSS. Il existe de nombreux types de pseudo-sélecteurs CSS, et nous en utilisons certains ici.
Ici, nous avons un élément div « conteneur » qui contient 4 éléments enfants avec le nom de classe « élément ». Nous utilisons le pseudo-sélecteur ":hover" pour changer la couleur d'arrière-plan de l'élément div "conteneur" lorsque l'utilisateur survole l'élément div.
Après cela, nous utilisons les sélecteurs CSS ':first-child', ':last-child' et ':nth-child()' et le sélecteur '.element' pour sélectionner le premier élément enfant, le dernier élément enfant, et le nième enfant, respectivement.
Dans le résultat, l'utilisateur peut observer que différents styles CSS sont appliqués au premier enfant, au dernier enfant et au deuxième enfant.
<html>
<head>
<style>
.container {
height: 100px;
width: 500px;
background-color: blue;
padding: 10px;
display: flex;
justify-content: space-around;
border-radius: 12px;
font-size: 1.2rem;
}
/* hover pseudo class */
.container:hover {
background-color: red;
}
/* first child pseudo class */
.element:first-child {
background-color: green;
color: white;
}
/* last child pseudo class */
.element:last-child {
background-color: grey;
color: black;
}
/* nth child pseudo class */
.element:nth-child(2) {
background-color: pink;
color: green;
}
</style>
</head>
<body>
<h2> Using the <i> pseudo selectors </i> in CSS ruleset </h2>
<div class = "container">
<div class = "element"> First Child </div>
<div class = "element"> Second Child </div>
<div class = "element"> Third Child </div>
<div class = "element"> Fourth Child </div>
</div>
</body>
</html>
Les utilisateurs ont appris à utiliser différents ensembles de règles CSS dans ce didacticiel. Nous utilisons le nom et l'identifiant de la classe comme sélecteur. De plus, nous avons appris à utiliser plusieurs sélecteurs CSS et des sélecteurs CSS imbriqués. Dans l'exemple précédent, nous avons appris à utiliser des pseudo-sélecteurs à partir d'un ensemble de règles CSS.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!