Maison >interface Web >tutoriel CSS >Sélecteur de style CSS
Sélecteur de style CSS
- 高洛峰original
- 2017-02-14 15:04:321735parcourir
css est l'abréviation de l'anglais Cascading Style Sheets, appelée feuilles de style en cascade et utilisée pour embellir la page. Il existe trois modes d'existence :
élément en ligne, intégration de page et introduction externe. Comparez les avantages et les inconvénients des trois méthodes.
Syntaxe : style='key1:value;key2:value2;'
Utiliser style='xx:xxx;' dans les balises
Intégrer dans la page : < ;style type='text/css'> 531ac245ce3e4fe3d50054a55f265927Block
Présentation des fichiers CSS externes
Nécessité : L'artiste éditera la page Le développeur est responsable de la correspondance des couleurs et de l’embellissement des images, et doit savoir comment y parvenir.
Regardez comment utiliser les trois méthodes ci-dessus :
1. Utilisez c3aab84afb7bed6c51e6bd21ae7bcca2 ;Bloc
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/css"; charset="UTF-8">
<title>页面一</title>
<link rel="stylesheet" href="commom.css" />
</head>
<body>
<div style="background-color:red;">123</div>
</body>
</html>2. Intégrer c3aab84afb7bed6c51e6bd21ae7bcca2 531ac245ce3e4fe3d50054a55f265927Bloc
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/css"; charset="UTF-8">
<title>页面一</title>
<link rel="stylesheet" href="commom.css" />
<style>
.logo{
background-color:red;
}
</style>
</head>
<body>
<div class='logo'>123456</div>
<div class='logo'>aaa</div>
</body>
</html>dans la page Ajouter un c9ccee2e6ea535a969eb3f532ad9fe89 531ac245ce3e4fe3d50054a55f265927 bloc de code pour personnaliser un style, puis appelez
à plusieurs reprises dans le code suivant 3. Introduisez des fichiers CSS externes
S'il y a plusieurs fichiers HTML qui doivent référencer des styles CSS personnalisés, puis selon la deuxième méthode, vous devez définir un style dans chaque fichier HTML. Afin de résoudre ce problème, vous pouvez définir un fichier, écrire un style personnalisé, puis l'appeler. style du fichier.
style s'écrit :
<style>
.logo{
background-color:red;
}
#logo{
background-color:red;
}
a,div{
color:red;
}
a div{
color:red
}
input[type='text']{
color:blue
}
.logo a,.logo p{
font-size:56px;
}
</style>1. Lorsque le sélecteur de classe
.logo indique class='logo', référencez le style
.
2. Sélecteur d'ID
# Lorsque le logo indique id='logo', faites référence à ce style
3. Sélecteur de sélecteur
a, div signifie que toutes les balises a et div font référence à ce style
4. Sélecteur d'association
un div représente une relation hiérarchique, c'est-à-dire que toutes les balises div situées en dessous de la balise a appliquent ce style.
5. Sélecteur d'attribut
input[type='text'], balise d'attribut, indiquant que toutes les balises de type 'text' font référence à ce style.
6. .logo a, .logo p signifie quand class='logo', toutes les balises a suivantes et quand class='logo', toutes les balises a suivantes. balise p suivante, reportez-vous au style
Pour plus d'articles sur le sélecteur de style CSS, veuillez faire attention au site Web PHP chinois !