Sélecteur de base du tutoriel de base CSS
Sélecteur CSS
1. >
(1) Sélecteur "*" : Caractère génériqueDescription
?: correspondra à toutes les balises HTML , toutes les balises changeront.
Syntaxe?: *{ color:red; }
Remarque?: utilisez "*" aussi peu que possible, car IE6 ne le prend pas en charge.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>習(xí)近平心中的互聯(lián)網(wǎng)</h1> <p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p> </body> </html>
(2) Sélecteur de balises
Description : Correspondra à la balise HTML spécifiée.
?: h1{ color:red; }
Remarque?: Le sélecteur de balise CSS a le même nom que la balise HTML, mais les crochets angulaires ne peuvent pas être ajouté.<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>
(3) sélecteur de classe (sélecteur de classe) - le sélecteur de classe est le plus fréquemment utilisé
Description?: Ajoutez des styles à un type de balises HTML. La ? classe unique ? mentionnée ici est la suivante?: chaque balise HTML a un attribut de classe et la valeur de la classe est la même. L'attribut class est un attribut public que possède chaque balise HTML.
Le nom du sélecteur de classe doit commencer par "." et être limité à la valeur de l'attribut class de la balise HTML. Par exemple?: .box{ color:red; }
Remarque?: La valeur de l'attribut class de la balise HTML ne peut pas commencer par un nombre.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 class="NO1">習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p class="NO1">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>(4) sélecteur d'identifiant
Description?: Ajoutez du style à l'élément avec l'identifiant spécifié.
?:
La valeur de l'attribut id de la balise HTML dans la page Web doit être unique.
- Chaque balise HTML a un attribut public id.
- L'attribut id est généralement utilisé pour JS, pas pour que vous ajoutiez des styles. L'attribut class ne peut être utilisé que pour CSS, pas pour JS.
- Le nom du sélecteur d'identifiant doit commencer par "#", suivi de la valeur de l'attribut id de la balise HTML.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> #NO1{ color:blue; background-color:#88ff99; } .NO1{ color:red; background-color:#88ff66; } </style> </head> <body> <h1 id="NO1">習(xí)近平心中的互聯(lián)網(wǎng)</h1> <p class="NO1">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們?cè)诓恢挥X(jué)中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p> </body> </html>
