Css Support

Bourg-en-Bresse Deuxime anne GI
Anne scolaire 2003-2004 Les feuilles de style en CSS
Les feuilles de style en CSS
1
1.1
Feuilles de style
Principe
Permet de sparer le contenu (structure) et la prsentation Utile pour la visualisation avec diffrents mdia Possibilit d'appeler des styles externes
1.2
lments, classes et instances
Application un lment <HEAD> <STYLE type="text/css"> H1 {border-width: 1; border-style: solid; text-align: center} </STYLE> </HEAD> Possibilit de grouper plusieurs lments <HEAD> <STYLE type="text/css"> H1, H2, H3 {border-width: 1px; border-style: solid; text-align: center} </STYLE> </HEAD> Application une classe de tous les lments <HEAD> <STYLE type="text/css"> .left { float: left; } </STYLE> </HEAD> <BODY> <H1 class="myclass"> This H1 is affected by our style </H1> <H1> This one is not affected by our style </H1> </BODY> Application la classe d'un lment <HEAD> <STYLE type="text/css"> H1.myclass { border-width: 1px; border-style: solid; text-align: center } </STYLE> </HEAD> <BODY> <H1 class="myclass"> This H1 is affected by our style </H1> <H1> This one is not affected by our style </H1> </BODY> Application une instance unique (avec id) <HEAD> <STYLE type="text/css"> #myid {border-width: 1; border: solid;
Eric Gurin eric.guerin@liris.cnrs.fr
26 fvrier 2004
1/7
Bourg-en-Bresse Deuxime anne GI text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> This H1 is not affected </H1> <H1 id="myid"> This H1 is affected by style </H1> <H1> This H1 is not affected </H1> </BODY> Application dans un contexte prcis H1 EM { color: red } Toutes les combinaisons sont possibles DIV P { font: small sans-serif } .reddish H1 { color: red } #x78y CODE { background: blue } DIV.sidenote H1 { font-size: large } Commentaires : comme en C (pas d'imbrication !) H1 { color: red } /* les titres en rouge */ Utilisation avec DIV et SPAN <HEAD> <STYLE type="text/css"> DIV.Abstract { text-align: justify } </STYLE> </HEAD> <BODY> <DIV class="Abstract"> <P>The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products. <P>Chieftain replaces the Commander range, which will remain on the price list until further notice. </DIV> </BODY> Les pseudo-classes A:link { color: red } /* unvisited link */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */ P:first-line { font-variant: small-caps } P:first-letter { font-size: 200%; float: left }
1.3
Les types de mdia
Permet un affichage diffrent suivant le mdia <HEAD> <STYLE type="text/css" media="projection"> H1 { color: blue} </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE> <STYLE type="text/css" media="aural"> A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)} </STYLE> </HEAD>
26 fvrier 2004
2/7
1.4
Les styles externes
Permet de factoriser les styles Permet de donner des styles alternatifs Un style donn par l'auteur L'utilisateur en slectionne un autre Se fait grce LINK et href , type et rel href : l'URI type : langage rel au choix : "stylesheet" : style persistent <LINK href="mystyle.css" rel="stylesheet" type="text/css"> "stylesheet" et title dfini : style prfr <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css"> "alternate stylesheet" et title dfini : style alternatif <LINK href="mystyle.css" title="medium" rel="alternate stylesheet" type="text/css"> Cascade : application de plusieurs fichiers de style un mme document Il suffit qu'il aient le mme title Exemple <LINK rel="alternate stylesheet" title="compact" href="small-base.css" type="text/css"> <LINK rel="alternate stylesheet" title="compact" href="small-extras.css" type="text/css"> S'il n'y a pas de title (style persistent), la cascade est automatique Rendre compatible avec les anciens navigateurs En mettant en commentaire <STYLE type="text/css"> <!-H1 { color: red } P { color: blue} --> </STYLE> Chargement de style grce une en-tte HTTP Link: <http://www.acme.com/corporate.css>; REL=stylesheet
Les caractres
Couleur : color Mlange RVB avec #RVB ou #RRVVBB Mlange RVB avec rgb(255,0,0) ou rgb(100%,0%,0%) Une couleur prdfinie : "aqua" , "black" , "blue" , "fuchsia" , "gray" , "green" , "lime" , "maroon" , "navy" , "olive" , "purple" , "red" , "silver" , "teal" , "white" , et "yellow" Taille de la fonte : fontsize "xx-small" "x-small" "small" "medium" "large" "x-large" "xx-large" "larger" (relatif) "smaller" (relatif) "longer" (relatif)
26 fvrier 2004
3/7
Bourg-en-Bresse Deuxime anne GI Famille de la fonte : font-family "serif" "sans-serif" "cursive" "fantasy" Ou directement le nom Gras de la fonte : font-weight "normal" "bold" "bolder" "lighter" Style de la fonte : font-style "normal" "italic" "oblique"
Le texte
Alignement vertical : vertical-align "baseline" "sub" "super" "top" "text-top" "middle" "bottom" "text-bottom" valeurs en % Casse : text-transform "capitalize" "uppercase" "lowercase" "none" Dcoration : text-decoration "underline" "overline" "line-through" "blink" Ombre : text-shadow Liste de valeurs Exemples H2 { text-shadow: 3px 3px 5px red } H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } Alignement horizontal : text-align "left" "right" "center" "justify" Indentation : text-indent Valeur absolue ou relative
26 fvrier 2004
4/7
Les botes
Border Largeur : border-width ( "thin" , "medium" , "thick" ou dimension) Couleur : border-color Style : border-style ( "none" , "hidden" , "dotted" , "dashed" , "solid" , "double" , "groove" , "ridge" , "inset" , "outset" ) Possibilit de restriction top , bottom , left ou right avec les proprits border-top-style par exemple Possibilit de raccourcis : border , border-top , . . . Padding padding-left , padding-right , padding-top , padding-bottom padding affecte les quatre la mme valeur Marges margin-left , margin-right , margin-top , margin-bottom margin affecte les quatre la mme valeur
4.1
Dimensions
Largeur : width Possibilit de combiner avec une autre proprit : border-width Hauteur : height Idem
Positionnement
position "static" "relative" "absolute" "fixed" top right bottom left float pour faire flotter des objets
26 fvrier 2004
5/7
Bourg-en-Bresse Deuxime anne GI "left" "right" "none" clear pour empcher de faire dborder les flottants
Fond
Couleur de fond background-color Image de fond background-image Valeur : url(image.png) background-repeat "repeat" "repeat-x" "repeat-y" "no-repeat" background-attachment "scroll" "fixed" background-position Un pourcentage, une longueur (simple ou double) Combinaison des deux valeurs suivantes : "top" , "center" , "bottom" "left" , "center" , "right"
6.1
Raccourcis
background Permet de dfinir tous les attributs en mme temps : couleur, image, repeat, attachment, position
Affichage
Type d'affichage : display "block" : gnre un bloc "inline" : ne gnre pas de bloc, l'intrieur d'un paragraphe par exemple "none" : aucun affichage, aucune bote n'est gnre "run-in" ou "compact" : block ou inline suivant le contexte Il en existe d'autres (pour les listes par exemple) Visibilit : visibility "visible" : visible "hidden" : cach (mais la bote est gnre, donc elle est remplace par de l'espace)
Gnration de contenu
Uniquement dans CSS2 Pseudo-classes :before et :after Proprit content : ajout de contenu Gestion de compteurs counter-reset counter-increment Exemple : numrotation automatique de titres H1:before { content: "Chapitre " counter(chapter) " : "; counter-increment: chapter;
26 fvrier 2004
6/7
Bourg-en-Bresse Deuxime anne GI counter-reset: section; } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; } CAPTION:before { content: "Figure : "; }
Rfrence
Page web du W3C sur les CSS 2 http://www.w3.org/TR/CSS2/
26 fvrier 2004
7/7

Css Support

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Css Support

Загружено:

Авторское право:

Доступные форматы

Bourg-en-Bresse Deuxime anne GI

Anne scolaire 2003-2004 Les feuilles de style en CSS

Les feuilles de style en CSS

lments, classes et instances

Eric Gurin eric.guerin@liris.cnrs.fr

Anne scolaire 2003-2004 Les feuilles de style en CSS

Les types de mdia

Eric Gurin eric.guerin@liris.cnrs.fr

Bourg-en-Bresse Deuxime anne GI

Anne scolaire 2003-2004 Les feuilles de style en CSS

Les styles externes

Eric Gurin eric.guerin@liris.cnrs.fr

Anne scolaire 2003-2004 Les feuilles de style en CSS

Eric Gurin eric.guerin@liris.cnrs.fr

Bourg-en-Bresse Deuxime anne GI

Anne scolaire 2003-2004 Les feuilles de style en CSS

Eric Gurin eric.guerin@liris.cnrs.fr

Anne scolaire 2003-2004 Les feuilles de style en CSS

Eric Gurin eric.guerin@liris.cnrs.fr

Anne scolaire 2003-2004 Les feuilles de style en CSS

Eric Gurin eric.guerin@liris.cnrs.fr

Вам также может понравиться