les SCRIPTS CSS [ Cascading Style Sheets ]

Pré-requis : connaissance du langage HTML.

Le CSS est un langage officiellement reconnu par le W3C et donc normalisé, et a bien évolué depuis 1996, date de sa création.

Les feuilles de style écrites en CSS permettent de définir des présentations pour l'affichage des pages HTML de manière à les centraliser toutes dans un seul fichier ".css" (ou au debut d'une page HTML). Ainsi, votre document HTML ne contiendra que du texte sans présentation ; cela permet de différencier le font de la forme.

On peut, de cette manière, définir des styles pour les balises HTML existantes (ex : on voudra que la balise (ou la tag) <font> affiche par défaut du texte en verdana de taille 12 et de couleur noire)
On peut ainsi homogénéiser la présentation de son site, et changer d'apparence tres facilement, juste en modifiant le ".css".

Attention toutefois ces styles ne sont pas toujours standart pour tous les navigateurs

:: Les bases

• Déclaration (a insérer entre les balises <head></head>) :
- dans la page (embedded) : <STYLE type=text/css>..</STYLE>
- dans un fichier externe (linking) (ici "styles.css") : <LINK rel="stylesheet" type="text/css" href="styles.css">
• Directement dans la balise voulue (adding in line) : <font style="..">

• synthaxe de base :
sélecteur {propriété: valeur;}
"sélecteur" désigne la cible à laquelle on appliquera la "valeur" pour la "propriété" (lisez la suite pour que ça soit plus clair ^^)

• Définition par classe :
BALISE : s'appliquera à toutes les balises de type <BALISE>
BALISE.nom_classe: s'appliquera à toutes les balises de type <BALISE class=nom_classe>
.nom_classe: s'appliquera à toutes les balises de classe "nom_classe"
<=>*.nom_classe

• Définition par ID :
(normalement on utilise un ID pour désigner un seul et unique élément)
BALISE: s'appliquera à la balise de type <BALISE>
BALISE#nom_id: s'appliquera à la balise de type <BALISE id=nom_id>
#nom_id: s'appliquera à toutes les balises de classe "nom_id"
<=>*#nom_id

PS : on désigne par le terme "balise" un identificateur du genre : <TABLE>, <FONT>, <TR>,..
pour leur attribuer un style ont leur donne une classe (ex: <TABLE class="nom">) ou un ID (ex: <TABLE id="nom">)
IMPORTANT : les balises, dans le CSS, ne sont pas accompagnées des délimiteurs ("<>") traditionnels

Les propriétés sont quant à elles placées entre {} et terminées par un ";".
TABLE.une_classe {propriété1:valeur1; propriété2:valeur2;}

:: Les propriétés

Voici la liste non-exhaustive des propriétés qui existent.
NB : dans le cas des propriétés du type margin-right , vous pouvez remplacé le texte "right" par "top", "bottom" ou "left" !
NB' : le caractère "|" est employé pour séparer 2 valeurs possibles

nom de la propriété	valeur(s) exemple
Les blocs
color	#0000FF \| blue \| rgb(0,0,255) \| #00f
padding	2px
padding-right	2px
border	2px
border-style	none \| hidden \| dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset
border-color	#xxxxxx \| color \| rgb(xxx,xxx,xxx) \| #xxx
border-width	(taille)
border-collapse	collapse \| separate \| inherit
height	(taille)
width	(taille)
display	none \| block \| inline
position	absolute \| relative \| fixed
Font properties
font-family	verdana \| verdana, arial
font-size	10pt \| small \| medium \| large \| xx-large \| larger
font-size-adjust
font-weight	10px \| bold \| normal \| bolder \| lighter
font-variant	normal \| small-caps
font-style	oblique \| italic \| normal
font-height
font-stretch	chasse de la police
Text properties
text-align	center \| right \| left \| justify
text-decoration	none \| underline \| overline \| line-through \| blink
text-indent	2px
text-transform	uppercase \| lowercase \| capitalize \| none
vertical-align	middle \| text-top \| bottom \| top \| sub \| suber
line-height	5px
letter-spacing	2px
word-spacing	4px
Margins bugs
margin	(taille) \| auto
margin-right	(taille)
Les pseudos (ne se mettent qu'apres une balise/classe)
:link	style des liens (donc à utiliser ainsi a:link {})
:visited	style des liens visités
:active	style des liens actifs
:hover	style de la balise lorsque le curseur est dessus
:focus	style de la balise lorsque son contenu a le focus
:first-line
:first-letter
:first-child
:lang(x)
:hover:focus	[multiple pseudo classe] factorise les styles
Les unités (pour les tailles)
%	%age de la fenêtre
ln
mm
cm	centimètres
px	pixels
pt	points (=1/72 de pouce)
pc	pica (=12 points)
in	inches (=2.54 cm)
em	em (par rapport aux parents)
ex	ex (par rapport à la valeur de "x-height")
Background properties
background
background-attachment	fixed \| scroll
background-color	#xxxxxx \| color \| rgb(xxx,xxx,xxx) \| #xxx
background-image	url(image.gif)
background-position	centered \| titles \| right \| left \| top \| bottom
background-repeat	-1 \| 0 \| 1 \| x
Divers
cursor	(url) \| hand \| text \| wait \| crosshair \| help \| move..
visibility	hidden \| visible
z-index
list-style-image	url() (pour attribuer une image à une puce de liste)

• Les couleurs :
(voici les 16 couleurs reconnus par leur nom quelque soit le navigateur)

black	maroon	green	navy
gray	red	lime	blue
silver	purple	olive	teal
white	fuchsia	yellow	aqua