Langage CSS

Mise en forme est maintenant portable pour être utilisée dans d'autres documents
Documents HTML maintenant simplifiés
Le langage CSS est basé sur la création des styles ou règles CSS

La synthèse d'un style CSS :

nom_propriété : valeur ;
nom_propriété : valeur ;

La règle de style vue par balise ou attribut

Les noms propriété-valeur des propriétés doivent être entre { }
Entre propriété et valeur mettre :
Entre les noms propriétés-valeurs on trouve ;

Remarque

Une propriété de style peut avoir plus qu'une valeur.
Une règle de style peut être créée par plusieurs balises.
Exemple :
- H₁, H₂, H₃ {font-family : Times, Arial; font-style : normal, italique}

Style interne/externe

Style interne

2 manières comment appeler un style interne :

Au niveau de l'en-tête : <head>...</head>

Syntaxe :

<html>
    <head>
        <style type="text/css">
            ...règles css...
        </style>
    </head>
</html>

<style> : balise permettant d'indiquer au navigateur qu'on va utiliser une feuille de style.
type : attribut permettant d'indiquer le langage de style utilisé "text/css".

Au niveau des balises dans le <body> :

Syntaxe :

<body>
    <balise style="prop1:valeur; prop2:valeur">
    ... 
    </balise>
</body>

Remarque

Cette solution exige que chaque fois qu’on fait une modification de style, on doit la faire pour chaque balise.

<body>
    <H1 style="..."> H1 respecte la forme proposée dans le style.</H1>
    <H1> Ne respecte pas le style proposé dans le 1er H1.</H1>
</body>

Style externe

Les règles de styles sont proposées dans un fichier séparé d’extension ".css".
⇒ Séparation totale entre contenu utilisateur (document HTML) et la mise en forme (Famille .css).
Pour faire la liaison entre document HTML et la feuille (.css), il faut appeler la balise <link> au niveau de l’entête du document HTML.

Syntaxe :

<head>
    <link rel="stylesheet" type="text/css" href="chemin/vers/feuille-css">
</head>

Remarque

Une feuille de style css peut être appelée par plusieurs documents html.

Classe et Id de style

Classe de style

Le langage CSS permet de créer des classes de styles sans être liées aux balises.

Syntaxe :

<style>
    .nom-classe { 
        prop1: valeur; 
        prop2: valeur; 
    }
</style>

Appel de la classe dans la balise :

<balise class="nom-classe">...</balise>
<balise class="nom-classe">...</balise>

Remarque

Une classe de style peut être appelée par plusieurs balises.
Une balise peut respecter plusieurs classes de style.

Identifiant de style

Syntaxe :

Création de l'identifiant de style :

<style>
    #nom_identif {
        prop1: valeur;
        prop2: valeur;
        ...
    }
</style>

Appel de l'identifiant :

<body>
    <balise id="nom_identif"> ... 
    </balise>
</body>

⇒ Mêmes remarques comme les classes de styles

Span et Div

Span: formatage mode inline :

⇒ Formatage proposé pour un caractère, un mot ou une ligne.

Div: formatage mode bloc :

⇒ Bloc : plusieurs paragraphes, plusieurs images, plusieurs tableaux.

Positionnement avec CSS

Positionnement: le langage CSS permet aux utilisateurs de placer (positionner) un objet HTML (image, tableau, page...) au pixel près sur l’écran du navigateur.
On distingue deux types de positionnement :

Positionnement absolue :

c'est par rapport au point (supérieur gauche) \((0,0)\) de l'écran.

Positionnement relative :

c'est par rapport à l'objet précédent dans le document HTML.

Pour gérer le positionnement en CSS, il faut appeler la propriété position avec comme valeur absolute ou relative, et les coordonnées top = x px et left = y px.
Remarque : Avec CSS, on peut placer les différents objets HTML (texte, image, tableau, paragraphe).
Placer un élément à côté de l'autre ou au-dessus/en-dessous de l'autre en utilisant le positionnement CSS.

Liste des propriétés CSS

plusieurs catégories de propriétés CSS :

Style de polices :
- font-family : famille de police (par exemple, Times, Arial).
- font-style : style d’écriture des caractères (normal, italique, oblique).
- font-weight : niveau de gras (normal, bold, lighter).
- font-size : taille de police (small, medium, large, x-large).
Style de texte :
- text-align : alignement du texte (center, left, right).
- text-indent : indentation de la première ligne du texte (en cm, px, pt...).
- text-decoration : ajout d'un trait au-dessus, au-dessous ou à travers le texte.
- text-transform : casse des caractères (majuscule : uppercase, minuscule : lowercase, capitaliser la première lettre).
- color : couleur du texte (blue, yellow, etc.).
- word-spacing : espace entre mots (en cm, px, etc.).
- letter-spacing : espace entre caractères.
- line-height : hauteur de ligne, espace entre lignes (en px, pt, etc.).
- width : largeur de l’objet (en pt, px, %).
- height : hauteur de l’objet (en pt, px, %).

Remarque :
- Les propriétés width et height sont appliquées pour les objets comme les images et les tableaux.

Arrière-plans

background-color : couleur d'arrière-plan (exemples : blue, yellow).
background-image : image en arrière-plan (exemple : background-image: url('lien_image');).
background-attachment : attachement de l'image en arrière-plan (valeurs possibles : fixed, scroll).
background-position : position de l'image en arrière-plan.

Margin

margin-top : marge supérieure entre le corps de l’objet et le haut de l’écran, définie en px, pt, cm, etc.
margin-bottom : marge inférieure entre le corps de l’objet et le bas de l’écran.
margin-left : marge à gauche de l’objet.
margin-right : marge à droite de l’objet.
margin : applique la même valeur pour les quatre côtés (exemple : margin: 10px).
Exemples :
- body { margin: 10px; }
- body { margin-top: 10px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; }

Border

border-top-width : épaisseur du trait en haut de l’objet.
border-bottom-width : épaisseur du trait en bas de l’objet.
border-right-width : épaisseur du trait à droite de l’objet.
border-left-width : épaisseur du trait à gauche de l’objet.
border-color : couleur de la bordure.
border-style : style du trait de la bordure (exemples : solid, dashed, dotted).

Remplissage

padding-top : marge laissée libre entre le haut de l’objet (par exemple, image, tableau) et son contenu.
padding-right : marge laissée libre entre le côté droit de l’objet et son contenu.
padding-bottom : marge laissée libre entre le bas de l’objet et son contenu.
padding-left : marge laissée libre entre le côté gauche de l’objet et son contenu.
Remarque : Vous pouvez appeler les propriétés margin, border, et padding sans préciser le côté (elles s'appliquent alors à tous les côtés).

Listes

list-style-type : change la puce par défaut d'une liste.
- Exemple : ul { list-style-type: circle; }
list-style-image : utilise une image comme puce dans la liste.
- Exemple : ul { list-style-image: url('image.gif'); }