Syntaxe de base CSS

[Introduction] Syntaxe CSS Les règles CSS se composent de deux parties principales : le sélecteur et une ou plusieurs déclarations. selector {declaration1; déclaration2; déclarationN } Le sélecteur est généralement l'élément HTML dont vous devez modifier le style. Chaque déclaration est constituée d'un attribut et d'une

syntaxe CSS

Les règles CSS se composent de deux parties principales : le sélecteur, et une ou plusieurs déclarations.

selector {declaration1; declaration2; ... declarationN }

Le sélecteur est généralement l'élément HTML dont vous devez modifier le style.

Chaque déclaration est constituée d'un attribut et d'une valeur. La propriété

est l'attribut de style que vous souhaitez définir. Chaque attribut a une valeur. Les propriétés et les valeurs sont séparées par des deux-points.

selector {property: value}

La ligne de code suivante définit la couleur du texte dans l'élément h1 sur rouge et définit la taille de la police sur 14 pixels.

Dans cet exemple, h1 est le sélecteur, color et font-size sont des attributs, et red et 14px sont des valeurs.

h1 {color:red; font-size:14px;}

Le schéma ci-dessous vous montre la structure du code ci-dessus :

Conseil : Veuillez utiliser des accolades pour entourer la déclaration.

Différentes méthodes d'écriture et unités de valeurs

En plus du mot anglais red, on peut également utiliser la valeur de couleur hexadécimale #ff0000 :

p { color: #ff0000; }

Pour enregistrer des octets, nous pouvons utiliser l'abréviation de CSS :

p { color: #f00; }

Nous pouvons également utiliser les valeurs RVB de deux manières :

p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }

Notez que lors de l'utilisation de pourcentages RVB, le signe de pourcentage est écrit même lorsque la valeur est 0. Mais dans d’autres cas, cela n’est pas nécessaire. Par exemple, lorsque la taille est de 0 pixel, il n'est pas nécessaire d'utiliser des unités px après 0, car 0 vaut 0, quelle que soit l'unité.

N'oubliez pas d'écrire des guillemets

Conseil : Si la valeur est de plusieurs mots, vous devez ajouter des guillemets à la valeur :

p {font-family: "sans serif";}

Déclarations multiples :

Astuce : Si vous souhaitez définir plusieurs déclarations, vous devez séparer chaque déclaration par un point-virgule. L'exemple ci-dessous montre comment définir un paragraphe centré avec du texte rouge. La dernière règle est qu’il n’est pas nécessaire d’ajouter un point-virgule, car le point-virgule est un symbole de séparation en anglais et non un symbole de fermeture. Cependant, les concepteurs les plus expérimentés ajouteront un point-virgule à la fin de chaque déclaration. Cela présente l'avantage de minimiser les risques d'erreurs lorsque vous ajoutez ou soustrayez des déclarations à des règles existantes. Comme ceci :

p {text-align:center; color:red;}

Vous ne devez décrire qu'un seul attribut par ligne pour augmenter la lisibilité de la définition du style, comme ceci :

p {  text-align: center;  color: black;  font-family: arial;}

espaces et casse

La plupart des feuilles de style contiennent plus d'une règle, et la plupart des règles contiennent plus d'une déclaration. Les déclarations multiples et l'utilisation d'espaces facilitent la modification des feuilles de style :

body {  color: #000;  background: #fff;  margin: 0;  padding: 0;  font-family: Georgia, Palatino, serif;  }

Le fait que des espaces soient inclus ou non n'affecte pas le fonctionnement du CSS dans le navigateur. De même, contrairement à XHTML, CSS n'est pas sensible à la casse. Il existe une exception : lorsqu'il s'agit de travailler avec des documents HTML, les noms de classe et d'identifiant sont sensibles à la casse.

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!