Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble.

Présentation au sujet: "Language html VI- Les CSS. Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble."— Transcription de la présentation:

1 Language html VI- Les CSS

2 Les CSS CSS: Cascading Style Sheets. Feuilles de Styles en Cascade En typographie, une feuille de style désigne l'ensemble d'attributs de caractères et de formats de paragraphes pouvant être appliqués en une seule opération à un ou plusieurs paragraphes.typographieattributs de caractères Avec les css la conception et la maintenance des sites sont simplifiés.

3 Un exemple Pour commencer: un exemple simple qui permet d’afficher les entêtes principaux (H2) en rouge : H2 { color : red }

4 Les règles CSS Une règle CSS est composée de deux parties : un sélecteur et une déclaration. H2 { color : red } La déclaration est composé d’une propriété (ici Color) et d’une valeur (ici red) séparé par :

5 Le code Maintenant

6 More

7 De l’ordre avant d’aller plus loin Deux méthodes principales pour créer une feuille de style: 1- La première consiste à placer la feuille de style dans l'entête de document. 2- La seconde consiste à placer la feuille de style dans un fichier séparé, et à y faire référence dans l'entête du document. Ce qui permet de réutiliser la même feuille de style dans plusieurs documents.

8 De l’ordre avant d’aller plus loin Pour implémenter la feuille de style avec la seconde méthode. 1- Il faut créer un fichier externe contenant les styles. exemple « styles.css »

9 De l’ordre avant d’aller plus loin Pour implémenter la feuille de style avec la seconde méthode. 2- Appeler le fichier de style dans votre document html

10 Quelques propriétés Parmi les plus utilisées: Nom de La police : font-family : Arial, Times New Roman, Tahoma … Style de La police : font-style : normal, italic, oblique Epaisseur de La police : font-weight : bold, bolder, lighter, 100, 200, 300,... 900. Taille de la police font-size : xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller. 12pt (pour 12 points) ou un pourcentage (par rapport à la taille par défaut)

11 Quelques propriétés Parmi les plus utilisées: Alignement du text: text-align : left, right, center, justify Décoration du text: text-decoration : none, underline, overline, line-through, blink Couleur du text: Color : red; #fd4a88, rgb(125,32,98); Couleur du fond: Background-color : blue

12 Quelques propriétés Parmi les plus utilisées: Style de la bordure: border-style : none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset Epaisseur de la bordure: Border-width : thin, medium, thick ou bien une longueur, 3px; Couleur de la bordure Border-color : blue

13 Quelques propriétés Pour régler les marges Les marges (respectivement au dessus, au dessous, à gauche et à droite). margin-top, margin-bottom, margin-left, margin-right Pour la valeur on peut utiliser différentes unités de mesures : 1px : 1 pixel 1in : 1 inch 1cm : 1 centimètre 1mm : 1 millimètre 1pt : 1 point = 1/72 inch 1pc : 1 pica = 12pt

14 CSS V- Les Class

15 Les class CSS Nous allons créer une class qu’on appellera « titre » et qui regroupe toute les attributs de la mise en forme d’un titre dans notre page html. Noter bien le point (. ) devant titre qui indique que c’est bien une class CSS.

16 Utiliser une class CSS Une fois crer pour l’appliquer à un champ de notre page html c’est très facile, il suffit de l’appler. Et Voila ca marche.

17 Bibliographie Pour plus d’info prière de visiter les lien suivants: -http://www.snv.jussieu.fr/archambault/cours/html/http://www.snv.jussieu.fr/archambault/cours/html/ -http://www.w3.org/Style/Examples/011/firstcss.fr.htmlhttp://www.w3.org/Style/Examples/011/firstcss.fr.html