Les CSS: pourquoi

CSS : Cascading Style sheets

Sadok Ben Yahia, [email protected]

Département des Sciences de l’InformatiqueFST

Les CSS: pourquoi Objectif: fournir un mécanisme pour associer différents styles

à un même document

Article

...

Présentations

Contenu

Exemple

il arrive fréquemment que l'on attribue à certains éléments des caractéristiques de mise en forme identiques. Par exemple, les noms de chapitres seront mis en police Arial, en gras et en couleur bleue.

Appeler cette mise en forme "titre" l’appliquer à chaque nouveau chapitre

Cette définition de mise en forme particulière, on va l'appeler feuille de style.

Idée reprise de MS-WORD

<H1><B><FONT COLOR=blue>Titre1</FONT></B></H1><H2><B><FONT COLOR="green">- A -</FONT></B></H2><H3><B><FONT COLOR="red">...a....</FONT></B></H3> <H1><B><FONT COLOR=blue>Titre2</FONT></B></H1><H2><B><FONT COLOR="green">- B-</FONT></B></H2><H3><B><FONT COLOR="red">...b....</FONT></B></H3>

STYLE des titres STYLE des sous-titres STYLE du texte STYLE des titres STYLE des sous-titres STYLE du texte

Utilité et avantages

Séparation du contenu et de la mise en forme.

Cohésion de la présentation tout au long du site avec les feuilles de style

externes.

Modifier l'aspect d'un page ou d'un site sans en modifier le contenu et cela

en quelques lignes plutôt que de devoir changer un grand nombre de

balises.

Un "langage" neuf, compréhensible, simple et logique par rapport au Html

et à ses différentes versions.

Utilité et avantages

Une façon d'écriture concise et nette par rapport au Html qui devient vite

fouillis.

Réduire le temps de chargement des pages.

