II) Structure d’un fichier CSS

Un fichier css contient les éléments, id, classes et évènements utilisés sur une page web, auxquels on associe des attributs de style et leur valeur.

• un bloc d’attributs de style associés à un élément est situé entre deux accolades "{ }" après la déclaration dudit élément.
• un attribut est séparé de sa valeur par deux points ":"
• les attributs sont séparés entre eux par des points-virgule ";"

On peut mettre tous les attributs sur une même ligne, mais il est plus propre de déplier le bloc et d’indenter le code.

ce qui donne :

élément {
	attribut:valeur;
}

Un élément quelconque, en tant que tel, sera indiqué par le nom de sa balise html (<img src=.....> donnera img, <a href=.... ></a> donnera a, <div id=...></div> donnera div, etc).

Par exemple :

body {
	background-color:black;
}

mettra une couleur d’arrière-plan en noir pour l’élément body, qui correspond au corps de la page.
A noter, si le contenu ne descend pas jusqu’en bas de la fenêtre, il n’y aura qu’une partie de la fenêtre en arrière-plan noir. (Voir article sur la gestion de la taille des éléments web)

un identifiant d’élément (par exemple pour un bloc particulier <div id="contenu"></div>) sera indiqué par un #

Par exemple :

#contenu {
	position:absolute;
	left:237px;
	top:55px;
	bottom:30px;
	right:0px;
	overflow-y:auto;
	font-size:1.2em;
}

une classe (par exemple pour une classe "générique" <div class="table_page"></div>) sera indiquée par un point "."

.repondre {
	font-size:2em;
}

un élément possédant un identifiant et disposant en plus d’une classe sera indiqué comme ceci :

#contenu.cl_article {
	right: 51px;
}

ici, le bloc identifié par contenu, s’il est en plus de classe cl_article, sera à 51px du bord droite de son conteneur.

Un élément disposant de plusieurs "versions" en fonction des évènements sera indiqué par élément :évènement.

Par exemple, pour un bloc à identifiant unique <div id="zone_droite"></div> :

#zone_droite {
	width:50px;
}

#zone_droite:hover {
	width:300px;
}

Ce bloc fera 50px de large par défaut, mais lorsque la souris passera au-dessus du bloc, celui-ci s’élargira à 300px.
C’est le cas du bloc situé à droite de cette page.
Cela permet de déplier/replier ou de rendre visible/invisible un élément facilement, juste avec quelques attributs de style, sans script compliqué.

A noter, certains navigateurs (la série des Microsoft Internet Explorer) ne gèrent pas le hover ailleurs que sur les liens.

On peut aussi définir un style commun à plusieurs éléments/identifiants/classes/évènements. Ceux-ci seront séparés par des virgules.

Par exemple :

a.spip_out, a.spip_out:visited, a.spip_out:hover {
color: #42ADFB;
}

#entete, #pied {
	width: 100%;
	padding: 0px;
	border: 0px;
}

Enfin, on peut aussi imbriquer des éléments/identifiants/classes/évènements.

.menu h2 {
	font-weight: bold;
	text-align: center;
	color:darkorange;
	font-size:2.5em;
}

ici, on applique un style particulier aux éléments h2 situés dans un bloc de classe menu

#navigation a, #navigation a:hover, #navigation a:visited {
	color: #999999;
}

un style particulier aux liens situés dans le bloc d’identifiant navigation, quel que soit leur état (normal, survol, déjà visité)

#zone_droite:hover #zone_droite_contenu h2 {
	font-size:2em;
	line-height:2em;
}

et là un style aux éléments h2 situés dans le bloc zone_droite_contenu lui-même situé dans le bloc zone_droite, lorsque celui-ci est survolé par la souris.