Css C

Smart Studing
1. Concept et utilit
49
1.1 Prsentation. 49
1.2
49
Concept 49
..
49
1.3 Utilit et
50
avantages..
50
2. Dfinition d'un style.
50
3. Styles internes
3.1 A l'i rieur des balises <head></head>
3.2 A l'i rieur des balises <body></body>
4. Styles externes
51
5. Les classes et les ID.
51
5.1 Notion de classes.

5.2 Notions des Pseudo
52
Classes
52
5.3 Notion des
52
51
id
6. <div> et <span>
6.1 Utilit.
6.2
52
53
<div> 53
53
6.3
54
<span>.. 54
7. Positionner avec CSS

7.1 Position absolue ou
relative
7.2 Positionner du
texte..
7.3 Positionner une image.
54
7.4 Superposer du texte sur une
fond
image.
8. Liste des proprits..
8.1 Les styles de
police
8.2 Couleurs et
55
8.3 Les propri s du
55
texte..
55
8.4 Les propri s des
56
botes..
56
8.5 Les
57
listes 58
.
8.6 Les
units
58
1. Concept et utilit
1.1Prsentation
Les feuilles de styles (en anglais Cascading Style Sheets) permettent de crer des prsentations
surprenantes, des mises en pages trs prcises en modifi
les balises existantes, ou en crant de
nouvelles dont les propri s sont votre choix.

