Comment utiliser CSS

CSS est une technologie très importante dans la conception Web. Grâce à lui, nous pouvons modifier le style et la mise en page des pages Web pour les rendre plus belles et plus faciles à lire. Dans cet article, nous présenterons la syntaxe de base du CSS et certaines propriétés de style couramment utilisées pour aider les débutants à comprendre comment utiliser CSS.

1. Grammaire de base de CSS

Avant d'utiliser CSS, nous devons comprendre quelques règles de grammaire de base. La structure syntaxique du CSS se compose de trois parties : le sélecteur, l'attribut et la valeur, comme indiqué ci-dessous :

选择器 {
    属性1: 值1;
    属性2: 值2;
    属性3: 值3;
}

Parmi elles, le sélecteur est utilisé pour spécifier l'élément HTML à styliser, l'attribut est utilisé pour décrire les caractéristiques à modifier , et la valeur doit être modifiée. Chaque attribut et valeur sont séparés par deux points (:) et les attributs sont séparés par un point-virgule (;). Il n'est pas nécessaire d'ajouter un point-virgule à la fin du dernier attribut.

Par exemple, pour changer la couleur du texte de tous les paragraphes (p) en HTML en rouge, vous pouvez utiliser le style CSS suivant :

p {
    color: red;
}

2. Propriétés de style du CSS

En CSS, il y en a beaucoup qui peuvent être utilisées pour modifier le style visuel des propriétés d'une page Web. Voici quelques attributs de style couramment utilisés.

1. Attributs de police

• font-size : taille de la police, l'unité peut être des pixels (px), un pourcentage (%) ou des em, etc.
• font-family : nom de la police, qui peut être une police anglaise courante ou une police chinoise.

Par exemple :

p {
    font-size: 16px;
    font-family: "Microsoft Yahei", Arial, sans-serif;
}

2. Attribut de texte

• color : couleur de la police.
• text-align : alignement du texte, qui peut être à gauche, à droite, au centre ou justifié, etc.

Par exemple :

p {
    color: #333;
    text-align: center;
}

3. Attribut d'arrière-plan

• background-color : couleur d'arrière-plan.
• background-image : image d’arrière-plan.
• background-repeat : que l'image d'arrière-plan soit répétée, elle peut être répétée, répétée-x, répétée ou non-répétée, etc.
• background-position : position de l'image d'arrière-plan, qui peut être en haut à gauche, au centre, en bas à droite, etc.

Par exemple :

body {
    background-color: #fff;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

4. Attribut de bordure

• border-width : largeur de la bordure.
• border-style : style de bordure, qui peut être plein, en pointillés, en pointillés ou doubles, etc.
• border-color : couleur de la bordure.

Par exemple :

div {
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

5. Attribut du modèle de boîte

• width : largeur de l'élément.
• hauteur : hauteur de l'élément.
• rembourrage : Rembourrage.
• marge : marge extérieure.

Par exemple :

div {
    width: 200px;
    height: 150px;
    padding: 10px;
    margin: 20px;
}

3. Sélecteur CSS

Le sélecteur CSS est un modèle utilisé pour faire correspondre des éléments HTML et peut être utilisé pour définir des styles pour des éléments spécifiques. Vous trouverez ci-dessous quelques sélecteurs couramment utilisés.

1. Sélecteur d'élément

Le sélecteur d'élément peut correspondre à n'importe quel élément HTML, tel que p, div, h1, etc.

Par exemple :

p {
    color: #333;
}

2. Sélecteur de classe

Un sélecteur de classe commence par un point (.) et peut spécifier le même style pour plusieurs éléments en HTML.

Par exemple :

.highlight {
    background-color: yellow;
}

3. Sélecteur d'ID

Le sélecteur d'ID commence par un signe dièse (#) et est utilisé pour faire correspondre des éléments HTML uniques.

Par exemple :

#logo {
    width: 100px;
    height: 80px;
}

4. Sélecteurs descendants

Les sélecteurs descendants peuvent faire correspondre des éléments imbriqués dans d'autres éléments HTML, en utilisant des espaces ( ) pour séparer les différents sélecteurs.

Par exemple :

#nav li {
    display: inline-block;
}

5. Sélecteur de frères et sœurs adjacents

Le sélecteur de frères et sœurs adjacents peut correspondre à l'élément frère qui suit immédiatement l'élément spécifié précédent, représenté par le signe plus (+).

Par exemple :

h1 + p {
    font-size: 14px;
}

4. Héritage de style CSS

Les styles CSS peuvent être transmis à ses éléments enfants par héritage. Lorsqu'un élément parent définit un certain style, ses éléments enfants hériteront automatiquement de ce style, à moins que l'élément enfant ne définisse son propre style.

Exemple :

body {
    font-size: 16px;
    color: #333;
}

Dans cet exemple, tous les éléments HTML hériteront automatiquement de la taille et de la couleur de la police.

Conclusion

Grâce à l'introduction de cet article, les débutants peuvent utiliser CSS pour modifier le style et la mise en page des pages Web. Bien qu'il existe de nombreuses propriétés et sélecteurs CSS disponibles, comprendre sa syntaxe de base et ses propriétés de style communes est basique. Grâce à un apprentissage et à une pratique continus, vous deviendrez plus compétent dans l'utilisation de CSS et créerez des conceptions Web plus complexes.

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!