Introduction
html :
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titre</title>
<!--Priorité : principe de proximité, celui qui est le plus proche de l'élément a la priorité-->
<!--Convention : écrire le code CSS dans la balise style-->
<!--Sélecteur{
Déclaration1 ;
Déclaration2 ;
...
}-->
<!--Style interne-->
<style>h1{
color: aqua;
}</style>
<!-- Inclure CSS : link-->
<link rel="stylesheet" href="Css01/style.css">
</head>
<body>
<!--Style inline-->
<h1 style="color: red">Œufs de poule</h1>
</body>
</html>
CSS :
h1{
color: aqua;
}
<!--Style externe - méthode link-->
<link rel="stylesheet" href="Css01/style.css">
<!--Méthode @import-->
<style>
@import url(Css01/style.css);
</style>
La méthode @import n'est généralement pas utilisée en raison de ses limites.
Sélecteurs
Cibler un ou plusieurs éléments sur une page
Sélecteurs de base
- Sélecteur d'élément
- Sélecteur de classe
- Sélecteur d'identifiant
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sélecteur d'élément</title>
<!--Sélecteur d'élément : cible tous les éléments du même type -->
<style>
h1{
color: #19c677;
}
p{
font-size: 60px;
}
</style>
</head>
<body>
<h1>Acheter des œufs</h1>
<h1>Acheter des œufs</h1>
<p>Acheter des œufs chez Zhang</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sélecteur de classe</title>
<style>
/*Format du sélecteur de classe : .nomDeClasse{}* Avantage : réutilisation*/
.lll{
color: red;
}
.ttt{
color: #19c677;
}
</style>
</head>
<body>
<h1 class="zzz">1</h1>
<h1 class="ttt">2</h1>
<h1 class="lll">3</h1>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sélecteur d'identifiant</title>
<!--
Le sélecteur d'identifiant ne peut pas être réutilisé, il doit être unique globalement
-->
<style>
#aaa{
color: red;
}
#bbb{
color: #19c677;
}
</style>
</head>
<body>
<h1 id="aaa">1</h1>
<h1 id="bbb">2</h1>
<h1>3</h1>
</body>
</html>
Priorité : id > classe > élément
Sélecteurs hiérarchiques
- Sélecteur descendant : cible les éléments descendants
body p{
background: #303f37;
}
- Sélecteur enfant : cible uniquement les enfants directs
body>p{
background: red;
}
- Sélecteur frère adjacent : cible uniquement le frère immédiatement suivant
.active+p{
background: aqua;
}
- Sélecteur général : cible tous les frères siuvants au même niveau
.active~p{
background: blue;
}
Exemple :
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
- p4
- p5
- p6
<p>p7</p>
<p>p8</p>
</body>
<style>
/*p{*/
/* background: #19c677;*/
/*}*/
/* Sélecteur descendant */
/* body p{*/
/* background: #303f37;*/
/* }*/
/* Sélecteur enfant*/
/* body>p{*/
/* background: red;*/
/* }*/
/*Sélecteur frère adjacent*/
/* .active+p{*/
/* background: aqua;*/
/*}*/
/*Sélecteur général*/
.active~p{
background: blue;
}
</style>