1. Sélecteur de type Qu'est-ce qu'un sélecteur de type ? Fait référence au caractère de ligne qui prend comme nom le type de balise existant dans la page Web. Body est un type de balise dans une page Web, comprenant div, p et span.
Comme suit :
corps {}
div{}
p{}
portée {}
2. Sélecteur de groupe
Pour les objets XHMTL, le même style peut être attribué à un groupe en même temps.
Les sélecteurs sont séparés par des virgules. L'avantage d'écrire de cette manière est que le même style ne doit être écrit qu'une seule fois, ce qui réduit la quantité de code et améliore la structure du code CSS.
Lors de son utilisation, veuillez noter que « virgule » est en mode demi-largeur et non en mode chinois pleine largeur.
Comme suit :
h1,h2,h6,p,span
{
taille de police : 12 px ;
couleur : #FF0000 ;
famille de polices : arial ;
}
3. Contient des sélecteurs pour spécifier des styles pour les sous-objets d'un objet, afin que la méthode de sélection joue un rôle.
Il est à noter que ce paramètre de style n'est valable que pour les étiquettes de sous-objet de cet objet. Ce paramètre de style ne s'applique pas aux autres sous-objets qui existent seuls ou sont situés en dehors de cet objet.
L'avantage de ceci est que cela nous aide à éviter des paramètres d'identification et de classe excessifs et à définir directement les éléments requis.
Comme suit :
durée h2
{
couleur : rouge ;
}
comme suit:
corps h1 fort
{
poids de la police : gras ;
}
4. Le sélecteur d'identifiant est
un sélecteur qui apparaît sur le principe du modèle objet de document DOM Pour un fichier XHTML, chaque balise peut se voir attribuer un nom sous la forme d'un id="", mais il convient de noter que dans un fichier XHTML L'ID est unique et ne peut pas être répété.
Dans une page Web de mise en page CSS div, vous pouvez la nommer à différentes fins, comme en-tête pour la tête et pied de page pour le bas.
Le XHTML est le suivant :
#content
{
taille de police : 14 px ;
hauteur de ligne : 120 % ;
}
5. Sélecteur de classe
En fait, id est une extension des balises XHTML et class est une combinaison de plusieurs balises SHTML. La traduction littérale de class signifie classe ou catégorie.
Pour les balises XHTML, utilisez class="" pour l'attribution de nom. Contrairement aux identifiants, les classes peuvent être réutilisées. Plusieurs éléments ayant le même style peuvent être directement définis en tant que classe.
Les avantages de l'utilisation de la classe sont évidents : cela reflète la réutilisabilité du code CSS. De nombreuses balises peuvent être définies à l'aide d'un style sans écrire de code de style pour chacune.
Le XHTML est le suivant :
.he
{
marge : 10 px ;
couleur d'arrière-plan : rouge ;
}
6. Sélecteurs spécifiques aux balises
Si vous souhaitez utiliser id et class en même temps, et que vous souhaitez également utiliser des sélecteurs de balises en même temps, vous pouvez utiliser la méthode suivante :
h1#content {}
/*Représente toutes les balises h1 avec un identifiant comme contenu*/
h1.p1 {}
/*Indique toutes les balises h1 de classe p1*/
La précision du sélecteur spécifique à l'étiquette se situe entre le sélecteur d'étiquette et le sélecteur id/class, et c'est l'un des sélecteurs couramment utilisés.
7. Sélecteurs combinés
Pour tous les sélecteurs ci-dessus, utilisez-les en combinaison. Comme suit :
h1 .p1 {}
/*Indique toutes les balises de classe p1 sous h1*/
#contenu h1 {}
Représente toutes les balises h1 sous la balise avec le contenu id
h1 .p1,#contenu h1 {}
/*Représente toutes les balises h1 sous h1 avec la classe p1 et toutes les balises h1 sous la balise avec le contenu id*/
h1#contenu h2{}
/*balise h2 sous la balise h1 avec l'identifiant comme contenu*/
Les sélecteurs CSS sont très gratuits et flexibles. Vous pouvez utiliser différents sélecteurs en fonction des besoins de la page pour structurer et optimiser au maximum le fichier CSS.