Palier certaines insuffisances du langage Html (contrôle des polices, contrôle

de la distance entre les lignes, contrôle des marges et des indentations (sans

devoir utiliser de tableaux) et ainsi augmenter la créativité des écrivains du

Web.

Définition d'un style

La définition de base d'un style est simple :

balise { propriété de style: valeur; propriété de style: valeur }

Exemple :

H3 { font-family: Arial; font-style: italic }

Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les

balises <H3> auront comme style Arial et italique.

Exemple: Fizzics1.html (sans feuilles de style)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD>

<BODY>

<H1>New Advances in Physics</H1>

<H2>Turning Gold into Lead</H2>

In a startling breakthrough, scientist B.O. "Gus" Fizzics

has invented a <STRONG>practical</STRONG> technique for

transmutation! For more details, please see

<A HREF="give-us-your-gold.html">our transmutation thesis</A>.

...

</BODY></HTML>

Résultat

<HEAD>

<TITLE>Document Title</TITLE>

<STYLE TYPE="text/css">



</STYLE>

</HEAD>

Exemple: Fizzics1.html (avec feuilles de style)

Résultat

Définition d'un style : Attention !!!!

Les propriétés de style sont entourées par des "{" et pas des [ ou des parenthèses.

Le couple "propriété de style/valeur" est séparé par un double-point (:).

Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).

Pas de limite pour le nombre de couples "propriétés de style/valeur".

Définition d'un style : Attention !!!! L'espace entre propriétés de style et valeur non obligatoire ( lisibilité du code

source).

Ecrire vos styles sur plusieurs lignes :

H3 {font-family: Arial;

font-style: italic;

font-color: green}

Attribuer plusieurs valeurs à une même propriété: H3 {font-family: Arial, Helvetica, sans-serif}

Attribuer un même style à plusieurs balises.: H1, H2, H3 {font-family: Arial; font-

style: italic}

Définition du style : A l'intérieur des balises <HEAD></HEAD>

<HTML><HEAD>

<STYLE type= "text/css“ >



</STYLE>

</HEAD>

<BODY>

on va utiliser des feuilles de style

ce qui suit est du texte et qu'il s'agit de cascading style sheets (css)

si le browser ne connaît pas les CSS il va les considérer comme des commentaires

Définition du style : A l'intérieur des balises <Body></Body>

<HTML> <BODY>

<H1 style="font-family: Arial;

font-style: italic">

Fac des Sciences </H1>

</BODY>

</HTML>

Le style Arial, italique n'affectera que cette seule balise H1

la syntaxe est légèrement différente de la précédente

<STYLE type="text/css">

H1 { "font-family: Arial; font-style: italic" }

</STYLE>

fonctionne aussi.

peu conforme à l'esprit des feuilles de style (définir un style déterminé valable pour la globalité du document

Définition du style : Styles externes

Définir une présentation de style valable pour plusieurs pages

créer une page externe qui regroupera toutes les feuilles de style, et faire le lien

<HTML>

<HEAD>

--- Les différentes feuilles de style ---

</HEAD>

<BODY>

</BODY>

</HTML>

Fichier .css (momstyle.css)<HTML> <HEAD>

<LINK rel=stylesheet type="text/css" href=“monstyle.css">

</HEAD>

avertit le browser qu'il faudra réaliser un lien

l'information est du texte et du genre cascading style sheets (css).

précise qu'il y trouvera une feuille de style externe.

le chemin d'accès et le nom du fichier à lier

Atelier : feuille de style externe feuille de style : une page à fond blanc, avec une police de caractère par défaut

Verdana noire, un titre de premier niveau bleu marine centré, un titre de deuxième niveau bleu décalé de 15 pixels, des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris

html,body,p,ul,li,td {font-size : 10pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;

color : black; background-color : white; }

h1 {font-size : 20pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;color : navy; text-align: center;}

h2 {font-size : 14pt; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : blue;padding-left:15px;}

a:link {color: green; text-decoration:underline;}a:visited {color: gray; text-decoration:underline;}a:hover {color:red; text-decoration:none;}

Notion de ClasseAffecter des styles différents à une même balise les classes

balise { propriété de style: valeur } balise.nom_de_classe { propriété de style: valeur }

.nom_de_classe { propriété de style: valeur }

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

(.) devant le nom de classe est indispensable

faire appel à une classe

Je souhaite mettre ce qui est important dans le texte en gras et en bleu. :

.essentiel { font-weight: bold; font-color: #000080 }

dans le document Html,

<P class=".essentiel"> ... blabla ... </P>

<H1 class=".essentiel">Titre 1</H1>

<TABLE><TR><TD class=".essentiel">cellule</TD></TD>...

Notion de pseudo-classe

Applicable concrètement à la balise A

Celle ci peut connaître plusieurs contextes de formes selon que le lien est

inactif, visité, ou en train d'être visité. on peut définir alors pour chacun

des états de la balise une mise en forme particulière.

Exemple:

A:link {font-family:Arial; color:"#0099FF"; font-size:12px; cursor:text;}

A:visited {font-family:Arial; color:blue; font-size:12px; cursor:text;}

A:active {color:red;}

A:hover {color:red; text-decoration:none;}

Principe de l'héritage (ID) Certains éléments de la page HTML héritent des propriétés des styles définis.

style de H1 : couleur turquoise en arrière-plan est appliquée

L’application de la balise H1 dans le corps de la page peut être combinée avec d`autres balises : <H1> Le principe de <I> l'héritage </I> </H1>

la balise italique héritera des propriétés du style H1 (affiche également la couleur de fond turquoise).

Exemple 1

Exemple 2

Style 1 : mon propre style Style 2 : mon propre style + style 1 Style 3 : mon propre style +style 1 + style 2

Les feuilles de style en cascade

En cas de concurrence entre plusieurs éléments de style notion de "cascade" ou d'ordre de priorité.

La concurrence provient des différentes possibilités de localisation de feuilles de style :

CSS importée (dans un fichier externe avec l'extension .css) CSS Globale (dans la balise HEAD du document)CSS Intra-lignes (dans le BODY du document)

appliquer pour la présentation du document la feuille de style la plus proche de l'élément.

Règle de priorité

un style spécifié dans le BODY sera retenu par rapport à un style déclaré dans un fichier externe.

contourner ces règles de priorité par la déclaration ! importantcependant

Règle de priorité : Quel fond d’écran<HEAD>

<STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY STYLE="background-color:#FF0000; ">

Le fond d'écran sera… ????

<HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY STYLE="background-color:#FF0000; ">

Le fond d'écran sera… ????

Les balises structurales DIV et SPAN

balises Structurales qui créaient ainsi des petits blocs particuliers dans le document sans devoir repasser par les éléments structurels du Html classique.

DIV est une balise de division qui permet de définir un bloc de texte particulier ( permet de regrouper plusieurs paragraphes ou de délimiter une zone comportant plusieurs paragraphes).

Procédures :

1. Intégrer chaque grande portion de document dans une balise DIV particulière.

2. Utiliser une feuille de style pour chaque DIV.

DIV : exemples

<html> <HEAD> <STYLE type="text/css"> .zone{font-size: x-small} </STYLE> </HEAD> <BODY> La balise <DIV> <DIV class=zone> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </DIV> </Body> </html>

<HTML> <HEAD> <STYLE type="text/css"> .zone{font-size: x-small} </STYLE> </HEAD> <BODY> La balise <DIV> <DIV class=zone> <P>Commentaire :</P> <P>N'oubliez pas l'attribut class!</P> </DIV> </BODY> </HTML>

SPAN

<HTML> <HEAD> <STYLE type="text/css"> .element{font-size: x-large; color: navy} </STYLE> </HEAD> <BODY> <P> Un monde de <SPAN class=element> géants</SPAN> </P> </BODY> </HTML>

• balise de marquage : considérer une petite portion particulière de texte. •Elle va servir à mettre en valeur des citations, des exemples, des extraits ...

•Fréquemment utilisée avec des feuilles de style intra-lignes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>The 23rd Psalm</TITLE>

<STYLE>



</STYLE>

</HEAD>

<BODY>

<H2 ALIGN="CENTER">

The 23rd Psalm (King James Version)</H2>

<SPAN>T</SPAN>he LORD is my shepherd; I shall not want.

He maketh me to lie down in green pastures: he leadeth me beside the still waters.

Position absolue ou relative ?

Grâce au CSS, il est désormais possible de positionner, au pixel près, du texte

ou une image avec les feuilles de style

Position spécifie le type de positionnement du document. Il en existe 3 types:

Static (le type par défaut)

Absolue

relative

Position absolue

La position absolue {position: absolute} se détermine par rapport au coin supérieur gauche de la fenêtre du browser.

Les coordonnées de ce point sont top = 0 et left = 0.

Il y a 3 options pour top et left : auto (par défaut), pixels (vous précisez la valeur suivie de px), pourcentage (la même chose suivie de %).

Les coordonnées d'un point de haut en bas pour top et de gauche à droite pour left.

DIV est préférable pour les grands textes qu'elle fera précéder et suivre d'un saut de ligne; SPAN, conçue comme simple marqueur, sera utilisée pour encadrer un paragraphe.

utiliser SPAN ou DIV

Position relative

La position relative {position: relative} se détermine par rapport à d'autres éléments

de la page, par exemple un élément du code Html.

Un positionnement relatif sera donc traité dans le flux du document (traité de bas en

haut), et fera référence pour son positionnement à l'élément qui lui est

immédiatement supérieur. Cette propriété est valable pour tous les types de balises.

Exemples : Positionnement

Image : 1.jpg

<html> <head>.toto {

position:relative; top:10px; left:10px; }

<BODY BGCOLOR="#000080" TEXT="#FF0000">

<IMG SRC="1.jpg" BORDER=0 WIDTH=50

HEIGHT=50>

<B><DIV CLASS="toto">Toto et tata</DIV></B>

</body> </html>

relative

<html> <head>

.toto {

position:absolute; top:10px; left:10px; }

<BODY BGCOLOR="#000080" TEXT="#FF0000">

<IMG SRC="1.jpg" BORDER=0 WIDTH=50

HEIGHT=50>

<B><DIV CLASS="toto">Toto et titi</DIV></B>

</body> </html>

Absolue

Attributs : Clip

Applicable uniquement aux éléments de position absolue.

spécifier la zone de visibilité du document l'endroit où le document contenu dans

les balises pourra ne plus être visible s'il dépasse les paramètres de largeurs et de

hauteurs fixés par clip.

La syntaxe : clip:rect(haut,droite,bas,gauche)

varie selon les navigateurs

Clip : Exemple

L'image 1.jpg +CLIP <HEAD> <STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY BGCOLOR="#000080" TEXT="#FF0000"> <DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV> </BODY>

les ¾ de l'image ont disparu !

L’attribut Z-index

Définit l'empilement des feuilles de styles indique l'axe vertical d'empilement, ou la

priorité d'affichage entre éléments superposés.

S'applique à tous les éléments de position relative ou absolue.

Plus l'index est grand, plus l'élément est situé dessus. Plus il est bas, plus il est situé

dessous.

Deux éléments de même index vont se superposer très pratique pour afficher du

texte sur une image, ou vice-versa.

L’attribut Z-index<STYLE TYPE="text/css">  </STYLE> </HEAD> <BODY BGCOLOR="#000080" TEXT="#FF0000"> <DIV CLASS="toto"><IMG SRC="1.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV> <DIV CLASS="titi"><IMG SRC="2.jpg" BORDER=0 WIDTH=50 HEIGHT=50></DIV>

Placer le z-index:2 sur la classe Toto

Les couleurs Prédéfinies

blue#0000FF(0,0,255)

fuchsia#FF00FF(255,0,255)

lime#00FF00(0,255,0)

maroon#800000(128,0,0)

purple#800080

(128,0,128)

red#FF0000(255,0,0)

white#FFFFFF

(255,255,255)

yellow#FFFF00(255,255,0)

aqua#00FFFF(0,255,255)

black#000000(0,0,0)

gray#808080

(128,128,128)

green#008000(0,128,0)

navy#000080(0,0,128)

olive#808000

(128,128,0)

silver#C0C0C0

(192,192,192)

teal#008080

(0,128,128)

16 noms réservés de couleur disponibles dans la spécification CSS1 Ces couleurs prédéfinies issues de Html 4.0 (prises de la palette VGA)

Codification des couleurs en CSS

Par un nom fonctionnel (voir liste).

Par la valeur hexadécimale composée de 6 chiffres précédée d'un dièse # :

#000000, #FFFFCC.

soit comme en Html mais sans les guillemets.

Par une valeur hexadécimale à 3 chiffres Chaque chiffre est alors

implicitement dupliqué : ainsi #fd3 est équivalent à #ffdd33.

Par la notation fonctionnelle rgb qui prend 3 arguments en l'occurrence 3

nombres entiers compris entre 0 et 255 ou 3 pourcentages entre 0% et 100%. .

color : rgb(255,0,0);

color : rgb(50%,50%,50%);

http://www.ccim.be/ccim328/trucs/memoire/#color

Codification des couleurs en CSS : Liste Pourcentage Nombre entier Hexadecimal

aqua rgb(0%,100%,100%) rgb(0,255,255) #00FFFF #0FF

black rgb(0%,0%,0%) rgb(0,0,0) #000000 #000

blue rgb(0%,0%,100%) rgb(0,0,255) #0000FF #00F

fuschia rgb(100%,0%,100%) rgb(255,0,255) #FF00FF #F0F

gray rgb(50%,50%,50%) rgb(128,128,128) #808080 #888

green rgb(0%,50%,0%) rgb(0,128,0) #008000 #080

lime rgb(0%,100%,0%) rgb(0,255,0) #00FF00 #0F0

maroon rgb(50%,0%,0%) rgb(128,0,0) #800000 #800

navy rgb(0%,0%,50%) rgb(0,0,128) #000080 #008

olive rgb(50%,50%,0%) rgb(128,128,0) #808000 #880

purple rgb(50%,0%,50%) rgb(128,0,128) #800080 #808

red rgb(100%,0%,0%) rgb(255,0,0) #FF0000 #F00

silver rgb(75%,75%,75%) rgb(192,192,192) #C0C0C0 #BBB

teal rgb(0%,50%,50%) rgb(0,128,128) #008080 #088

white rgb(100%,100%,100%)

rgb(255,255,255) #FFFFFF #FFF

yellow rgb(100%,100%,0%) rgb(255,255,0) #FFFF00 #FF0

Les styles de police

font-family : définit un nom de police ou une famille de police <nom> ou

<famille>

police précise (Arial, Times, Helvetica...) ou famille (serif, sans-serif, cursive,

fantasy, monospace) H3 {font-family: Arial}

P {font-weight: bold}

font-weight : définit l'épaisseur de la police normal ou bold ou bolder ou lighter ou

valeur numérique soit (100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)

font-style : définit le style de l'écriture normal ou italique ou oblique

H3 {font-style: italic}

Les styles de police

font-size : définit la taille de la police xx-small ou x-small ou small ou médium ou

large ou x-large ou xx-large ou larger ou smaller ou taille précise en points (pt),

inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

font-variant : définit une variante par rapport à la normale normal ou small-caps

P {font-size: 12pt}

font : raccourci pour les différentes propriétés de police

P {font-variant: small-caps}

{font: bold italic}

Les styles du texte

text-align : définit l'alignement du texte left ou center ou right

text-indent : définit un retrait dans la première ligne d'un bloc de texte

souvent utilisé avec <P>, n'oubliez pas dans ce cas </P>. spécifié en inches

(in) ou en centimètres (cm) ou en pixels (px)

H1 {text-align: center}

text-decoration : définit une décoration (?) du texte, soit barré, clignotant, etc. blink ou underline ou line-through ou overline ou none

P {text-indent: 1cm}

A:visited {text-decoration: blink }

Les styles du texte

text-transform : définit la casse du texte (majuscule, minuscule)

uppercase (met les caractères en majuscules) ou

lowercase (met les caractères en minuscules) ou

capitalize (met le premier caractère en majuscule)

Color : définit la couleur du texte par exemple en hexadécimal

P {text-transform: uppercase}

word-spacing : définit l'espace entre les mots en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

P {word-spacing: 5pt}

H3 {color: #000080}

Les styles du texte

letter-spacing : définit l'espace entre les lettres spécifié en points (pt), inches (in),

centimètres (cm), pixels (px) ou pourcentage (%)

P {line-height: 10pt}

line-height : définit l'interligne soit l'espace entre les lignes du texte en

points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

P {letter-spacing: 2pt}

Les styles du texte

Width : détermine la longueur d'un élément de texte ou d'une image en points

(pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

{white-space: pre}

white-space : espace ou blanc normal ou pre ou nowrap PRE

H1 {heigh: 100px}

height : détermine la hauteur d'un élément de texte ou d'une image en points

(pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

H1 {width: 200px}

Les arrière-plans background-color : définit la couleur de l'arrière-plan couleur (par exemple en hexadécimal) ou transparent

P {background-image: image.gif; background-repeat: repeat-4}

background-repeat : définit la façon de répéter l'image d'arrière-plan repeat ou no-repeat ou repeat-x (x = nombre de répétitions horizontales) ou repeat-y (y = nombre de répétitions verticales)

BODY {background-image: image.gif}

background-image : définit l'image de l'arrière-plan URL de l'image

H1 {background-color: #000000}

Les arrière-plans background-attachment : spécifie si l'image d'arrière-plan reste fixe avec les déplacements de l'écran scroll ou fixed

P {background: image.gif fixed repeat}

background : raccourci pour les différentes propriétés d'arrière-plan

BODY {background-image: img.gif; background-position: right top}

background-position : spécifie la position de l'image d'arrière-plan par rapport au coin supérieur gauche de la fenêtre {1, 2} {top ou center ou bottom , left ou center ou right} ou en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

BODY {background-image: image.gif; background-attachement: fixed}

Les marges margin-top: détermine la valeur de la marge supérieure en unité de longueur ou auto

{ margin-bottom: 5px }

margin-bottom :détermine la valeur de la marge inférieure en unité de longueur ou auto

{ margin-right: 5px }

margin-right : détermine la valeur de la marge droite en unité de longueur ou auto

{ margin-top: 5px}

Les marges

margin-left : détermine la valeur de la marge gauche en unité de longueur ou auto

Margin : regroupe les différentes propriétés de la marge

{ margin-left: 5px }

Les bords et les "enrobages" border-top-width : donne l'épaisseur du bord supérieur thin ou medium ou thick ou spécifié par l'auteur

H3 {border-bottom-width: thick}

border-bottom-width: donne l'épaisseur du bord inférieur thin ou medium ou thick ou spécifié par l'auteur

H3 {border-right-width: medium}

border-right-width: donne l'épaisseur du bord droit thin ou medium ou thick ou spécifié par l'auteur

H3 {border-top-width: thin}

Les bords et les "enrobages" border-left-width : donne l'épaisseur du bord gauche thin ou medium ou thick ou spécifié par l'auteur

H3 {border-color: yellow}

border-color : détermine la couleur de la bordure

border-width : regroupe les différentes propriétés de border-width

H3 {border-left-width: 0.5cm}

Les bords et les "enrobages" border-style : détermine le style du trait de la bordure none ou solid ou dotted ou dashed ou double ou groove ou ridge ou inset ou outset

H3 {padding-top: 3px}

padding-top : valeur de remplissage haut entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

border : regroupe toutes les propriétés des bords

{border-style: solid dashed}

Les bords et les "enrobages" padding-right : valeur de remplissage droite entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

H3 {padding-left: 3px}

padding-left : valeur de remplissage gauche entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

H3 {padding-bottom: 3px}

padding-bottom : valeur de remplissage bas entre l'élément et le bord en points (pt), inches (in), centimètres (cm), pixels (px) ou pourcentage (%)

H3 {padding-right: 3px}

Les listes

list-style-type : détermine le type de puces ou de numérotation disc ou circle ou square decimal ou lower-roman ou upper-roman ou lower-alpha ou upper-alpha

UL {list-style-position: inside}

list-style-position : spécifie si les puces sont à l'intérieur ou à l'extérieur du texte inside ou outside

OL {list-style-image: image.gif}

list-style-image : permet de remplacer les puces par une image url ou none

OL {list-style-type: square}

list-style : regroupe toutes les propriétés de liste

Les CSS: pourquoi

Documents

Transcript of Les CSS: pourquoi