INFORMATIQUE

Les feuilles de Styles ou CSS

Les Feuilles de Styles ( CSS ou Cascading Style Sheets ) apportent de nouvelles possibilités de mise en page et permettent de contrôler les propriétés des balises HTML (texte, titres...) ainsi que la modification de l'aspect général du site en agissant sur un seul document ( la Feuille de Styles ) et non sur chacune des pages qui composent le site.
Ces feuilles peuvent être incluses dans une page HTML ou importées depuis un fichier *.css externe.

La définition de base d'un style est simple :
balise { propriété de style: valeur; propriété de style: valeur }
Exemple: h1{ font-family: Arial; font-style: italic; color: red; font-size:12}

Il existe trois méthodes qui permettent d'associer des styles à une page web:
1- Styles "inline" ou marqueurs coup par coup:

C'est la technique la moins performante, on attribue un style pour chaque élément HTML
Exemple:

<p style=" color: red; font: 12pt times; margin- left: 2em">votre texte</ p>
<h1 style="font-family: Arial; font-style: italic; font-size: 16">vos liens</h1>

2- Feuille de style incorporée dans une page

Dans cette technique la déclaration d’une feuille de style est faite avec le tag <style> dans l'en-tête du document HTML entre les balises <head> et </head>, tout en tenant compte de la compatibilité avec les anciens navigateurs ( avant Explorer 4 et Netscape 4).

Exemple:

<head>
<title>titre de la page</title>
<style type="text/css">

</style> </head>

Explication: les 4 styles du lien:
                         a:link le lien par défaut
                         a:hover le lien survolé
                         a:active le lien appuyé
                         a:visited le lien déjà visité

Remarques:

Pour rendre la ligne caractéristique des liens, il suffit de supprimer: text-decoration: none
On peut définir un élément class pour faire référence à certaines balises d'un groupe bien précis.

Exemple :

<head>
<title>titre de la page</title>
<style type="text/css">
  
</style>
</head>
<body>
<a class="nom_classe" href="url">Ecrivez-moi vite !</a>
<a href="link.htm">Visitez mes amis !</a>
</body>

3-Feuille de style externe (ou liée) associé à des pages HTML:
C'est la technique la plus efficace pour gérer la présentation de plusieurs pages et même pour toutes les pages d'un site, en créant un document externe regroupant tous les styles, et en référençant ce document dans chacune des pages du site pour adapter le style pré requis.

Toutes les feuilles de style se trouvent dans un fichier avec l'extension .css soit forme.css qui se trouvera dans le répertoire du site,

Pour chaque page il faut insérer la balise <link> qui doit se trouver dans le <head> sous la forme:

Précisons que:

· La balise <LINK> indique au browser de réaliser un lien.
· L'attribut de lien href="forme.css" donne le chemin d'accès et le nom du fichier à lier.
· L'attribut rel=stylesheet précise que la feuille de style est externe.
· L'attribut type="text/css" indique que le contenu est du type texte et du genre cascading style sheets (css).

La réalisation du fichier forme.css peut être faite avec un utilitaire (comme Notepad... ):

Exemple:

Divers attributs et valeurs

Ce tableau présente les principaux attributs associées aux styles ou aux feuilles de styles

Attributs	Valeurs	Exemples
background-image	none.ou adresse d'une image url("...")	BODY { background-image: url("monimage.gif")
background-color	Couleur du fond	background-color : blue
font-family	Nom de la police	font- family: Helvetica, Arial, sans- serif
font-size	xx-large, x-large, large; medium, small, x-small, xx-small, larger, smaller, ou hauteur spécifiée avec l'unité en pixel (px), cm (cm), mm (mm), point (pt), pourcentage (%)	font-size`:` x-small; font-size : 14pt; font-size : 120%;
font-style	normal, `oblique` ou italic	font-style: italic
font-weight	normal, bold, bolder, lighter, light ; ou épaisseur en centaine de 100 à 900	.font-weight : bold;
color	nom de couleur ou valeur hexadécimale color: green; color : #ff00aa; color : rgb(100,70,150)	color : rgb(125,32,98) color : red
border-color	nom ou valeur hexadécimale	border-color : green;
border-style	`none`, `hidden`, `dotted`, `dashed`, `solid`, `double`, `groove`, `ridge`, `inset`, `outset`	border-style : solid
border-width	`thin`, `medium`, `thick` ou bien une longueur. border-width : thin;	border-width : 3px;
letter-spacing	normal; ou valeur en point (pt)	letter-spacing: 2pt;
text-decoration	underline, line-through, none, overline, `blink`	text-decoration : underline line-through;(Ces valeurs peuvent être combinées)
text-transform	capitalize, lowercase, none, uppercase, `none`	text-transform: uppercase;
text-align	left, right, center, justify	text-align: left;
text-indent	valeur en pixels (px) ou en pourcentage(%)	text-indent: 20px
margin-top, margin-bottom, margin-left, margin-right	valeur en pixels (px) ou en pourcentage (%)	margin-top: 12px
line-height	normal, number, length, percentage, inherit valeur en pixels (px) ou pourcentage (%)	P{line-height:16pt;} H2{line-height:150%;}
float	`left`, `center`, `right`	float : right;