Comment écrire du CSS

CSS est un langage de conception de style de page Web et une technologie utilisée pour contrôler le style des éléments de page Web. Grâce à CSS, vous pouvez contrôler le style et la disposition de divers éléments tels que le texte, les images, les arrière-plans et les bordures des pages Web. Cet article présentera en détail la syntaxe de base et les propriétés communes du CSS pour aider les concepteurs Web à mieux maîtriser l'utilisation du CSS.

1. Syntaxe de base de CSS

1. Syntaxe de commentaire de CSS

Les commentaires en CSS commencent par "/" et se terminent par "/". Rien dans la déclaration de commentaire ne sera analysé et affiché par le navigateur.

Exemple :

/*这是注释语句*/

2. Syntaxe du sélecteur CSS

En CSS, les sélecteurs sont utilisés pour spécifier les éléments auxquels les styles doivent être appliqués. Le sélecteur peut spécifier l'attribut, le type, l'ID, la catégorie, etc. de l'élément.

Les sélecteurs peuvent être divisés dans les types suivants :

(1) Sélecteur d'élément

Le sélecteur d'élément peut spécifier directement le nom de la balise dans la balise HTML.

Exemple de syntaxe :

p { color: red; }

(2) Sélecteur d'ID

Le sélecteur d'ID est spécifié avec le symbole "#".

Exemple de syntaxe :

#box { width: 200px; height: 200px; }

(3) Sélecteur de catégorie

Le sélecteur de catégorie est spécifié par le symbole "."

Exemple de syntaxe :

.box { background-color: #fff; }

(4) Sélecteur descendant

Le sélecteur descendant sépare deux sélecteurs par un espace pour sélectionner les éléments descendants dans une relation hiérarchique.

Exemple de syntaxe :

div p { color: red; }

(5) Sélecteur de pseudo-classe

Le sélecteur de pseudo-classe est utilisé pour sélectionner des éléments dans un certain état, tels que le survol de la souris, les liens visités, etc.

Exemple de syntaxe :

a:hover { color: red; }

(6) Sélecteur d'attribut

Le sélecteur d'attribut peut sélectionner des éléments en fonction de leurs attributs ou valeurs d'attribut.

Exemple de syntaxe :

input[type="text"] { border: 1px solid #ccc; }

(7) Sélecteur de combinaison

Un sélecteur de combinaison peut spécifier plusieurs conditions en même temps, séparées par des virgules.

Exemple de syntaxe :

h1, h2, h3 { color: #000; }

3. Propriétés couramment utilisées des propriétés CSS

Les propriétés CSS peuvent contrôler l'apparence, la mise en page, la taille, la couleur, la police, etc.

Les propriétés CSS suivantes sont couramment utilisées :

(1) font-size : taille de la police

Exemple de syntaxe :

body { font-size: 14px; }

(2) color : couleur de la police

Exemple de syntaxe :

h1 { color: #ff0000; }

(3) background : couleur de fond

Exemple de grammaire :

body { background-color: #f7f7f7; }

(4) width : width

Exemple de grammaire :

img { width: 100px; }

(5) hauteur : hauteur

Exemple de grammaire :

img { height: 100px; }

(6) border : border

Exemple de grammaire :

.box { border: 1px solid #ccc; }

(7) padding : marge intérieure

exemple de syntaxe :

.box { padding: 10px; }

(8) marge : marge extérieure

exemple de syntaxe :

.box { margin: 10px; }

(9) text-align : texte centré

exemple de syntaxe :

h1 { text-align: center; }

4 . Héritage CSS et priorité

L'héritage CSS signifie que les éléments enfants peuvent hériter des attributs de style des éléments parents. Par exemple, si vous définissez la taille de police de l'élément body sur 14 px, tous les éléments situés dans l'élément body hériteront de cet attribut de style.

La règle de priorité du CSS fait référence au style qui prendra effet lorsque plusieurs styles CSS sont appliqués au même élément en même temps. Les règles de priorité CSS sont jugées dans l'ordre suivant :

(1) Plus la valeur de l'attribut de style est spécifique, plus la priorité est élevée.

Par exemple, les sélecteurs d'ID ont priorité sur les sélecteurs de catégories, et les sélecteurs de catégories ont priorité sur les sélecteurs d'éléments. Si un élément est sélectionné par plusieurs sélecteurs en même temps, la règle de style avec le sélecteur le plus spécifique sera appliquée en premier.

(2) Plus l'attribut style apparaît tard, plus la priorité est élevée.

Par exemple, lorsqu'un élément définit plusieurs attributs de même style en même temps, les règles de style qui apparaîtront ultérieurement écraseront les règles précédentes.

(3) Le style défini par la règle !important a la plus haute priorité.

Dans ce cas, la valeur de l'attribut de style correspondant ne sera pas remplacée par d'autres règles de sélection.

2. Résumé

CSS est une technologie extrêmement importante dans la conception Web. Comprendre et maîtriser correctement la syntaxe et les propriétés communes du CSS peut grandement améliorer le niveau de conception Web. Cet article fournit une explication détaillée de la syntaxe de base et des propriétés communes de CSS, dans l'espoir d'aider les concepteurs Web à mieux appliquer la technologie 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!