1. Spécifications grammaticales de base
Analysez une instruction CSS typique :
p {COULEUR :#FF0000 ; FOND :#FFFFFF}
Parmi eux, « p » est appelé « sélecteurs », indiquant que nous voulons définir le style de « p » ;
Les déclarations de style sont écrites entre accolades "{}" ;
COULEUR et FOND sont appelés « propriétés » et les différentes propriétés sont séparées par des points-virgules « ; » ;
"#FF0000" et "#FFFFFF" sont les valeurs des attributs.
2. Valeur de couleur
Les valeurs de couleur peuvent être écrites en valeurs RVB, par exemple : color : rgb(255,0,0), ou en hexadécimal, comme dans l'exemple ci-dessus color:#FF0000. Si les valeurs hexadécimales sont répétées par paires, elles peuvent être abrégées avec le même effet. Par exemple : #FF0000 peut s’écrire #F00. Cependant, il ne peut pas être abrégé s'il ne se répète pas. Par exemple, #FC1A1B doit être rempli de six chiffres.
3. Définir la police
Les standards Web recommandent les méthodes de définition de police suivantes :
corps { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体, sans-serif }
Les polices sont sélectionnées dans l'ordre indiqué. Si l'ordinateur de l'utilisateur contient la police Lucida Grande, le document sera désigné Lucida Grande. Sinon, elle est désignée comme police Verdana, s'il n'y a pas de Verdana, elle est désignée comme police Lucida, et ainsi de suite ;
La police Lucida Grande convient à Mac OS X ;
La police Verdana convient à tous les systèmes Windows ;
Lucida convient aux utilisateurs UNIX
« Song Ti » convient aux utilisateurs chinois simplifiés ;
Si aucune des polices répertoriées n'est disponible, la police sans empattement par défaut est garantie d'être appelée ;
4.Sélecteur de groupe
Lorsque plusieurs éléments ont les mêmes attributs de style, une instruction peut être appelée ensemble et les éléments sont séparés par des virgules : p, td, li { font-size: 12px };
5. Dériver les sélecteurs
Vous pouvez utiliser des sélecteurs dérivés pour définir des styles pour les éléments enfants au sein d'un élément, par exemple :
li strong { style de police : italique; poids de police : normal }
Il s'agit de définir un style italique mais pas gras pour le sous-élément fort sous li.
6.sélecteur d'identifiant
La mise en page avec CSS est principalement implémentée à l'aide du calque "div", et le style du div est défini via le "sélecteur d'identifiant". Par exemple, nous définissons d'abord un calque
<div id="menubar"></div>
Définissez-le ensuite comme ceci dans la feuille de style :
#menubar {MARGE : 0px ; FOND : #FEFEFE ; COULEUR : #666 ;}
Où "menubar" est le nom d'identification que vous définissez. Notez le signe "#" devant.
Le sélecteur d'identifiant prend également en charge la dérivation, par exemple :
#menubar p {text-align : right; margin-top : 10px;
Cette méthode est principalement utilisée pour définir des calques et des éléments plus complexes et comportant plusieurs éléments dérivés.
6. Sélecteur de catégorie
Utilisez un point en CSS pour indiquer la définition du sélecteur de catégorie, par exemple :
.14px {couleur : #f60 ;font-size:14px ;}
Dans la page, utilisez la méthode class="category name" pour appeler :
<span class="14px">Police de taille 14px</span>
Cette méthode est relativement simple et flexible, et peut être créée et supprimée à tout moment en fonction des besoins de la page.
7. Définir le style du lien
Quatre pseudo-classes sont utilisées en CSS pour définir les styles de liens, à savoir : a:link, a:visited, a:hover et a:active, par exemple :
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a: visité {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
Les instructions ci-dessus définissent respectivement les styles de « liens, liens visités, lorsque la souris est survolée et lorsque la souris est cliquée ». Notez que vous devez écrire dans l’ordre ci-dessus, sinon l’affichage pourrait être différent de ce à quoi vous vous attendiez. N'oubliez pas qu'ils sont dans l'ordre "LVHA".
Haha, après avoir autant lu, je me sens un peu étourdi. En fait, il existe de nombreuses autres spécifications grammaticales pour CSS. En voici quelques-unes couramment utilisées. Après tout, nous procédons étape par étape et il est impossible de devenir gros. en une seule bouchée :)