Maison > interface Web > tutoriel CSS > Description du sélecteur CSS_Tutoriel de base

Description du sélecteur CSS_Tutoriel de base

WBOY
Libérer: 2016-05-16 12:08:11
original
1667 Les gens l'ont consulté

1. Tapez le sélecteur
body
{
font-size:12px;
}

{
color:blue
}
Pointez vers le Web ; page Le type de balise existant dans la balise est utilisé comme sélecteur de nom, comme indiqué ci-dessus : la taille de tout le texte dans la balise body est de 12 px, la couleur du texte dans le paragraphe est bleue.
2. Sélecteur de groupe
h4,p,span
{
font-size:12px;
}
Indique que tout le texte des balises h4, p, span sur le La page a une taille de 12 px, c'est-à-dire qu'elle spécifie le même style pour un groupe d'objets, séparés par des virgules entre chaque balise.
3. Contient le sélecteur
div p
{
font-weight:bold;
}
Cela signifie que le texte de la balise p à l'intérieur de la balise div est en gras. est une relation d'inclusion, chaque balise est séparée par un espace et peut être une inclusion à plusieurs niveaux.
IV. Sélecteurs d'identifiant et de classe
L'identifiant est une définition de style pour le seul élément de la page. Ce style n'est utilisé qu'une seule fois dans la page, c'est-à-dire que l'identifiant n'est pas répété

.
..

#myDiv
{
font-size:12px;
}
La classe définit un style commun ou fréquemment utilisé. sur une page. Plusieurs fois, vous pouvez spécifier la même classe pour différentes balises, comme indiqué ci-dessous : les polices dans les balises div et p sont toutes bleues


..


.red
{
color:blue;
}
5. Sélecteur de combinaison
Utilisez l'identifiant ou la classe, et utilisez également des balises pour combiner
h1 #cont
{
}
Représente la balise h1 avec l'identifiant cont
h1 .cont
{
}
Représente toutes les balises h1 avec la classe cont
6. Pseudo -class Le sélecteur
est couramment utilisé comme balise
a:link
{
}
a:hover
{
}
a:visited
{
}
7. Sélecteurs de caractères génériques
*
{
color:blue
}
Indique que la police de tous les objets est bleue.
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal