Tutoriel CSS (2) Syntaxe de base

1. Syntaxe de base

La définition du CSS est composée de trois parties : le sélecteur (sélecteur), les attributs (propriétés) et les valeurs d'attribut (valeur).
Le format de base est le suivant :
sélecteur {propriété : valeur}
(sélecteur {propriété : valeur})
Le sélecteur peut prendre de nombreuses formes, il s'agit généralement d'une balise HTML que vous souhaitez pour définir un style. Par exemple, BODY, P, TABLE..., vous pouvez définir ses attributs et valeurs via cette méthode. Les attributs et valeurs doivent être séparés par deux points :
body {color: black. >
Le corps du sélecteur fait référence à la partie principale de la page, la couleur est un attribut qui contrôle la couleur du texte et le noir est la valeur de couleur. L'effet de cet exemple est de rendre le texte de la page noir.

Si la valeur d'un attribut est composée de plusieurs mots, la valeur doit être entourée de guillemets. Par exemple, le nom d'une police est souvent une combinaison de plusieurs mots :
p {font-. family : "sans serif"}
(Définissez la police du paragraphe comme sans serif)

Si vous devez spécifier plusieurs attributs pour un sélecteur, nous utilisons des points-virgules pour séparer tous les attributs et valeurs :
p {text-align: center ; color: red}
(Les paragraphes sont disposés au centre ; et le texte du paragraphe est rouge)

Afin de rendre la feuille de style que vous définissez plus facile à lire, vous pouvez utiliser un format d'écriture de ligne distinct :
p
{
text-align: center;
color: black;
font-family: arial
}
(Le les paragraphes sont disposés au centre, le texte du paragraphe est noir et la police est arial)

2 Groupe de sélection

Vous pouvez combiner des sélecteurs avec les mêmes attributs et valeurs pour. écrivez et séparez les sélecteurs par des virgules, ce qui peut réduire les définitions répétées des styles :
h1, h2 , h3, h4, h5, h6 { color: green >
(Ce groupe comprend tous les éléments de titre et le texte de chaque élément du titre est vert)
p, table{ font-size: 9pt }
(La taille du texte dans les paragraphes et les tableaux est de taille 9)
L'effet est complètement équivalent à :
p { font-size: 9pt >
table { font-size: 9pt >

3. Sélecteur de classe

À l'aide du sélecteur de classe, vous pouvez classer les mêmes éléments et définir différents styles. en définissant le sélecteur de classe, ajoutez un point devant le nom de la classe personnalisée. Si vous souhaitez deux paragraphes différents, un aligné à droite et un centré, vous pouvez d'abord définir deux classes :
p.right {text-align: right>
p.center {text-align: center>
Utilisez-le ensuite dans différents paragraphes. Ajoutez simplement le paramètre de classe que vous avez défini dans la balise HTML :

Ce paragraphe est aligné à droite

Ce paragraphe est centré

Remarque : le nom de la classe peut être n'importe quel mot anglais ou une combinaison commençant par Anglais et chiffres, généralement nommés brièvement par leur fonction et leur effet. Une autre façon d'utiliser le sélecteur de classe

est d'omettre le nom de la balise HTML dans le sélecteur, afin que plusieurs éléments différents puissent être définis dans le même style :
.center {text-align: center}
(définissez le sélecteur de classe .center pour centrer le texte)
Une telle classe peut être appliquée à n'importe quel élément. Ensuite, nous classons à la fois l'élément h1 (titre 1) et l'élément p (paragraphe) dans la classe « center », ce qui fait que les styles des deux éléments suivent le sélecteur de classe « .center » :

Ce titre est disposé au centre

Ce paragraphe est également disposé au centre
Remarque : ce sélecteur de classe qui omet les balises HTML est notre méthode CSS la plus couramment utilisée. En utilisant cette méthode, nous pouvons facilement appliquer des styles de classe prédéfinis à n'importe quel élément.

4. Sélecteur d'ID

Dans la page HTML, le paramètre ID spécifie un seul élément, et le sélecteur d'ID est utilisé pour définir un style distinct pour cet élément unique.
L'application du sélecteur d'ID est similaire à celle du sélecteur de classe, remplacez simplement CLASS par ID. Remplacez la classe dans l'exemple ci-dessus par ID :

Alignez ce paragraphe à droite

Le sélecteur d'ID doit être défini avant le nom d'identification Ajoutez un signe "#". Comme pour le sélecteur de classe, il existe deux manières de définir les attributs du sélecteur d'ID. Dans l'exemple suivant, l'attribut ID correspondra à tous les éléments avec id="intro":
#intro
{
font-size:110%;
font-weight:bold;
color : #0000ff;
background-color:transparent
}
(la taille de la police est 110 % de la taille par défaut ; gras ; bleu ; la couleur d'arrière-plan est transparente)
Dans l'exemple suivant, l'ID l'attribut ne correspond qu'à l'élément de paragraphe id de ="intro":
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background- color:transparent
>
Remarque : le sélecteur d'ID est très limité. Il ne peut définir le style d'un certain élément qu'individuellement et n'est généralement utilisé que dans des circonstances particulières.

5. Le sélecteur d'inclusion

peut être utilisé pour définir une feuille de style pour une certaine relation d'inclusion d'élément. L'élément 1 contient l'élément 2. Cette méthode définit uniquement l'élément 2 dans l'élément 1. , non. définition pour l'élément individuel 1 ou l'élément 2, par exemple :
table a
{
font-size : 12px
>
Le lien dans le tableau change le style et la taille du texte est 12 pixels, tandis que le texte des liens en dehors du tableau reste à la taille par défaut.

6. La nature en cascade des feuilles de style

La cascade est un héritage. La règle d'héritage de la feuille de style est que le style de l'élément externe sera conservé et hérité par les autres éléments contenus dans cet élément. En fait, tous les éléments imbriqués dans un élément hériteront des valeurs d'attribut spécifiées par l'élément externe, empilant parfois plusieurs couches de styles imbriqués, sauf modification contraire. Par exemple, imbriquez les balises P dans les balises p :
p { color: red; font-size:9pt}
......

de ce paragraphe Le texte est en police rouge 9 points

(le contenu de l'élément P héritera des attributs définis par p)
Note : Dans certains cas, le sélecteur interne n'hérite pas des valeurs des sélecteurs environnants, mais en théorie celles-ci sont particulières. Par exemple, la valeur de l'attribut de limite supérieure n'est pas héritée. Intuitivement, un paragraphe n'aura pas la même valeur de limite supérieure que le BODY du document.

De plus, lorsque l'héritage des feuilles de style rencontre des conflits, le dernier style défini prévaudra toujours. Si la couleur de P est définie dans l'exemple ci-dessus :
p { color: red; font-size:9pt}
p {color: blue}
……

Le texte de ce paragraphe est en bleu, taille de police 9

Nous pouvons voir que la taille du texte dans le paragraphe est la taille de la police 9 qui est hérité de l'attribut p, et l'attribut color est basé sur la dernière définition.

Lorsque différents sélecteurs définissent le même élément, la priorité entre les différents sélecteurs doit être prise en considération. Sélecteur d'ID, sélecteur de classe et sélecteur de balise HTML Étant donné que le sélecteur d'ID est ajouté à l'élément en dernier, il a la priorité la plus élevée, suivi du sélecteur de classe. Si vous souhaitez transcender la relation entre ces trois éléments, vous pouvez utiliser !important pour augmenter la priorité de la feuille de style, par exemple :
p { color: #FF0000!important }
.blue { color: #0000FF >
#id1 { color: #FFFF00}
Nous ajoutons ces trois styles à un paragraphe de la page en même temps. Ce sera finalement du texte rouge selon le style du sélecteur de balise HTML déclaré par !important. Si !important est supprimé, le sélecteur d'ID avec la priorité la plus élevée sera un texte jaune.

7. Commentaires

Vous pouvez insérer des commentaires en CSS pour expliquer la signification de votre code. Les commentaires vous aideront, vous ou d'autres, à comprendre la signification du code lors de l'édition et du changement du code à l'avenir. . Dans le navigateur, les commentaires ne sont pas affichés. Les commentaires CSS commencent par "/*" et se terminent par "*/", comme suit :
/* Définir la feuille de style de paragraphe*/
p
{
text-align: center /* Center; la disposition du texte*/
couleur : noir ; /* Le texte est noir*/
font-family : arial /* La police est arial */

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!