La spcifi
ion CSS 1 date de 1996. Elle est supporte par les navigateurs partir des versions
suivantes :
Mozilla 1.1 et son descendant FireFox
Netscape 6
Internet Explorer 5.5
Opera 4
Cependant, ces navigateurs grent souvent une mme feuille de style de manire diff ente surtout si
l'on utilise des lments de la spcifi
ion CSS 2 sortie en mai 1998.
Dans tous les cas, aprs avoir crit une feuille de style, il conviendra donc de vrifi l'apparence du
document avec un maximum de navigateurs. Enfi et surtout, l faut s'assurer imprativement que le
document reste lisible mme sans la feuille de style.
1.2 Concept
Dans un document d'une certaine importance, il arrive frquemment que l'on attribue cert ns
lments des caractri iques de mise en forme identiques. Par exemple, les noms de chapitres seront
mis en police Arial, en gras et en couleur bleu.
On peut imaginer que l'on puisse donner cette dfi tion de mise en forme un nom soit "titre" et qu'
chaque nouveau chapitr plutt que d'crire chaque fois le nom du titre et puis de devoir le mettre en
Ari
gras, bleu, l'on puisse dire l'ordinateur, nom du chapitre mais dans la mise en forme que j'
dfi sous le nom de "titre". Cette dfi tion de mise en forme particulire, on va l'appeler feuille de
style.
Le concept de feuilles de style est n. Il existait dj dans les tr tements de texte comme dans Word. Il
ne restait plus qu' coupler le concept au langage HTML par des propri s spcifiques.
Prcisons pour terminer que les feuilles de style ne sont pas une composante directe du langage HTML
mais un dveloppement part dans la publication de pages Web.
1.3 Utilit et avantages
Sparation du contenu et de la mise en forme.
Cohsion de la prsentation 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
plutt que de devoir changer un grand nombre de balises.
Un "langage" comprhensible, simple et logique par rapport au HTML.
Rduire le temps de chargement des pages.
Palier certaines insuffisances du langage HTML (contrle des polices, contrle de la distance
entre les lignes, contrle des marges et des indentations.
Permettre le positionnement au pixel prs du texte et/ou des images.
2. Dfi tion d'un style
La dfi tion de base d'un style est simple :
balise { proprit de style: valeur; proprit de style: valeur }
Exemple :
<css>h3 { font-family: Arial; ont-style: italic }</css> 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.
Remarques :
Les proprits de style sont entoures par des {.
Le couple proprit "style/valeur" est spar par un double-point ":".
Chaque couple proprit "style/valeur" est termin par un point-virgule ";".
Il n'y a pas de limite pour le nombre de couples "proprits de style/valeur".
L'espace entre proprits de style et valeur n'est pas obligatoire mais aide fortement la
lisibilit du code source.
Pour la lisibilit toujours, vous pouvez crire vos styles sur plusieurs lignes :
<css>h3 {
font-family: Arial;
font-style: italic;
} </css>
EL GHATTAS
Partie III : Les feuilles de style CSS
49
On peut attribuer plusieurs valeurs une mme proprit. Dans ce cas, on sparera les
diff entes valeurs par des virgules.
<css>h3 {
font-family: Arial, Helvetica, sans-serif;
} </css>
On peut attribuer un mme style plusieurs balises.
<css>h1, h2, h3 {
font-family: Arial;
font-style: italic;
} </css>
3. Styles internes
Il faut maintenant incorporer les styles dans le fichier HTML. Commenons par le plus simple, soit
l'incorporation l'i rieur d'une page.
3.1 A l'i
rieur des balises <head></head>
Cette faon de procder est de loin la plus commune et la plus logique. D'abord parce que les balises
<head> contiennent des informations pour le navigateur et les feuilles de style appartiennent celles-ci.
Ensuite parce que l'on rejoint ainsi l'essence mme des feuilles de style qui est de sparer les lments
de mise en forme du contenu.
<html> <head> <style type="text/css"> </style> </head> <body> ... </body> </html>
La balise <style> avertit le navigateur que l'on va utiliser des feuilles de style.
L'attributtype="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style
sheets (css).
La balise html de commentaires  empche que les navigateurs qui ne connaissent
pas les feuilles de style, tentent d'i erprter ces instructions. Les informations l'i rieur des
tags de commentaires seront ignores par ces navigateurs.
Pour vos propres commentaires propos des feuilles de style, on utilisera la convention
dsormais classique de /* commentaires */.
Exemple :
<html>
<head>
<style type="text/css" >
h1 { font-style: italic
; color: green }
</style>
</head>
<body>
<h1>ISTA Errachidia</h1>
</body>
</html>
Rsultat :
3.2 A l'i
rieur des balises <body></body>
On peut aussi utiliser, au coup par coup, les feuilles de style dans le corps (body) du document. Cette
faon de faire nous paratllogique et peu conforme l'esprit des feuilles de style qui est de dfi r un
style dtermin valable pour la globalit du document. Mais elle existe pour quelques utilisati
spcifiques.
Exemple :
EL GHATTAS
50
<html>
<head>
<title>Exemple</title>
</head>
<body>
center { font-size:27 ; color: green }
</style>
<center>ISTA Errachidia</center>
</body></html>
Rsultat :
4. Styles externes
C'est dj bien de pouvoir dfi r une prsentation de style valable pour une page (styles internes). Mais
CSS nous propose mieux. Dfi r une prsentation de style valable pour plusieurs pages et mme pour
toutes les pages d'un site. Ce qui est possible, en crant une page externe qui regroupera toutes les
feuilles de style, et en reliant chaque page cette page de style.
On cre d'abord, dans le rpertoire du sit un fichier avec l'extension .css soit styles.css qui contiendra
toutes les feuilles de style. <html> <head> --- les diffrentes feuilles de style --- </head>
<body> </body> </html> Ensuit on cre une page normale soit page.html (bien entendu dans le
mme rpertoire que le fichier styles.css). <html> <head> <link rel="stylesheet" type="text/css"
href="styles.css"> <head>
La balise <link> avertit le browser qu'il faudra raliser un lien.
L'attributrel="stylesheet" prcise qu'il y trouvera une feuille de style externe.
L'attributtype="text/css" prcise que l'information est du texte et du genre cascading style
sheets (css).
L'attribut classique de lien href=" ... " donne le chemin d'accs et le nom du fichier lier.
5. Les classes et les ID
5.1 Notion de classes
Mais on dsire parf s affecter des styles diff ents une mme balise. Pas de problmes, les feuilles de
style vous proposent la solution des classes [class].
La syntaxe est ici aussi des plus simple.
La dfi tion d'un style tait balise { propri de style: valeur }
Elle devient :balise.nom_de_classe { proprit de style: valeur } remarquez le point entre balise
et nom_de_classe
Ou, comme la mention de la balise est facultative,.nom_de_classe { proprit de style: valeur }
Attention : L'emploi du point (.) devant le nom de classe est indispensable.
Pour appeler l'eff de style dans le document, on ajoute le nom de la classe la balise. <bali
class="nom_de-classe"> .... </balise>
Exemple :
Je souhaite mettre ce qui est important dans le texte en gras et en vert. Je cre la classe .important :
<html>
<head>
.important { font-weight: bold; color: green }
</style>
</head>
<body>
<h1 class="important" >Assalam alaykom.</h1> Bienvenue lInstit Spcialis de Technologie
Applique <u class="important">Mohamed El Fassi Errachidia. </u>
</body></html>
EL GHATTAS
51
Rsultat:
5.2 Notions des Pseudo Classes

Une pseudo classe est un ensemble d'lments qui rpondent un mme crit e de contexte forme.
Cette dfi tion ne s'applique concrtement qu' un cas particulier, celui de la balise A, la balise des
liens.
Celle ci peut en eff connatre plusieurs contextes de formes selon que le lien est inactif, visit ou en
train d'tre visit
Concrtement on peut dfi r alors pour chacun des tats de la balise une mise en forme particulire,
voici comment:
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;}
5.3 Notion des id
Comme la convention nom/point/nom est utilise aussi en Javascri , il a fallu trouver une autre
convention d'crit e lorsqu'on dsire utiliser les feuilles de style avec du Javascri . Ce sont les id, aussi
appels les identifi

s. Les id fonctionnent exactement comme les classes. Pas mieux, pas plus. C'est la
mme chose!
La syntaxe est :<style type= text/css >#nom_de_ID { proprit de style: valeur }</style>
Et pour l'appeler : <balise id="nom_de_ID"> .... </balise>
Notons qu'on ne pourra effectuer qu'un seul appel #nom_de_ID par page. Ainsi,
Pour #essentiel{ ... }
<P id=essentiel> est correct.
Mais si on rencontre dans la mme page
<H1 id=essentiel> ce n'est plus correct !
Exemple :
<html>
<head>
<title>Exemple</title>
<style type="text/css">
#rouge {color:red}
</style>
</head>
<body>
<h1 id="rouge">ISTA Errachidia</h1>
</body>
</html>
Rsultat :
EL GHATTAS
52
Si vous pensez utiliser des feuilles de style, mais sans vous compliquer la vie avec des scri s, oubliez au
plus vite id et utilisez exclusivement les classes. Si par contre vous souhaitez utiliser des scri s avec les
feuilles de style pour faire du DHTML par exemple, la notion de id vous sera alors indispensable.
6 : <div> et <span>
6.1 Utilit
Il fallait penser un systme pour "dconnecter" certains morceaux de paragraphe ou plusieurs
paragraphes de cette logique d'crit
e avec des feuilles de style. Ce sont respectivement les balises div
etspan qui cres ainsi des petits blocs particuliers dans le document sans devoir repasser par les
lments structurels du HTML classique. Notons que span et div s'utilisent toujours avec les classes et les
id.
6.2 <div>
<div> est une balise de division qui permet de dfi r un bloc de texte particulier.
Procdures :
Intgrer chaque grande portion de document dans une balise div particulire.
Utiliser une feuille de style pour chaque div.
Exemple :
<head>
.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>
Rsultat :
Il est noter que Netscape ne supporte pas l'imbrication de div (et gnralement des balises de bloc) et
les gre trs mal. Les DIV en cascades sont donc vit .
6.3 <span>
<span> est une balise de marquage, qui va considrer une petite portion particulire de texte. Elle va
servir mettre en valeur des cit ions, des exemples, des extraits ...
On peut l'utiliser de la mme manire que div avec des feuilles de style.
Ainsi,
je voulais crire :
Le temps est
beau
Le code serait
.element {font-size: x-large; color: navy}
</style>
Le temps est <span class=element>beau</span>
EL GHATTAS
53
7. Positionner avec CSS

Quel concepteur de pages Web n'a pas laiss chapper quelques jurons bien sentis en essayant, grand
renfort de tableaux, de placer prcisment du texte ou une image l o il le dsirait
Le miracle est arriv ! Outre le balise <LAYER> (mais qui n'est comprise que par Netscape 4.0), il est
dsormais possible de positionner, au pixel prs, du texte ou une image avec les feuilles de style.
Notons que ce positionnement n'est possible que sous les versions 4 de Netscape et d'Explorer. Et que
cette technique est encore un peu hasardeuse ce jour, surtout sur le plan de la compati lit avec les
deux browsers susnomms.
7.1 Position absolue ou relative
La position absolue {positi
absolute} se dtermine par rapport au coin suprieur gauche de la fentre
du navigateur. Les coordonnes de ce point sont top = 0 et left = 0. Les coordonnes d'un point
s'expriment en pixels, de haut en bas pour top et de gauche droite pour left.
La position relative {positi
exemple un lment du code Html.
relative} se dtermine par rapport d'autres lments de la page, par
Prcisons que l'on utilisera presque toujours le positionnement absolu car plus facile et plus sr.
7.2 Positionner du texte
Exemple : Plaons en position absolue le texte "Publication Html" 10 pixels du haut de la fentre (top)
et 100 pixels gauche (left).
<html>
<head>
.pub{position: absolute; top: 10px; left: 100px;
color: green; font-size: x-large; font-weight: bold;}
</style>
</head>
<body>
<div class=pub> ISTA Errachidia </div>
</body>
</html>
Rsultat :
EL GHATTAS
54
7.3 Positionner une image

Exemple : Plaons l'image logofppt.jpg en position absolue 50 pixels de haut de la fentre (top) et
100 pixels gauche (left). Les dimensions de l'image sont width=110 et height=70.
<html>
<body>
<span style="position: absolute; top: 50px; left: 100px; width: 110px; height: 70px;">
<img src="c:\logofppt.jpg">
</span>
</body>
</html>
Note : Spcifi
oujours les propri s width et heigth avec les feuilles de style car par dfaut, Netscape
4.0 et Explorer 4.0 ne ragissent pas de la mme faon.
Rsultat :
7.4 Superposer du texte sur une image

Exemple : Reprenons l'image logofppt.jpg et on y superposera labrviation OFPPT juste en dessous.
<html>
<body>
<span style="position: absolute; top: 50px; left: 100px; width: 110px; height: 70px;">
<img src="htmlplus.gif">
</span>
<span style="position: absolute; top: 121px; left: 134px; color: blue; font-size: x-small; ontweight: bold;">
OFPPT
</span>
</body>
</html>
Rsultat :
EL GHATTAS
55
8. Liste des proprits

La liste complte des propri s et recommandations concernant les feuilles de style version 1, peut tre
trouve l'adresse http://www.w3.org/pub/WWW/TR/REC-CSS1.
8.1 Les styles de poli
font-family : [[ famille | famille-gnrique ],]* [ famille | famille-gnrique ]
Une famille est un nom de police comme Helvetica ou Times. Une famille-gnrique peut prendre les
valeurs suivantes : serif, sans-serif, cursive, fantasy ou monospace. La premire famille applicable dans
la liste est utilise. Par exemple :
font-style : normal | italic | oblique
Permet de spcifi la dclinaison de la police.
font-variant : normal | small-caps
Permet de spcifi une variante de la police. La variante small-caps est la variante dite "petit
majuscules".
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 |
800| 900
Permet de spcifi l'encrage.
font-size : taille-absolue | taille-relative | longueur | pourcentage
Permet de spcifi la taille de la police. Les valeurs dfi es pourtaille-absoluesont : xx-small, x-small,
small, medium, large, x-large, xx-large. Les valeurs dfi es pourtaille-relative sont : larger et smaller.
Les longueurs sont exprimes en pt, em ou ex. Pour ces deux dernires c'est relativement la taille de
l'lment parent.
font : [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family
Qui permet de tout spcifi d'un seul coup. Par exemple : font:talic bold 12pt/14pt Helvetica.
8.2 Couleurs et fond
color : couleur
Permet de spcifi la couleur de l'encre. Il existe 16 couleurs prdfi es : aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white et yellow. Sinon il est possible
d'utiliser le modle RGB en 4096 couleurs (3 x 16) ou en 16777216 couleurs (3 x 256). Par exemple:
h1 { color: #ff0000; /* rouge */ }.
background-color : couleur | transparent
Permet de spcifi la couleur du fond. La valeur par dfaut est transparent.
background-image :url | none
Permet de spcifi l'url de l'image utiliser comme fond.
background-repeat : repeat | repeat-x | repeat-y | no-repeat
Spcifie comment tapisser avec l'image de fond : repeat permet de tapisser compltement, epeat-x
tapisse par recopie horizontale uniquement, epeat-y par recopie verticale uniquement et no-repeat ne
tapisse pas.
background-attachment : scroll | fixed
Spcifie l'attachement de l'image : scroll indique qu'elle se dplace avec le texte, sinon qu'elle est fi
sur le fond de la fentr
background-position : [ pourcentage | longueur ]{1,2} | [ top | center | bottom] || [ left |
center | right ]
Spcifie la position initiale de l'image avant application de l'algorithme de tapissage. Le pourcentage est
utilis pour placer un point relatif de la source (image de fond) dans le point correspondant de la
destination (fentre). La longueur est utilise pour placer le point suprieur gauche de l'image une
certaine position mesure depuis le point suprieur gauche de la fentre. Pour le reste les valeurs sont
assez explicites.
background : background-color || background-image || background-repeat || backgroundattachment || background-position
EL GHATTAS
56
8.3 Les proprits du texte

word-spacing : normal | longueur
Permet de spcifi de l'espacement supplmentaire entre mots du texte.
letter-spacing : normal | longueur
Permet de spcifi de l'espacement supplmentaire entre caractres.
text-decoration : none | [ underline || overline || line-through || blink ]
Permet d'ajouter de la dcoration au texte. underline permet de souligner, overline de faire apparatre
une ligne au-dessus du texte, line-through de barr et blink de faire clignoter le texte.
vertical-align : baseline | sub | super | top | text-top | middle | text-bottom | bottom |
pourcentage
Permet de spcifi le type de l'alignement souhait pour l'lment. L'alignement peut-tre relatif
l'lment parent : baseline, sub, super, ext-top, middle et text-bottom ou aux autres lments de la
ligne courante : top et bottom. Ce qui donne :
baseline
Aligne la ligne de base de l'lment avec celle de son anctre.
middle
Aligne le milieu vertical de l'lment avec la ligne de base de son anctre additionne de la moiti de la
hauteur de sa police.
sub
Positionne l'lment en "indice".
super
Positionne l'lment en "puissance".
text-top
Aligne le plafond de l'lment avec le plafond de la police de son anctre.
text-bottom
Aligne le plancher de l'lment avec le plancher de la police de son anctre.
top
Aligne le plafond de l'lment avec le plus haut plac des lments de la ligne.
bottom
Aligne le plancher de l'lment avec le plus bas plac des lments de la ligne.
text-transform : capitalize | uppercase | lowercase | none
Permet d'appliquer certaines transformations sur le texte (capitalize : mise en majuscule de la premire
lettre de chaque mot, uppercase : mise en majuscule de toutes les lettres, lowercase : mise en
minuscule de toutes les lettres).
text-align : left | right | center | justify
Permet de spcifi l'alignement du texte dans la boite qui le contient.
text-indent : longueur | pourcentage
Permet de spcifi l'indentation de la premire ligne de texte.
line-height : normal | nombre | longueur | pourcentage
Permet de spcifi la distance entre les lignes de base de deux lignes adjacentes. Le nombre correspond
un coeffient multiplicateur appliqu la taille de la police, de plus c'est le coeffient qui est hrit
contrairement au pourcentage.
8.4 Les proprits des bot
margin-top : longueur | pourcentage | auto
Permet de spcifi la marge suprieure.
margin-right : longueur | pourcentage | auto
Permet de spcifi la marge droit
margin-bottom : longueur | pourcentage | auto
Permet de spcifi la marge infrieure.
margin-left : longueur | pourcentage | auto
Permet de spcifi la marge gauche.
margin : [ longueur | pourcentage | auto ]{1,4}
Permet de spcifi les quatre d'un seul coup.
padding-top : longueur | pourcentage | auto
Permet de spcifi le bourrage suprieur.
EL GHATTAS
57
padding-right : longueur | pourcentage | auto

Permet de spcifi le bourrage droit.
padding-bottom : longueur | pourcentage | auto
Permet de spcifi le bourrage infrieur.
padding-left : longueur | pourcentage | auto
Permet de spcifi le bourrage gauche.
padding : [ longueur | pourcentage | auto ]{1,4}
Permet de spcifi les quatre d'un seul coup.
border-top-width : thin | medium | thick | longueur
Permet de spcifi le bord suprieur.
border-right-width : thin | medium | thick | longueur
Permet de spcifi le bord droit.
border-bottom-width : thin | medium | thick | longueur
Permet de spcifi le bord infrieur.
border-left-width : thin | medium | thick | longueur
Permet de spcifi le bord gauche.
border-width : [ thin | medium | thick | longueur ]{1,4}
Permet de spcifi les quatre dimensions prcdentes en une seule ligne.
border-color : couleur{1,4}
Permet de spcifi les couleurs des quatre bords.
border-style : [ none | dotted | dashed | solid | double | groove | ridge | inset | outset
]{1,4}
Permet de spcifi le style du bord.
border-top : border-top-width || border-style || couleur
Permet de tout spcifi pour le bord suprieur.
border-right : border-top-width || border-style || couleur
Permet de tout spcifi pour le bord droit.
border-bottom : border-top-width || border-style || couleur
Permet de tout spcifi pour le bord infrieur.
border-left : border-top-width || border-style || couleur
Permet de tout spcifi pour le bord gauche.
border : border-width || border-style || couleur
Permet de spcifi les mmes valeurs pour les quatre bords.
width : longueur | pourcentage | auto
Permet de spcifi la largeur de la bot
height : longueur | pourcentage | auto
Permet de spcifi la hauteur de la bot
float : left | right | none
Permet d'indiquer de placer l'lment d'un ct ou de l'autre de la fentre en laissant le texte s'tendre
de l'autre.
clear : none | left | right | both
Permet d'indiquer que l'on ne dsire pas d'lment flottant d'un ct ou des deux de la bot
8.5 Les li es
display : block | inline | list-item | none
Permet d'indiquer que l'lment est de type bloc (block), dans le flot normal du texte (i ne), ou un item
appartenant une liste (list-item).
white-space : normal | pre | nowrap
Permet de spcifi le traitement appliquer aux espacements.
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none
Permet de spcifi l'apparence des marqueurs d'item dans les listes.
list-style-image : url | none
Permet de spcifi une image comme marqueur d'item dans les listes.
list-style-position : inside | outside
Permet de spcifi si le marqueur d'item est contenu ou non dans l'item.
list-style : list-style-type || list-style-position || list-style-position
Permet de tout spcifi d'un seul coup.
8.6 Les units
longueur
Les longueurs sont constitues d'un signe optionnel immdiatement suivi d'un nombre (avec ou sans
point) et immdiatement suivi d'une unit constitue de deux lettres. Il existe deux type de longueur :
EL GHATTAS
58
absolues ou relatives. Les longueurs relatives sont relatives une dimension de rfrence. Les units de
longueurs relatives sont :
em
Reprsentant la hauteur d'un caractre de la police.
ex
Reprsentant la hauteur du caractre x de la police.
px
Reprsentant des pixels, donc relatif la finesse du priphrique.
Les lments contenus dans un lment dimensionn par une longueur relative n'hrite que de la valeur
aprs application du calcul relatif.
Les units de longueur absolues sont :
in
le pouce qui vaut 2,54 cm.
cm
le centimtre.
mm
le millimtre.
pt
le point qui vaut 1/72 du pouce.
pc
le pica qui vaut 12 points.
pourcentage
Les pourcentages sont constitus d'un signe optionnel immdiatement suivi d'un nombre (avec ou sans
point) et immdiatement suivi du signe %. L'hritage ne transmet que la valeur aprs calcul.
couleur
Les couleurs peuvent tre spcifies en utilisant les 16 symboles prdfi s, une reprsentati
hexadcimale sur 12 bits ou 24 bits. De plus il est possible d'utiliser la notation rgb(r, v, b) o r, v et b
sont soit des nombres enti s (0-255) soit des pourcentages (0%-100%); mais dans cette notation tout
dpassement de capacit provoquera une troncature.
url
Les urls sont spcifies comme suit
url (chane de caractres). Attention : les urls relatives sont
interprtes relativement l'URL de la feuille de style et non pas celle du document.
EL GHATTAS
59

Css C

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css C

Transféré par

Droits d'auteur :

Formats disponibles

Smart Studing

2. Dfinition d'un style.

5. Les classes et les ID.

5.1 Notion de classes.

5.3 Notion des

7. Positionner avec CSS

7.4 Superposer du texte sur une

8. Liste des proprits..

8.1 Les styles de

8.3 Les propri s du

8.4 Les propri s des

les balises existantes, ou en crant de

nouvelles dont les propri s sont votre choix.

Partie III : Les feuilles de style CSS

Partie III : Les feuilles de style CSS

Partie III : Les feuilles de style CSS

5.2 Notions des Pseudo Classes

appels les identifi

Partie III : Les feuilles de style CSS

Partie III : Les feuilles de style CSS

7. Positionner avec CSS

relative} se dtermine par rapport d'autres lments de la page, par

Partie III : Les feuilles de style CSS

7.3 Positionner une image

7.4 Superposer du texte sur une image

Partie III : Les feuilles de style CSS

8. Liste des proprits

Partie III : Les feuilles de style CSS

8.3 Les proprits du texte

Partie III : Les feuilles de style CSS

padding-right : longueur | pourcentage | auto

Partie III : Les feuilles de style CSS

url (chane de caractres). Attention : les urls relatives sont

interprtes relativement l'URL de la feuille de style et non pas celle du document.

Partie III : Les feuilles de style CSS

Vous aimerez peut-être aussi