7/26/2019 Cours CSS

1/21

CSS

JE SUIS

INFORMATICIEN

1

7/26/2019 Cours CSS

2/21

PLAN

Dfinition

Ecriture du CSS

Slecteur

Notion de classe

Notion dun ID

Mode page

Convention

Police de caractre Apparence des listes

Arrire plan2

7/26/2019 Cours CSS

3/21

DFINITION (1/2)

3

CSS est l'abrviation de Cascading Style Sheets

Les feuilles de style sont des ajouts de code au langage XHTMLqui vont prendre en charge la prsentation de la page Web

Police, taille de caractres, interlignes, etc.

Le concept du CSS repose sur le principe de la sparation ducontenu et de la prsentation

7/26/2019 Cours CSS

4/21

DFINITION (2/2)

4

Lacune XHTMLUne taille de caractre limits quelques valeurs (hx)

Un seul modle de bordure de tableaux

Une image darrire obligatoirement rpte en mosaque

Utilit de CSS

CSS apportent de nombreuses possibilits de prsentation

Taille de caractres illimite, de nouvelles prsentation de

bordure, le contrle dinterligne, le positionnement prcis des images

Il simplifie le code

Il facilite la maintenance du site

http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/html.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-html-convertir-html-telecharger-bounce.htm&usg=__KOpmFWFy7F0znB6mlWCibLH8AE0=&h=64&w=64&sz=9&hl=fr&start=6&itbs=1&tbnid=XHJYa988N1HtdM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.html&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1

7/26/2019 Cours CSS

5/21

ECRITURE DU CSS (1/2)

5

Deux possibilit :

Interne : le code de la feuille de style sera plac dans lentte dudocument XHTML

7/26/2019 Cours CSS

6/21

ECRITURE DU CSS (2/2)

6

Deux possibilit :

Externe: Regrouper les dclarations de style dans un fichier (.css)externe au fichier XHTML et mis dans le mme rpertoire que cedernier.

Ma_Presentation.css

La balise avertit le navigateur qu'il doit chercher un document situ l'extrieur de la page HTML.

L'attribut rel="stylesheet"prcise que le document en question est une feuille de styleexterne.

L'attribut type="text/css"prcise le type de feuille de style.

L'attribut href=" URL "donne lemplacement de la feuille de style.

http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1http://www.google.com/imgres?imgurl=http://www.ouvrir-fichier.com/images/icons/64x64/css.png&imgrefurl=http://www.ouvrir-fichier.com/ouvrir-fichier-css-convertir-css-telecharger-telecharger+fichier+css.htm&usg=__A0ZM89mNBFfEoIAKVf_erMMBSAg=&h=64&w=64&sz=8&hl=fr&start=3&itbs=1&tbnid=GjaD-bxCfOxYYM:&tbnh=64&tbnw=64&prev=/images?q=fichier+.css&hl=fr&tbo=1&gbv=2&imgtbs=z&imgsz=i&tbs=isch:1

7/26/2019 Cours CSS

7/21

SLECTEUR

7

Slecteur {Proprit 1: valeur;Proprit 2 : valeur;

Proprit N : valeur;}

Il existe deux type de slecteur : classe et Id.

7/26/2019 Cours CSS

8/21

NOTION DE CLASSE

8

Dfinition de la classe

.nom_de_classe {Proprit 1: valeur;

}

EX:

.eni {

font-family: Verdana;

}

Appel de la classe

EX:

7/26/2019 Cours CSS

9/21

NOTION DUN ID

9

Dfinition dun id

#nom_de_id {

Proprit 1: valeur;

}

EX:

#eni {

font-family: Verdana;

}

Appel de la classe

EX:

7/26/2019 Cours CSS

10/21

MODE PAGE

10

Dfinition

table {

Proprit 1: valeur;

}

Proprit1 sexcutent pour tous les tableaux quiexistent sur cette page

Il est possible daffecter le mme effet des

diffrents slecteurs.

EX:

div, table, spam, h1 {Proprit 1: valeur;

}

7/26/2019 Cours CSS

11/21

CONVENTION

11

Commentaires/* Ceci est un commentaire */

Le code CSS et XHTML doit tre crit enminuscule

7/26/2019 Cours CSS

12/21

POLICE DE CARACTRE (1/5)

12

Nom de la policeFont-family: nom de la police;

Exemples: Font-family: Arial;

Font-family: courier New;

ItaliqueFont-style: italic ou oblique;

Petite majusculeFont-variant: small-caps;

7/26/2019 Cours CSS

13/21

POLICE DE CARACTRE (2/5)

13

GrasFont-weight: bold;

Taille:Font-size: valeur en pt ou px;

Raccourci:

P {font: italic bold small-caps 24 pt Arial, sans-serif;}

7/26/2019 Cours CSS

14/21

POLICE DE CARACTRE (3/5)

14

Couleur du texteColor: red;Color: #ff0000;

DcorationText-decoration: underline;

Transformation

Text-transform: capitalize;Text-transform: uppercase;Text-transform: lowercase;Text-transform: none;

7/26/2019 Cours CSS

15/21

POLICE DE CARACTRE (4/5)

15

Espace entre les lignesLine-height: 2; ouLine-height: 200%; (double interligne)

Line-height: 18px;Alignement horizontal

Text-align: left;Text-align: right;

Text-align: center;Text-align: justify;

7/26/2019 Cours CSS

16/21

POLICE DE CARACTRE (5/5)

16

Alignement verticalVertical-align: sub;Vertical-align: sup;

Vertical-align: top;Vertical-align: middle;

Longueur et hauteur (en px ou en pourcentage)

Width: 235px;Hight: 50%;

7/26/2019 Cours CSS

17/21

APPARENCE DES LISTES

17

Apparence des puces et des numrotationsList-style-type: disc; (cercle plein)List-style-type: circle; (cercle)List-style-type: square; (carr)

List-style-type: decimal; (1, 2, 3, etc.)List-style-type: upper-roman; (I, II, III,)List-style-type: lower-roman; (i, ii, iii, etc.)List-style-type: upper-alpha; (A, B, C,...)

List-style-type: lower_alpha; (a, b, c, etc.)Puces graphiques

List-style-image: url(votre_puce.gif);Les formats peuvent etre de type gif, jpeg, ou png

7/26/2019 Cours CSS

18/21

EXERCICE 1

18

7/26/2019 Cours CSS

19/21

ARRIRE PLAN (1/2 )

19

Couleur darrire-planBody {background-color: #99ccff;}H2 {background-color: #99ccff;}

Insertion et rptition dune imageBackground-image: url(image.jpeg);Background-repeat: repeat;Background-repeat: repeat-x;

Background-repeat: repeat-y;Background-repeat: no-repeat;

Exemple:Body {background-image: url(img.png); background-

repeat: repeat;}

7/26/2019 Cours CSS

20/21

ARRIRE PLAN (2/2 )

20

Positionnement de limage Background-position: 50px 100px; (axe horizontal

par rapport au bord gauche , axe vertical parrapport au bord suprieur)

Background-position: 20% 50%; (axe horizontalpar rapport au bord gauche , axe vertical parrapport au bord suprieur)

Background-position: center left; (positionhorizontale, position verticale)

Dfilement de limage

Background-attachment: scroll; (dfilement delimage)

Background-attachment: fixed;

7/26/2019 Cours CSS

21/21

21

Des questions ?