Vous êtes sur la page 1sur 19

PROGRAMMATION WEB2.

0: CHAPITRE1-LES FEUILLES DE STYLE CSS

Institut Suprieur dInformatique de Mahdia

(CASCADING STYLE SHEETS)


Enseignants Responsable: Gargouri Fahmi Haddar Nahla Kaouthar Hila Branches: LAI1 & LARI1

PLAN
1. 2. 3. 4. 5. 6. 7. Les feuilles de style CSS Style dans la page Du HTML au CSS Cration de style Les feuilles de style externes Proprits hrites d'un parent Les proprits de style

LES FEUILLES DE STYLE CSS


o

o o

Le World Wide Web a introduit les feuilles de styles en cascade pour complter la langage HTML. Les CSS permettent de grer l'apparence des documents. Les feuilles indiquent aux balises HTML leur comportement ou style.

STYLE DANS LA PAGE


<HTML><HEA <style type="text/css"> D> body { margin: 10px ; text-align: center ; } </style> </HEAD> <BODY> Ici le corps de la page </BODY></HTML>
4

DU HTML AU CSS : PRINCIPE


.HTML <HTML> <HEAD> <TITLE>Le CSS</TITLE>

<link rel="stylesheet" type= "text/css" href= "fichier.css"> <link rel="stylesheet" type= "text/css" href= "fichier.css">
</HEAD> <BODY> <H1>Introduction</H1> ... </BODY> </HTML> Le Rsultat Introduction

H1 { color : red ; } Fichier.CSS

CRATION DE STYLE
1) Modifier le style des balises existantes: Consiste modifier le style dune ou plusieurs balise qui existent dans le corps du document HTML.
Slecteur HTML <HTML><HEAD> <STYLE> TD, P {font-family : arial ; font-size : 12pt} </STYLE> </HEAD> <BODY> <TABLE> <TR> <TD> CELLULE 1</TD> <TD> CELLULE 2 </TD> </TR> </TABLE> <P>TEXTE</P> </BODY></HTML> Ici, toutes les cellules TD et P auront comme style par dfaut Arial 12pt. On peut modifier ainsi toutes les balises existantes.
6

Proprit

Valeur

Dfinition

CRATION DE STYLE
Le cas particulier de la balise de lien A La balise <A> est particulire, car elle peut tre drive selon l'action du visiteur. On obtient ainsi 3 balises A.
A:hover

{color:gray} A:active {color:red} A:visited {color:green}


Avec

cette dclaration, le texte de lien :

devient

gris au passage de la souris, devient rouge sur un clic, reste vert pour indiquer que ce lien a t visit.

CRATION DE STYLE
2) Cration de classes
Une classe est un style indpendant que l'on peut appliquer toute balises HTML. Par exemple dans cette page, les parties de code sont en courier new vert, grce la classe de style "code" qui est dclare ainsi :
Slecteur de Classe Proprit Valeur

<HTML><HEAD> <STYLE TYPE="TEXT/CSS" > .code {font-family:courrier ; color:green} </STYLE> </HEAD> Le point devant code indique la cration d'une nouvelle classe appele code. Pour affecter ce style une portion de texte, on crit : <P class="code">texte mis en forme</P> . Pour donner le style courier new vert une cellule de tableau, on crit : <TD class="code">cellule en police courrier vert</TD>
8

Dfinition

CRATION DE STYLE
3) Cration de ID
utile pour spcifier des rgles qui ne s'appliquent qu' un lment avec un ID unique donn dfini par l'attribut id en HTML.
Pas Trs

plus d'un lment ne doit avoir un ID donn. .HTML Le Rsultat

<BODY>

<div id="bloc_unique"> Bloc A </div> </BODY>


Le slecteur id

Bloc A

#bloc_unique

{ background-color:black; color:white ; }

.CSS

Llment devient unique, il est utilis une seule fois dans la page.
9

CRATION DE STYLE
3) Affecter l'attribut style

n'est pas indispensable de crer une classe de style pour affecter un style un objet.
Par

Il

exemple :

<div style="font-family: courier ; color:green"> Texte mis en forme </div>

style d'une balise reoit les proprits de style. Il est toutefois prfrable de dclarer une classe pour regrouper la mise en forme.
10

L'attribut

LES FEUILLES DE STYLE EXTERNES


d'un fichier de feuille de style est toujours .css Le fichier CSS contient uniquement l'intrieur des balises <STYLE>.
L'extension

