View - Download Feuilles de style CSS

Previous PDF

Next PDF

CSS

Thierry Lecroq

Universite de Rouen

FRANCE

Thierry Lecroq (Univ. Rouen)CSS1 / 50

Plan

1Generalites sur les CSS

2Les selecteurs

3Les proprietes

4le dimensionnement et le positionnement

Thierry Lecroq (Univ. Rouen)CSS2 / 50

Cascading Style Sheet

Mise en forme

Separation de la forme et du fond

HTML decrit le fond

CSS decrit la forme

Centralisation de l'aspect visuel

Validation automatique :http://jigsaw.w3.org/css-validatorOn insere du CSS entre : Ou on lie un chier CSS avec : Commentaires : entre/*et*/Thierry Lecroq (Univ. Rouen)CSS3 / 50

Format d'une classe CSS

Le CSS est forme d'un ensemble de classes. Une classe s'ecrit de cette facon : selecteur { propriete1 : valeur1 ; propriete2 : valeur2 ;

Thierry Lecroq (Univ. Rouen)CSS4 / 50

Format d'une classe CSS

selecteurpeut ^etre :un nom de balise : les proprietes s'appliquent a toutes ces balises un nom generique (commencant par un point) : les attributs

s'appliquent aux balises utilisantclass="selecteur"(sans le point)un melange des deux, separes par des virgules : les attributs

s'appliquent suivant les deux points precedents Les proprietes designent les elements modies (couleur, bordure, fond, marges...) Les valeurs designent par quelles valeurs sont remplacees les proprietes designees.

Thierry Lecroq (Univ. Rouen)CSS5 / 50

Exemple de CSS

style.css body { font-family : Arial ; } p { background-color : #F0C0C0 ; border : thin solid black ; } .titre { color : yellow ; }

Thierry Lecroq (Univ. Rouen)CSS6 / 50

Exemple de CSS

index.xhtml

Titre en jaune

Un paragraphe avec bordure et couleur de fond

Thierry Lecroq (Univ. Rouen)CSS7 / 50

Les unites de longueur

px: pixel em: m-length ex: x-height in: pouce (inch) soit25;4mm cm: centimetre mm: millimetre pt: point soit1=72de pouce pc: pica soit 12 points donc1=6de pouceThierry Lecroq (Univ. Rouen)CSS8 / 50

Les couleurs

mot-cle : black,blue,brown,cyan,gray, green,pink,purple, red, ... code hexadecimal : #999999, composantes RGB fonctionrgb():rgb(r,v,b)avec0r;v;b255Thierry Lecroq (Univ. Rouen)CSS9 / 50 Plan

1Generalites sur les CSS

2Les selecteurs

3Les proprietes

4le dimensionnement et le positionnement

Thierry Lecroq (Univ. Rouen)CSS10 / 50

Les selecteurs

Un seul element

p { color : yellow ; background-color : blue ; }

Plusieurs elements

h1, div, p { color : yellow ; background-color : blue ; } div { margin : 20px ; }Le selecteur universel * { background-color : blue ; } p { background-color : gray ; }

Thierry Lecroq (Univ. Rouen)CSS11 / 50

Les classes

.rouge { color : red ; } .rouge { color : red ; } div.rouge { color : yellow ; }.rouge { color : red ; } div.rouge { background-color : blue ; }

Thierry Lecroq (Univ. Rouen)CSS12 / 50

Plusieurs classes au m^eme element

*.jaune { color : yellow ; } div.jaune { color : green ; } .classe1 { color : red ; } .classe2 { font-style : italic ; } .classe3 { background-color : blue ; }

Thierry Lecroq (Univ. Rouen)CSS13 / 50

Plusieurs classes au m^eme element

Exemple

Titre en jaune

Thierry Lecroq (Univ. Rouen)CSS14 / 50

Selecteur d'identiant id

div { color : black ; } #bleu { color : white ; background-color : blue ; } Attention a la casse!!

Thierry Lecroq (Univ. Rouen)CSS15 / 50

Les selecteurs d'attributs

acronym [title] { color : red ; background-color : gray ; } * [title] { background-color : yellow ; } h2 [title] [id] { background-color : yellow ; }

Thierry Lecroq (Univ. Rouen)CSS16 / 50

Les selecteurs de valeur d'attribut

element [attribut1 = "valeur1"] [attribut2 = "valeur2"] ... { definition du style ; } element [attribut ~= "valeur"] { definition du style ; }

Thierry Lecroq (Univ. Rouen)CSS17 / 50

Les selecteurs contextuels parent-descendant

element-parent element-descendant { definition du style ; } ul li ol li { background-color : red ; color : blue ; } element-parent > element-enfant { definition du style ; }

On peut combiner

Thierry Lecroq (Univ. Rouen)CSS18 / 50

Les selecteurs d'elements adjacents

element1 + element2 { definition du style ; }

Thierry Lecroq (Univ. Rouen)CSS19 / 50

Les pseudo-classes applicables aux liens

a:link a:visited

Thierry Lecroq (Univ. Rouen)CSS20 / 50

Les pseudo-classes dynamiques

:focus :hover :active

Thierry Lecroq (Univ. Rouen)CSS21 / 50

Pseudo-classes diverses

:first-child :lang (code) (ex : xml:lang = "code")

Thierry Lecroq (Univ. Rouen)CSS22 / 50

Les pseudo-elements

:first-letter :first-line :before { content : "avant" ; definition du style ; } :after { content : "apres" ; definition du style ; }

Thierry Lecroq (Univ. Rouen)CSS23 / 50

La decalaration!importantGestion des con

its * {color : black !important ; background-color : yellow ; } div {color : blue ; background-color : white ; }

Thierry Lecroq (Univ. Rouen)CSS24 / 50

Plan

1Generalites sur les CSS

2Les selecteurs

3Les proprietes

4le dimensionnement et le positionnement

Thierry Lecroq (Univ. Rouen)CSS25 / 50

Les proprietes (1)

color : valeur ;: couleur d'avant-planbackground-color : valeur ;: couleur de fondbackground-image : url(URL) ;: image de fondThierry Lecroq (Univ. Rouen)CSS26 / 50

Les proprietes (2)

border-style : style{1,4} ;: stylepeut prendre les valeurs suivantes : I none: pas de bordure

Ihidden: idem sauf cellule de tableau

Idotted: pointilles courts

Idashed: tirets longs

Isolid: pleine continue

Idouble: 2 tarits paralleles continus

Igroove: bordure en creux

Iridge: bordure en relief

Iinset: bordure en creux dont chaque c^ote n'a qu'une seule couleur

Ioutset: bordure en relief dont chaque c^ote n'a qu'une seule couleurThierry Lecroq (Univ. Rouen)CSS27 / 50

Les proprietes (3)

On peut specier 1, 2 ou 4 valeurs

1 : 4 c^otes

2 : la premiere s'applique aux c^otes haut et bas, la deuxieme

s'applique aux c^otes droit et gauche3 : la premiere s'applique aux c^otes haut, la deuxieme s'applique aux

c^otes droit et gauche, la troisieme s'applique aux c^otes bas4 : haut, droit, bas, gauche

Thierry Lecroq (Univ. Rouen)CSS28 / 50

Les proprietes (4)

border-width : width{1,4} ;: widthpeut prendre les valeurs suivantes : I thin: n

Imedium: moyen

Ithick: epais

Ivaleur numerique

On peut specier 1, 2 ou 4 valeurs

I

1 : 4 c^otes

I2 : la premiere s'applique aux c^otes haut et bas, la deuxieme s'applique aux c^otes droit et gauche I3 : la premiere s'applique aux c^otes haut, la deuxieme s'applique aux c^otes droit et gauche, la troisieme s'applique aux c^otes bas I4 : haut, droit, bas, gaucheborder-color : couleur{1,4} ;:Thierry Lecroq (Univ. Rouen)CSS29 / 50

Les proprietes (5)

border : width style couleur ;: h1 { border : 5px double blue ; } est equivalent a h1 { border-width : 5px ; border-style : double ; border-color : blue ; }

Thierry Lecroq (Univ. Rouen)CSS30 / 50

Les proprietes (6)

margin : valeur {1,4} ;: marge (top, right, bottom, left)padding : valeur {1,4} ;: margeThierry Lecroq (Univ. Rouen)CSS31 / 50

Les proprietes (7)

outline-style : valeur {1,4} ;: style de contouroutline-width : valeur {1,4} ;: largeur de contouroutline-color : valeur {1,4} ;: couleur de contouroutline : width color style ;: contourThierry Lecroq (Univ. Rouen)CSS32 / 50

Les proprietes (8)

font-family : "valeur" ;: policefont-size : taille-absolue | taille-relative | taille | pourcent ;: taille xx-large taille-relative:smaller,largerfont-weight : normal | bold | bolder | lighter | x00 ;: graisse

avecxentier tel que1x9font-style : normal | italic | oblique ;: stylefont-variant : normal | small-caps ;: petites capitalesThierry Lecroq (Univ. Rouen)CSS33 / 50

Les proprietes (9)

text-transform : none | uppercase | lowercase | capitalize ;: cassetext-decoration : none | underline | overline | line-through | blink ;:

mise en evidenceline-height : normal | valeur | pourcent ;: interlignefont : style variant weight [size/line-height family] ;

Thierry Lecroq (Univ. Rouen)CSS34 / 50

Les proprietes (10)

text-align : left | center | right | justify ;: alignement horizontalletter-spacing : normal | valeur ;: espacement entre les

caracteresword-spacing : normal | valeur ;: espacement entre les motsThierry Lecroq (Univ. Rouen)CSS35 / 50

Plan

1Generalites sur les CSS

2Les selecteurs

3Les proprietes

4le dimensionnement et le positionnement

Thierry Lecroq (Univ. Rouen)CSS36 / 50

Creer des cadres

Thierry Lecroq (Univ. Rouen)CSS37 / 50 Les elementsframesetetframeL'elementpermet la division de la page en dierents cadres dont les dimensions sont denies par les attributsrowsetcols: rows: permet de diviser la page en cadres horizontaux et contient une suite de dimensions separees par des virgules (pixels, pourcentages ou proportions) cols: idem pour un decoupage vertical L'elementcontient les elementsetThierry Lecroq (Univ. Rouen)CSS38 / 50 <p>Les elementsframeetnoframeL'elementframepossede l'attributsrcpour specier l'URL decrivant le contenu du cadreL'elementnoframesdecrit un contenu alternatif au cas ou le navigateur client ne gere pas les</p> cadres <h3>Thierry Lecroq (Univ. Rouen)CSS39 / 50</h3> <h3>Exemple</h3> <frameset rows="100,400,200"> <frame src="cadre1.xhtml"/> <frame src="cadre2.xhtml"/> <frame src="cadre3.xhtml"/> <noframes> <body> <p>Votre navigateur ne supporte pas les cadres.</p> </body> rows="100,400,200" rows="100,*,200" rows="15%,75%,10%" rows="2,5,1"

Thierry Lecroq (Univ. Rouen)CSS40 / 50

Communication entre cadres

Exemple

Thierry Lecroq (Univ. Rouen)CSS41 / 50

Communication entre cadres

Exemple

cadre4.xhtml

• Choix 1
• Choix 2
• Choix 3

Thierry Lecroq (Univ. Rouen)CSS42 / 50

Creer une mise en page : le dimensionnement et le

positionnementLe dimensionenement des elements width : | pourcent | auto | inherit ; height : | pourcent | auto | inherit ; overflow : visible | hidden | scroll | auto | inherit ; I visible: le contenu debordant est ache Ihidden: le contenu debordant est cache donc invisible Iscroll: ascenseurs droit et bas systematiques m^eme sans debordement Iauto: ascenseurs en cas de debordementmin-heigth : | | inherit ; max-heigth : | | none | inherit ; min-width : | | inherit ; max-width : |< pourcent> | none | inherit ;

Thierry Lecroq (Univ. Rouen)CSS43 / 50

Le rendu des elements

display : none | inline | block | list-item | table | inline-table | ... | inherit ; I none: pas d'achage

Iinline: sur une ligne

Iblock: bloc (comme

,

,

, ...)

Ilist-item: liste (comme

)Exemple

li { display : inline ; border : solid 1px black ; }

• Point 1
• Point 2
• Point 3

Thierry Lecroq (Univ. Rouen)CSS44 / 50

Le positionnement des elements

Le ottement float : left | right | none | inherit

Emp^echer le

ottement pour les elements de bloc clear : none | left | right | both | inheritnone: ottement autoriseleft: ottement gauche interditright: ottement droit interditboth: ottements gauche et droit interditsThierry Lecroq (Univ. Rouen)CSS45 / 50

Le positionnement relatif

position : relative avec left : | | auto | inherit top : | | auto | inherit right : | | auto | inherit bottom : | | auto | inherit ouest positive ou negativeThierry Lecroq (Univ. Rouen)CSS46 / 50

Le positionnement absolu

position : absolu

Thierry Lecroq (Univ. Rouen)CSS47 / 50

Exemple

div.cadre1 { position : absolute ; border : thin solid black ; left : 0px ; top : 0px ; width : 100% ; height : 20% ; } div.cadre2 { position : absolute ; border : thin solid black ; left : 0px ; top : 20% ; width : 20% ; height : 100% ; } div.cadre3 { position : absolute ; border : thin solid black ; left : 20% ; top : 20% ; width : 80% ; height : 80% ; }

Titre

• Choix 1
• Choix 2
• Choix 3

Contenu

Thierry Lecroq (Univ. Rouen)CSS48 / 50

Le positionnement xe

position : fixed cas particulier du positionnement absolu le conteneur n'est pas lelement parent mais la fen^etre du navigateur

Thierry Lecroq (Univ. Rouen)CSS49 / 50

Visibilite et ordre d'empilement

visibility : visible | hidden | collapse | inherit collapse: idemhiddenpour les cellules de tableauxz-index : auto | | inherit

Thierry Lecroq (Univ. Rouen)CSS50 / 50

quotesdbs_dbs49.pdfusesText_49

[PDF] apprendre dessin crayon pdf

[PDF] apprendre l astrologie facilement

[PDF] race et culture pdf

[PDF] apprendre lallemand pdf mp3

[PDF] apprendre l'arabe en pdf gratuit

[PDF] apprendre lécriture en français pdf

[PDF] apprendre lhistoire de lislam

[PDF] apprendre lhistoire en ligne

[PDF] apprendre la boxe a la maison

[PDF] apprendre la paie gratuitement

[PDF] apprendre langage c pdf

[PDF] apprendre le clavier azerty pdf

[PDF] apprendre le code de la route algerien pdf

[PDF] apprendre le coran en 1000 jours pdf

[PDF] apprendre le coreen a casablanca