Comment utiliser les CSS

CSS, le nom complet de Cascading Style Sheets, est un langage utilisé pour concevoir des styles de pages Web. CSS peut séparer le contenu et le style de présentation dans les documents HTML, rendant la page plus belle et plus conforme aux exigences du concepteur. Cet article présentera les concepts de base, la syntaxe et les applications pratiques de CSS pour aider les débutants à démarrer.

1. Concepts de base de CSS

CSS se compose de sélecteurs et de déclarations. Les sélecteurs sont utilisés pour spécifier les éléments HTML auxquels les styles doivent être appliqués, tandis que les déclarations définissent les styles à appliquer. Voici quelques concepts de base importants :

1. Sélecteurs

Un sélecteur est un code qui indique quel élément HTML sera stylé. Les sélecteurs peuvent être des sélecteurs de balises, des sélecteurs de classe, des sélecteurs d'ID, etc., qui sont présentés ci-dessous.

(1) Sélecteur de balises

Le sélecteur de balises est le sélecteur le plus couramment utilisé, qui fait correspondre les éléments par leurs noms de balises dans les documents HTML. Par exemple, le code suivant définira la couleur du texte de tous les éléments

sur rouge :

h1 {
    color: red;
}

(2) Sélecteur de classe

Le sélecteur de classe utilise plus le nom de la classe pour correspondre. Par exemple, le code suivant centrera le texte d'un élément avec la classe "text-center":

.text-center {
    text-align: center;
}

(3) Sélecteur d'ID

Le sélecteur d'ID utilise # plus le nom de l'ID pour correspondre. Chaque élément d'un document HTML ne peut avoir qu'un seul ID, il ne peut donc y avoir qu'un seul élément correspondant au sélecteur d'ID. Par exemple, le code suivant définira la couleur d'arrière-plan de l'élément avec l'identifiant "main" sur blanc :

#main {
    background-color: white;
}

2. Déclaration

Une déclaration fait référence à la description de style appliquée à l'élément HTML correspondant. Une déclaration se compose d'attributs et de valeurs. Par exemple, le code suivant définira la couleur du texte de tous les éléments

sur rouge :

h1 {
    color: red;
}

Ici, la couleur est le nom de l'attribut et le rouge est sa valeur d'attribut. Chaque instruction doit être écrite entre accolades et terminée par un point-virgule.

2. Syntaxe CSS

La syntaxe du CSS est très simple, tout comme les paires clé-valeur. Chaque règle CSS est constituée d'un sélecteur et d'un bloc de déclaration entouré d'accolades, comme indiqué ci-dessous :

选择器 { 属性: 值; 属性: 值; }

Dans cette règle, le sélecteur fait référence à l'élément HTML auquel les styles CSS sont appliqués, tandis que les attributs et valeurs sont CSS Une description du style lui-même. Pour une lecture plus facile, les règles multilignes utilisent souvent l'indentation et les sauts de ligne pour organiser le code.

Voici quelques codes CSS pour appliquer un arrière-plan dégradé :

body {
    background: linear-gradient(to right, #00bfff, #007fff);
}

Cette règle dit d'appliquer un arrière-plan dégradé à l'élément corps du document. Le style apparaîtra dans un dégradé de gauche à droite, de #00bfff (bleu clair) à #007fff (bleu foncé).

3. Application de CSS

Dans les documents HTML, les styles CSS peuvent être appliqués directement à l'aide de styles en ligne ou à l'aide de feuilles de style externes.

1. Style en ligne

Les attributs de style en ligne sont directement intégrés dans les balises HTML sous la forme de styles en ligne. Par exemple, le code suivant définira la couleur du texte de l'élément sur rouge :

<span style="color: red;">Hello, CSS!</span>

Cependant, les styles en ligne ne s'appliquent qu'à l'élément HTML spécifié et ne peuvent pas être hérités par d'autres éléments. Par conséquent, cela rend inévitablement le code HTML plus complexe.

2. Feuille de style externe

Afin d'éviter d'utiliser des styles en ligne pour créer de la confusion dans le code HTML, nous pouvons utiliser des feuilles de style externes. Les feuilles de style externes sont enregistrées séparément des documents HTML sous forme de fichiers .css, ce qui rend la maintenance des pages plus pratique. Voici un exemple simple de feuille de style externe :

/* 在style.css文件中定义以下规则 */

h1 {
    color: red;
}

.text-center {
    text-align: center;
}

#main {
    background-color: white;
}

Dans cet exemple, trois règles sont définies dans le fichier CSS, correspondant à

en HTML, la classe est "text-center" et l'id est "main". éléments. Pour utiliser ce fichier CSS, nous devons ajouter la balise suivante au fichier HTML :

<!-- 在HTML中引用style.css文件 -->
<link rel="stylesheet" type="text/css" href="style.css">

De cette façon, le document HTML appliquera automatiquement les styles définis dans les règles.

4. Résumé

CSS est un langage de conception très important, qui rend les pages Web plus belles, plus faciles à lire et à entretenir. Comprendre les concepts de base, la syntaxe et l'application pratique du CSS est une base nécessaire pour la conception Web. J'espère que cet article pourra vous aider à mieux maîtriser l'utilisation du CSS.

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!