+ init5
Les feuilles de style (.css)


Concept
Dans un document, il arrive trés fréquement que l'on attribut des caractéristiques communes à plusieurs éléments.
Par exemple, tous les liens ou les titres seront identiques, ....
Le concept des feuilles de styles, qui en facilite l'écriture, a été introduit par Microsoft en 1997 avec Internet Explorer 3.
Il est, depuis, reconnues par la plupart des navigateurs.

Avantages
- Modifier facilement l'aspect d'une page ou d'un site complet sans en changer le contenu.
- Obtenir une mise en page parfaite.
- Une écriture nette et précise par rapport au HTML.
- Séparer la mise en forme du contenu.
- Réduire le temps de chargement des pages en les allégeant.

Définition
La définition de base d'un style est trés simple. En voici un exemple:

< STYLE type="text/css">
< !-- A { font-size: 10pt; text-decoration: none; color: #FF00FF; font-family: Arial;}
-->
< /STYLE>

 Ceci n'illustre qu'une trés petite partie de l'utilité des feuilles de style.
La façon la plus logique et également la plus pratique est de placer les < STYLE> entre les balises < HEAD> et < /HEAD>
car les feuilles de styles appartiennent à la partie HEAD qui contient les informations pour le navigateur.

Il existe deux manières d'utiliser les feuilles de styles :
- Styles internes
- Styles externes

- Styles internes
L'exemple ci-dessus illustre trés bien l'utilisation des feuilles de styles internes.
Il suffit de placer les balises < STYLE> et < /STYLE> à l'intérieur de la partie < HEAD> de la page HTML.
Placez le code de votre feuille de style entre les balises < HEAD> et < /HEAD> que vous trouverez au début de votre fichier.
Cette méthode permet de configurer différemment une feuille de style pour chaque page d'un site.

- Styles externes
Les feuilles de styles externes vous permettent de définir une présentation valable pour une ou plusieurs, voire toutes les pages de votre site.
Pour créer une feuille de styles externe, il faut créer un fichier avec l'extension .css que vous placerez dans le même répertoire que vos pages HTML.
Dans ce fichier, placez par exemple, le code ci-dessous :

-------> A:link {font-family: Arial; text-decoration: none; Font-size: 10pt; color: #0033FF;}
-------> A:visited {font-family: Arial; text-decoration:none; Font-size: 10pt; color: #0033FF;}
-------> A:hover {font-family: Arial; text-decoration: underline; Font-size: 10pt; color: #0033FF;}

Les attributs et les valeurs peuvent être modifiés mais, l'ordre de présentation de ces trois lignes définit un effet particulier.
Ne pas oublier d'enregistrer sous "nom_fichier.css"
Copiez la ligne de code ci-dessous entre les balises < HEAD> et < /HEAD> dans une page HTML
-------> < LINK rel=stylesheet type="text/css" href="nom_fichier.css">
nom_fichier est le nom que vous avez attribué au fichier .css

La balise < LINK> avertit le navigateur qu'il faudra réaliser un lien.
L'attribut "rel=stylesheet" précise que l'on tombera sur une feuille de style externe.
L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheet (css)
L'attribut href représente l'adresse du fichier .css

Notion d'ID
Il a fallu trouver une convention d'écriture pour utiliser les feuilles de styles dans le Javascript. Ce sont les identifiants: ID.
La syntaxe est : #nom_ID {propriété: valeur}
Ce qui donne : < BALISE ID="nom_ID">le texte< /BALISE>
Un ID ne peut être utilisé qu'une seule fois par page. Pour ne pas se compliquer la tâche avec des scripts, on peut utiliser les classes.

Notion de classes
Pour utiliser des styles différents sur une même balise, l'usage des classes est la bonne solution car la syntaxe y est simple.

Définition d'un style : balise {propriété: valeur} devient : balise.nom_classe {propriété: valeur} (la balise et le nom de la classe sont séparés par un point)
La mention de la balise est facultative, on peut donc écrire : .nom_classe {propriété: valeur}ne pas oublier le .

Pour appeler la classe : < BALISE class="nom_classe">Votre texte< /BALISE>

Par exemple:
-------> .menu {text-decoration: none; font-color: #000000; font-size: 10pt}
et utiliser la classe dans < P>:
< P class="menu">le texte ici< /P>

Les balises:< SPAN> et < DIV>
Les balises < SPAN> et < DIV> permettent de se "déconnecter" des feuilles de styles et de créer des petits blocs particuliers dans le document sans repasser par des éléments du HTML.
Ainsi, la balise < SPAN> permet d'appliquer un style à une partie d'un ou plusieurs éléments de paragraphe.
Exemple : < P>La planete des < SPAN class="nom_classe">Internautes< /SPAN>< /P>
Quant à la balise < DIV>, elle permet d'attribuer un style à la totalité d'un ou plusieurs paragraphes.
Exemple : < DIV class="nom_classe">< P>le texte ici< /P>< P>la suite....là< /P>< /DIV>

Liste complète des propriétés

font
Définit un raccourci pour les différentes propriétés de police
P {font: italic bolder}
font-family
Définit un nom précis de police ou une famille de polices (police précise : Arial, Times,... ou famille : serif, cursive,...)
.TD {font-family: Verdana}
font-size
Définit la taille de la police (xx-small, x-small, small, medium, large, x-large, xx-large, larger ou smaller ou taille précise en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentages (%))
P {font-size:10pt}
font-style
Définit le style d'écriture (normal, oblique ou italique)
H1 {font-style: italic}
font-weight
Définit l'épaisseur de la police (normal, bold, bolder ou lighter ou en valeur numérique : 100,200,300,400,500,600,700,800,900)
.TD {font-weight: normal}
font-variant
Définit une variante par rapport à la police normale (normal ou small-caps)

P {font-variant: small-caps}
color
Définit la couleur du texte (en héxadécimal)
P {color: #003399}
text-decoration
Définit la décoration du texte (blink, underline, overline, line-through ou none)
A:hover {text-decoration: underline}
text-align
Définit l'alignement du texte (left, right ou center)
P {text-align: right}
text-transform
Définit la casse du texte (uppercase, lowercase ou capitalize)
P {text-transform: capitalize}
line-height
Définit l'interligne entre les lignes de texte en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)
P {line-height: 15pt}
text-indent
Définit un retrait dans la première ligne d'un paragraphe. Valeur en pixels (px), inches (in) ou centimètres (cm)
P {text-indent: 20px}
letter-spacing
Définit l'espace entre les lettres d'un mot en points (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
P {letter-spacing: 2pt}
word-spacing
Définit l'espace entre les mots en points (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
P {word-spacing: 4pt}
white-space
Définit un espace blanc (normal, pre ou nowrap)
NOWRAP {white-space: nowrap}
width
Définit la longueur d'un élément de texte ou d'une image en points (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
H3 {width: 100px}
height
Définit la hauteur d'un élément de texte ou d'une image en points (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
H3 {height: 50px}

background-color
Définit la couleur de l'arrière plan en héxadécimal
TD {background-color: #FFFFFF}
background-image
Définit l'image d'arrière plan (URL de l'image)
BODY {background-image: images/back.gif}
background-attachment
Définit si l'image d'arrière plan reste fixe ou pas (scroll ou fixed)
BODY {background-image: images/back.gif; background-attachment: fixed}
background-repeat
Définit la manière de répeter l'image d'arrière plan (repeat, no-repeat, repeat-x (où x est le nombre de répétitions horizontales ou verticales))
BODY {background-image: images/back.gif; background-repeat: norepeat}
background-position
Définit la position de l'image par rapport au coin supérieur gauche {top center ou bottom, left center ou right} ou en points (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
BODY {background-image: images/back.gif; background-position: top right} ou
BODY {background-image: images/back.gif; background-position: 10 20}
background
Définit un raccourci pour les propriétés d'arrière plan
BODY {backgroung: images/back.gif fixed norepeat}

margin
Regroupe toutes les propriétés de marge

margin-top
Définit la valeur de la marge supérieure en pixels (px) ou auto
{margin-top: 10px}
margin-bottom
Définit la valeur de la marge inférieure en pixels (px) ou auto
{margin-bottom: 10px}
margin-left
Définit la valeur de la marge gauche en pixels (px) ou auto
{margin-left: 10px}
margin-right
Définit la valeur de la marge droite en pixels (px) ou auto
{margin-right: 10px}

border
Regroupe les propriétés de bordures

border-style
Définit le style de trait de la bordure (none, solid, dotted, dashed, double, groove, ridge, inset ou outset)
{border-style: outset}
border-color
Définit la couleur de la bordure
TD {border-color: blue}
border-width
Regroupe toutes les propriétés de border-width

border-left-width
Définit l'épaisseur de la bordure gauche (thin, medium, thick ou spécifié par l'auteur)
TD {border-left-width: medium}
border-right-width
Définit l'épaisseur de la bordure droite (thin, medium, thick ou spécifié par l'auteur)
TD {border-right-width: thin}
border-top-width
Définit l'épaisseur de la bordure supérieure (thin, medium, thick ou spécifié par l'auteur)
TD {border-top-width: thick}
border-bottom-with
Définit l'épaisseur de la bordure inférieure (thin, medium, thick ou spécifié par l'auteur)
TD {border-bottom-width: 0,3cm}

padding
Regroupe toutes les propriétés de remplissage.

padding-left
Définit la valeur de remplissage gauche entre l'élément et la bordure en point (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
H1 {padding-left: 2px}
padding-right
Définit la valeur de remplissage droite entre l'élément et la bordure en point (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
H1 {padding-right: 2px}
padding-top
Définit la valeur de remplissage haut entre l'élément et la bordure en point (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%)
H1 {padding-top: 2px}
padding-bottom
Définit la valeur de remplissage bas entre l'élément et la bordure en point (pt), pixels (px), centimètres (cm), inches (in) ou pourcentages (%) H1 {padding-bottom: 2px}

list-style
Regroupe les propriétés de listes à puces ou à numéros.

list-style-type
Définit le type de puces (disc, circle ou square) ou de numérotation (decimal, lower-roman, upper-roman, lower-alpha ou upper-alpha)
OL {list-style-type: circle}
list-style-image
Définit l'URL de l'image qui remplacera les puces
OL {list-style-image: images/puce.gif}
list-style-position
Définit la position des puce par rapport au texte (intérieur (inside) ou extérieur (outside))
OL {list-style-position: outside}


SOMMAIRE JavaScript

RETOUR vulgarisation