Syntaxe CSS
Les règles de syntaxe CSS se composent de deux parties principales : les sélecteurs et une ou plusieurs déclarations (groupes de déclarations). Le sélecteur est généralement l'élément HTML dont vous devez modifier le style. Chaque déclaration se compose d'une propriété et d'une valeur, où la propriété est l'attribut de style que vous souhaitez définir ; il y en a un pour chaque propriété, et la propriété et la valeur sont séparées par deux points. Les déclarations CSS se terminent toujours par un point-virgule (;) et les groupes de déclarations sont entourés d'accolades ({}).
Démonstration d'instance
Instance
<html>
<head>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>Exécuter l'instance»
Cliquez Bouton "Exécuter l'instance" pour afficher l'instance en ligne
Instance
<html>
<head>
<style>
body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
</style>
</head>
<body>
<h1>This is a header 1</h1>
<hr>
<p>You can see that the style
sheet formats the text</p>
<p><a href="http://www.w3cschool.cc"
target="_blank">This is a link</a></p>
</body>
</html>Exécuter l'instance»
Cliquez sur " Bouton Exécuter l'instance " " pour afficher des exemples en ligne
Exemples CSS
Les règles CSS se composent de deux parties principales : des sélecteurs et une ou plusieurs déclarations :
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.
Exemple CSS
Les déclarations CSS se terminent toujours par un point-virgule (;) et les groupes de déclarations sont placés entre accolades ({}) :
p {color:red;text-align:center; Pour rendre le CSS plus lisible, vous ne pouvez décrire qu'un seul attribut par ligne :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>Exécuter l'exemple»
Cliquez sur le bouton «Exécuter l'exemple» pour afficher l'exemple en ligne
Commentaires CSS
Les commentaires sont utilisés pour expliquer votre code, et n'hésitez pas à le modifier, le navigateur l'ignorera.
Les commentaires CSS commencent par "/*" et se terminent par "*/". Les exemples sont les suivants :
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
