CSS : est l'abréviation de Cascading Style Sheet, traduit par [Cascading Style Sheet], qui est un ensemble de règles de formatage. Est un langage de balisage utilisé pour le contrôle (amélioré) du style des pages Web et permettant la séparation des informations de style du contenu Web.
Composition du CSS : La définition du CSS est composée de trois parties : le sélecteur (Selector), les propriétés (propriétés) et la valeur de la propriété (valeur). Syntaxe : sélecteur{proprety:value} (sélecteur{property:property value})
Choses à noter :
1. Le bloc de déclaration CSS est composé de : sélecteur + "{" + un ou plusieurs attributs CSS + "}".
2. CSS n'est pas sensible à la casse et les minuscules sont recommandées dans la syntaxe CSS.
1. Sélecteurs CSS
C'est le nom d'un style CSS Lorsqu'un style CSS est affiché dans un document HTML, un CSS est utilisé. Comment l'utiliser ? A ce moment, le sélecteur CSS (nom CSS) est utilisé pour préciser que cette balise HTML utilise ce style CSS.
2. Syntaxe du sélecteur
Un sélecteur CSS définit un style.
nom du sélecteur {déclaration;}
Par exemple:
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P, dreamdublue et dreamdured sont tous des sélecteurs.
3. Règles de dénomination des sélecteurs
Les sélecteurs CSS peuvent utiliser des lettres anglaises majuscules et minuscules, des chiffres, des traits d'union, des soulignements, des deux-points et des points.
(1) Lettres anglaises majuscules et minuscules AZ az
(2) Numéros 0-9
(3) Trait d'union -
(4) Souligner_
(5) Côlon :
(6) Période.
Remarque : les sélecteurs CSS ne peuvent commencer que par des lettres.
4. Classement des sélecteurs
Les sélecteurs CSS peuvent être divisés en plusieurs catégories, telles que : sélecteur de type, sélecteur d'identifiant, sélecteur de classe, sélecteur universel, sélecteur de groupe, sélecteur d'inclusion, sélecteur spécifique d'élément, sélecteur de sous-objet, sélecteur d'attribut, sélecteur associé. Les sélecteurs de voisin, etc. seront présentés et analysés un par un ci-dessous.
1. Sélecteur de type : le sélecteur de type est l'élément de page Web lui-même et le nom de l'élément est utilisé directement lors de la définition.
Body{/*Définir les attributs de la page*/}Div{Width:774px;/*Définir tous les éléments div pour avoir une largeur de 774 pixels*/}2. sélecteur d'identifiant : il est unique. Les valeurs d'identifiant des différents éléments ne peuvent pas être répétées. Le sélecteur d'identifiant définit différents styles pour les objets spécifiques de chaque élément, ce qui permet aux utilisateurs de contrôler la page plus précisément. Lorsque vous utilisez le sélecteur id, vous devez d'abord définir un attribut id pour chaque élément.
<divid="top"></div>Lorsque vous utilisez le sélecteur d'identifiant, vous devez utiliser # pour l'identification : #top{Width:774px;/*Définissez tous les éléments div pour avoir une largeur de 774 pixels*/}3. Sélecteur de classe : le même nom de classe peut être défini pour différents types d'éléments dans un document. La classe peut unifier les éléments du même style en une seule catégorie. Lorsque vous utilisez le sélecteur de classe, vous devez d'abord définir un attribut de classe pour chaque élément. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>Lorsque vous utilisez le sélecteur de classe, vous devez utiliser l'anglais (point) pour l'identification. : . rouge{Couleur:rouge;}4. Sélecteur universel : Il s'agit d'un sélecteur spécial, représenté par *, qui est un sélecteur utilisé mais facile à ignorer.
*{font-size:12pt;/*Définissez la taille de toutes les polices du document sur 12pt*/}5. Sélecteur de groupe : le sélecteur de groupe n'est pas un type de sélecteur, mais une méthode de sélection. Lorsque plusieurs objets définissent le même style, nous pouvons les regrouper en un groupe. Cela peut simplifier la lecture et l'écriture de code, tel que :
.class1{font-size:13px;color:red;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}Peut être regroupé en :
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}Il existe deux principes d'utilisation du regroupement : 1. Principe d'aspect ; 2. Principe de proximité (si plusieurs éléments sont adjacents, vous pouvez envisager d'utiliser des sélecteurs de regroupement au sein d'un module)
6. Contient des sélecteurs : le type de sélecteurs le plus utile, qui peut simplifier le code et obtenir une large gamme de contrôles de style. Par exemple:
.div1h2{/*Définissez le style de titre de tous les h2 dans le calque de classe div1*/font-size:18px;}.div1p{/*Définissez le style de titre de tous les p dans le calque de classe div1*/font-size:12px ;}7. Sélecteurs spécifiés par élément : Parfois, nous souhaitons contrôler le style d'un certain élément dans une certaine plage. Dans ce cas, nous pouvons utiliser des sélecteurs de classe ou d'identifiant en combinaison. Par exemple:
span.red{/*Définissez la couleur de l'élément avec la classe rouge dans l'élément span comme rouge*/color:red;}div#top{/*Définissez la largeur de l'élément avec l'identifiant comme haut dans l'élément div comme 100 %*/width:100% ;}par exemple :<div><h2><h2><p></p><span></span></div>Il n'est évidemment pas possible d'utiliser le sélecteur de news dans le code ci-dessus. Il n'est pas bon d'utiliser P directement. Le sélecteur de type h2 n'est pas non plus bon. Ensuite, vous pouvez utiliser l'élément pour spécifier le sélecteur.
p.news{} h2.news{} span.news{}
8. Sélecteurs de sous-objets : comme les sélecteurs d'éléments, ce sont des sélecteurs de restriction, c'est-à-dire que les styles d'éléments qui répondent aux conditions de restriction sont définis dans une certaine plage d'éléments. Le sélecteur spécifique à l'élément utilise les attributs class et id comme restrictions, tandis que les sous-objets sont définis. -sélecteurs d'objet Le sélecteur utilise l'identifiant et le sous-objet comme contraintes.
#main>table{/*Définissez le style de la table des sous-objets dans le module principal avec l'identifiant principal*/width:788px;font-size:12px;}#main>.title{/*Définissez le sous-objet dans le module principal avec id comme main La classe de l'objet est le style de title*/color:red;font-style:italic;}9. Sélecteur d'attribut : le sélecteur d'attribut consiste à ajouter une parenthèse après l'élément, et divers attributs ou expressions sont répertoriés entre parenthèses. Il existe 7 formes spécifiques de sélecteurs d'attributs :
(1) Correspondance des attributs d'existence : contrôlez le style de l'élément en faisant correspondre les attributs existants. Généralement, les attributs correspondants doivent être inclus entre parenthèses et seuls les noms doivent être répertoriés sans attribuer de valeurs :
h1[class]{color:red;/*S'applique à tout élément h1 avec un attribut class quelle que soit la valeur de class*/}img[alt]{border:none;/*S'applique à tout élément img avec un attribut alt quel que soit l'alt Quelle est la valeur*/}a[href][title]{font-weight:bold;/*fonctionne comme un élément avec les attributs href et title*/}(2) Correspondance précise des attributs : le style sera appliqué uniquement lorsque la valeur de l'attribut correspond complètement à la valeur de l'attribut spécifiée. Les sélecteurs d'identifiant et de classe sont en fait une sélection d'attribut précise.
a[href=www.163.com][title=NetEase]{font-size:12px;/*L'adresse de la fonction pointe vers www.163.com et l'invite de titre est un élément de NetEase*/}(3) Les espaces sont mis en correspondance individuellement : en définissant une liste de chaînes pour les attributs, vous pouvez contrôler le style de l'élément tant que vous correspondez à l'une des chaînes.
<spanclass=abc>Qui contrôle mon style</span> Vous pouvez utiliser les styles suivants pour contrôler : [class^=a]{color:red;} ou : [class^=b]{color:red;} ou : [class^=c]{color:red;} ou : span[class^=c]{color:red;}(4) Correspondance de traits d'union : la fonction et l'utilisation sont les mêmes que la correspondance d'espaces, mais la liste de chaînes dans la correspondance de traits d'union est séparée par des traits d'union.
<span>Qui contrôlera mes styles</span>
Cela peut être contrôlé à l’aide des styles suivants :
[class|=a]{color:red;} ou : [class|=a]{color:red;} ou : [class|=b]{color:red;} ou : [class|=c]{color :red;} ou : span[class|=c]{color:red;}(5) Sélecteur de préfixe : tant que le caractère de début de la valeur de l'attribut correspond à la chaîne spécifiée, le style peut être appliqué à l'élément. La correspondance de préfixe est implémentée à l'aide du formulaire [^=] :
<div>Correspondance de préfixe</div>
Vous pouvez utiliser les contrôles de style suivants
[class^=my]{color:red;}(6) Correspondance de suffixe : contrairement au préfixe, tant que le caractère de fin de l'attribut correspond au caractère spécifié, utilisez le contrôle de formulaire [$=].
<div>Correspondance des suffixes</div>
Vous pouvez utiliser les contrôles de style suivants
[class$=Test]{color:rouge;}(7) Correspondance de sous-chaîne : le style est appliqué tant que la chaîne spécifiée existe dans l'attribut et est contrôlé sous la forme [*=].
<div>Correspondance de sous-chaîne</div>
Vous pouvez utiliser les contrôles de style suivants
[classe*=est]{color:rouge;}10. Sélecteur adjacent : fait référence à l'élément suivant adjacent à l'élément.
div+p{font-size:24px;/*S'applique à tous les éléments p immédiatement après l'élément div, en définissant la taille de police de l'élément p comme 14px*/}par exemple :<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>Pour contrôler l'élément p inférieur séparément, sauf si vous définissez un attribut class et id pour celui-ci, vous pouvez le faire en utilisant des sélecteurs adjacents.
#sub_wrap+p{font-size:14px;}