Introduction au CSS
Qu'est-ce que CSS ?
CSS (Cascading Stylesheets, feuilles de style en cascade) est une nouvelle technologie permettant de créer des pages Web, et est désormais disponible pour la plupart des navigateurs. Pris en charge, il est devenu l’un des outils indispensables à la conception web. L'utilisation de CSS peut simplifier le code de format des pages Web, accélérer la vitesse de téléchargement et d'affichage, réduire la quantité de code à télécharger et réduire considérablement la charge de travail des travaux répétés. Surtout lorsque vous êtes face à un site contenant des centaines de pages Web, CSS est comme un cadeau de Dieu pour nous !
Le W3C (The World Wide Web Consortium) divise le HTML dynamique (Dynamic HTML) en trois parties à mettre en œuvre : le langage de script (y compris javascript, Vbscript, etc.), les navigateurs prenant en charge les effets dynamiques (y compris Internet Explorer, Netscape Navigateur, etc.) et feuilles de style CSS.
Ordre en cascade
Lorsque le même élément HTML est défini par plusieurs styles, quel style sera utilisé ?
De manière générale, tous les styles seront cascadés dans une nouvelle feuille de style virtuelle selon les règles suivantes, le numéro 4 ayant la plus haute priorité.
1. Paramètres par défaut du navigateur
2. Feuille de style externe
3. Feuille de style interne (située à l'intérieur de la balise <head>)
4. . Styles en ligne (à l'intérieur des éléments HTML)
Syntaxe 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.
Commentaires CSS
Les commentaires sont utilisés pour expliquer votre code, et vous pouvez le modifier à volonté, le navigateur l'ignorera.
Les commentaires CSS commencent par "/*" et se terminent par "*/". Les exemples sont les suivants :
/*Ceci est un commentaire*/
p
{
text-align:center;
/*Ceci est un autre commentaire*/
color:black;
font-family:arial;
}
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body {background-color:yellow;}
p{color:red;text-align:center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>这是一个CSS测试实例</p>
</body>
</html>
