Tutoriel d'introduction CSS_Tutoriel de base

CSS est l'abréviation de Feuilles de style en cascade. Il s'agit d'un mécanisme simple pour ajouter des styles aux documents Web et appartient au langage de mise en page de la couche de présentation.
　1. Spécifications de syntaxe de base
Analyser une instruction CSS typique :
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
Où "p" nous appelons "sélecteurs", indiquant que nous voulons définir un style pour "p" ;
La déclaration de style est écrite entre deux accolades "{}" ;
COLOR et BACKGROUND sont appelés "propriétés", et des points-virgules sont utilisés entre différentes propriétés ";" ;
"#FF0000" et "#FFFFFF" sont les valeurs des attributs.
　2. Valeur de couleur
La valeur de couleur peut être écrite en valeur RVB, par exemple : color : rgb(255,0,0), ou elle peut être écrite en hexadécimal, tout comme 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 les polices
Les standards du Web recommandent la méthode de définition de police suivante :
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, 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 Windows ; systèmes ;
Lucida convient aux utilisateurs UNIX
"Song Ti" convient aux utilisateurs de chinois simplifié
Si aucune des polices répertoriées n'est disponible, l'appel de la police sans empattement par défaut peut être garanti ;
　4. Sélecteur de groupe
Lorsque plusieurs éléments ont les mêmes attributs de style, ils peuvent appeler une instruction ensemble, séparés par des virgules : p, td, li { font-size: 12px }
5. La dérivée le sélecteur
peut être utilisé Le sélecteur dérivé définit un style pour les éléments enfants dans un élément, par exemple :
li strong { font-style : italic; font-weight : normal;}
consiste à définir un style italique pour l'élément enfant fort sous li Style gras.
　6.id selector
La mise en page CSS est principalement implémentée à l'aide du calque "div", et le style du div est défini via le "sélecteur id". Par exemple, on définit d'abord un calque

puis on le définit comme ceci dans la feuille de style :
#menubar {MARGIN : 0px;BACKGROUND : #FEFEFE;COLOR : #666 ;}
Où "menubar" est le nom d'identifiant 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 les calques et ceux qui sont plus complexes. et ont de nombreux é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 {color : #f60 ;font-size:14px ;}
dans la page , utilisez la méthode class="category name" pour appeler :
Taille de police 14px
Cette méthode est relativement simple et flexible, et peut être créée et supprimée à tout moment en fonction des besoins du page.
7. Définir le style du lien
Quatre pseudo-classes sont utilisées en CSS pour définir le style du lien, à savoir : a:link, a:visited, a:hover et a:active, par exemple :
a :link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {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 ;}
Ci-dessus Les instructions 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".