Connaissance de base en production de pages Web (html) (3) html+css

1.1HTML CS

Sélecteur CSS

Différentes définitions de style ont des méthodes d'application différentes, et les noms de style correspondants sont également différents, donc le nom de style est un sélecteur et il devrait être facile de comprendre la différence Le style de l'application.

1.Sélecteur de classe :

Le nom est une chaîne de caractères commençant par un point ".". Ce type de style doit être utilisé via l'attribut de classe dans l'étiquette. Ce style doit être appliqué via l'attribut class dans la balise.

Exemple :

.wenzi{font-size:20px;}
<p class=”wenzi”>类选择器样式</p>

2. Sélecteur de balises :

Le nom est cohérent avec le nom de la balise html qui définit les styles dans la page, s'il y en a. aucune balise dans la balise Le style du sélecteur de classe est appliqué et le contenu de cette étiquette sera affiché en fonction du style du sélecteur d'étiquette. Ce style est automatiquement appliqué chaque fois qu'une balise du même nom est définie.

Exemple :

p{font-color:#6ec;}

La balise e388a4556c0f65e1904146cc1a846bee sur la page sera affichée dans la couleur #6ec.

Sélecteur d'ID : Le nom de

est une combinaison de "#" et d'une chaîne de caractères Ici "#" est le symbole du sélecteur d'ID Quand. une balise est Lorsque la valeur de l'attribut ID est cohérente avec le caractère après "#", ce style sera appliqué à cette balise. Ce style s'applique aux balises dont la valeur de l'attribut ID est la même que le caractère après #.

Exemple :

#idname{font-size:26px;}
<p id=”idname”>ID样式</p>

Il n'est pas recommandé que deux balises dans la même page de document aient la même valeur d'attribut ID, donc dans les documents Web conformes aux normes Web, le style ID correspond uniquement à une étiquette. S'il existe plusieurs balises qui utiliseront le même style que ce style, utilisez le sélecteur de classe au lieu du sélecteur d'ID pour définir le style.

3. Sélecteur de niveau :

(C'est ce qu'on appelle sélecteur dérivé dans le manuel, et le sélecteur de niveau est mon propre nom)

La balise correspondante car ce style sera automatiquement appliqué.

Voir les exemples ci-dessous pour les méthodes de dénomination.

Afin de faciliter la compréhension, l'imbrication des balises suivantes s'écrit sous la forme suivante :

<p>
<img />
<span>
a
<strong>
b
</strong>
c
</span>
</p>

Ces balises sont imbriquées ensemble, et les balises img et span sont intégrée dans la balise p. , et la balise strong est intégrée dans la balise span. La balise img, la balise span et la balise strong peuvent être appelées balises subordonnées de la balise p, ainsi que la balise img et span. La balise peut être appelée sous-balise de la balise p. La balise strong est une balise enfant de la balise span, et vice versa est la balise supérieure ou la balise parent. Notez que la balise forte n'est pas une sous-balise de p, mais une balise subordonnée de la balise p.

Regardons ensuite deux exemples pour illustrer ce sélecteur :

Exemple 1 :

<p><img><span>a<strong>b</strong>c</span></p>
p span{font-color:#038;}

Un tel sélecteur fait référence à la balise subordonnée intégrée dans la balise p Le style de la balise span.

p strong{font-color:#865;}

Un tel sélecteur fait référence au style de la balise subordonnée strong intégrée dans la balise p

p span strong { font-color: #921;}

Ceci fait référence au style de la balise subordonnée strong de la balise subordonnée span de la balise p.

Remarque : toute balise de niveau inférieur peut être définie de cette manière. Comme le montre cet exemple, s'il existe d'autres balises span dans le document qui ne sont pas des balises subordonnées à la balise p, ce style ne sera pas appliqué. Le même ci-dessous.

Exemple 2 :

<p class=”abc”><img><span>a<strong>b</strong>c</span></p>

peut également être défini comme ceci :

.abc span{font-color:#038;}
.abc strong{font-color:#865;}
.abc span strong{font-color:#921;}

Ceci fait référence au style de la balise subordonnée de la balise avec le style abc appliqué .

Exemple 3 :

#abc{}
<p id=”abc”><img><span>a<strong>b</strong>c</span></p>

Si le style d'identifiant est défini et qu'un identifiant de balise utilise cette valeur d'attribut, il peut également être défini comme ceci :

#abc span{font-color:#038;}
#abc strong{font-color:#865;}
#abc span strong{font-color:#921;}

Pseudo-class : Introduit uniquement plusieurs méthodes de définition de style des pseudo-attributs status des hyperliens.

Ce style est automatiquement appliqué à la balise a avant le pseudo attribut.

a:link{}Le style du lien hypertexte lorsqu'il n'est pas visité.

a:active{}Le style lorsque le bouton gauche de la souris est enfoncé mais n'est pas relâché sur le lien hypertexte.

a:hover{}Le style lorsque la souris passe sur le lien hypertexte.

a:visited{}Le style du lien hypertexte après sa visite.

* Sélecteur :

Le nom défini par ce style de sélecteur est juste un caractère générique "*", qui fait référence à toutes les balises. En d'autres termes, toutes les balises appliqueront automatiquement ce style.

*{}

Comment utiliser les styles

Lorsque le navigateur lit une feuille de style, il formatera le document en fonction de la feuille de style. Il existe trois façons d'insérer une feuille de style :

Feuille de style externe

Une feuille de style externe est idéale lorsque des styles doivent être appliqués à plusieurs pages. À l'aide de feuilles de style externes, vous pouvez modifier l'apparence de l'ensemble de votre site en modifiant un fichier.

9c4dfc8fcaaa8f19e19b22e6a2aa2812

<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>

Styles en ligne

Lorsque des styles spéciaux doivent être appliqués à des éléments individuels, vous pouvez utiliser des styles en ligne. La façon d'utiliser les styles en ligne consiste à utiliser l'attribut style dans la balise appropriée. Les propriétés de style peuvent contenir n'importe quelle propriété CSS. L'exemple suivant montre comment modifier la couleur et la marge gauche d'un paragraphe.

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

【Recommandations associées】

1. Tutoriel vidéo HTML en ligne gratuit

2 Manuel de développement HTML

3. Vidéo HTML5 originale php.cn. Tutoriel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!