Voici un exemple de fichier de style appel style.css :

/* Ceci est un commentaire */ TD {font-family:arial;font-size:12pt} .code {font-family:courrier;color:green} fichier style.css ne contient pas les balises <STYLE>.
Les Le

commentaires sont marqus par /* */.


11

PROPRITS HRITES D'UN PARENT


Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient gnralement les styles des balises imbriques dans leur parent : c'est l'hritage de style

<body> /* style caractre par dfaut est times*/ <b style="color:red" > /* style=times+bold*/ <i> Denis Style=times+bold+italique </i> </b> </body>
12

LES PROPRITS DE STYLE


Nous avons vu comment dclarer les styles dans une page. La norme CSS a prvu de nombreuses proprits pour les diffrents objets HTML. Toutes ces proprits ne sont pas prises en compte dans tous les navigateurs. Netscape 4.X en particulier est assez en retard par rapport Internet Explorer 4 et 5, qui lui-mme ne respecte pas toutes les normes.
Les proprits de police
Normes respectes par Internet Explorer et Netscape.

Proprit font-size

Signification Hauteur de police en points ou pixels

Valeurs possibles font-size:12px font-size:10pt font-family:arial,verdana font-family:sans serif font-weight:bold font-weight:normal font-style:italic font-style:normal color:green color:#FFCC00

font-family

Nom de police

font-weight font-style color

paisseur de la police (gras) Style de police (italic) Couleur de police

13

Les proprits de texte


Normes respectes par Internet Explorer et Netscape.

Proprit

Signification

Valeurs possibles

text-height

Hauteur de ligne en points ou pixels

text-height:12px

text-decoration

Attribut de soulignement

text-decoration:overline text-decoration:line-through text-decoration:underline text-decoration:none text-align:left text-align:right text-align:center text-indent:25px text-indent:-15px text-transform:capitalize text-transform:uppercase text-transform:lowercase

text-align

Alignement de paragraphe (balise P)

text-indent

Indentation de paragraphe (balise P)

text-transform

Transformation des majuscules

14

Les proprits d'arrire-plan


Seul Internet Explorer 4 et 5 .. permet de choisir une image d'arrire plan.

Proprit background

Signification Image d'arrire-plan

Valeurs possibles background:image.gif

background-color

Couleur d'arrire-plan

background-color:black

15

Les proprits de positionnement


Netscape 4.X a un gestion particulire des proprits de positionnement.

Proprit clip width height top left overflow

Signification Clipping Largeur de la zone Hauteur de la zone Ordonne du coin suprieur gauche Abscisse du coin suprieur gauche Recouvrement

Valeurs possibles clip:auto width:auto width:150 height:auto height:100 top:10 left:400 overflow:clip overflow:scroll overflow:none position:absolute position:relative position:static visibility:hidden visibility:visible 16

position visibility

Type de positionnement Visibilit

Les proprits d'encadrement (1) Aucune de ces proprits n'est reconnue par Netscape 4.X. Internet Explorer respecte presque compltement l'affichage de ces proprits.

Proprit margin-top

Signification Marge du haut en pixels

Valeurs possibles margin-top:10

margin-right

Marge du bas en pixels

margin-right:15

marginbottom

Marge du haut en pixels

margin-bottom:15

margin-left

Marge de gauche en pixels

margin-left:10

margin

Groupement des 4 marges haute, droite, bas et gauche

margin:10,15,15,10

17

Les proprits d'encadrement (2)

padding-top

Espacement en haut

padding-top:10

padding-right

Espacement droite

padding-right:10

paddingbottom

Espacement en bas

padding-bottom:10

padding-left

Espacement gauche

padding-left:10

padding

Groupement des espacements en haut, droite, en bas et gauche

padding:10,10,10,10

18

Les proprits d'encadrement (3) border-style Style de contour none, solid, double, groove, ridge, inset, outset border-color:red border-width:3px thin, medium, thick border-left-width:thin

border-color

Couleur de contour

border-width border-leftwidth border-rightwidth border-topwidth borderbottom-width

Largeur de contour

Epaisseur du trait de contour gauche

Epaisseur du trait de contour droit

border-right-width:medium

Epaisseur du trait de contour haut

border-top-width:thick

Epaisseur du trait de contour bas

border-bottom-width:0px 19

float

Flottaison du bloc A viter

float:right float:left