Sélecteur de base du tutoriel de base CSS

Sélecteur CSS

1. >

(1) Sélecteur "*" : Caractère générique

Description
: 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>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(2) Sélecteur de balises

Description : Correspondra à la balise HTML spécifiée.

Syntaxe

: 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>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</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">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(4) sélecteur d'identifiant

Description : Ajoutez du style à l'élément avec l'identifiant spécifié.

Remarque

La valeur de l'attribut id de la balise HTML dans la page Web doit être unique.

<!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">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

Formation continue

nouveau fichier

<!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>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Sélecteur de base du tutoriel de base CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]