AlexandrePauchet CSS TechnologieWeb

Technologie Web

CSS

Alexandre Pauchet

INSA Rouen - Département ASI

BO.B.RC.18,[email protected]

Plan

1 Introduction

2 Règles, éléments et propriétés

3 Propagation de règles

4 Positionnement

5 Exemple

6 XML et CSS

Les CSS

Cascading Style Sheets Feuilles de style en cascade Un document en mode texte

Utilisable par des documents HTML ou XML

Présentation identique de tous les documents HTML ou XML Apporte la modularité du formatage

Séparation du contenu et de la présentation 3 normes : CSS 1, CSS 2, CSS 3

Les CSS

Trois possibilités d’inclusion :

Directement dans les balises (à éviter)

<h2 s t y l e=" c o l o r : r e d ">T i t r e e n r o u g e</h2>

Définition de la CSS dans le fichiervia la balise <style>

<h e a d>

<s t y l e t y p e=" t e x t / c s s ">

d é c l a r a t i o n d e s s t y l e s

</s t y l e>

</h e a d>

Déclaration d’un lien vers la CSS via la balise<link>

<h e a d>

<l i n k h r e f=" f i c h i e r . c s s " r e l=" s t y l e s h e e t " t y p e=" t e x t / c s s "/>

</h e a d>

Les CSS

s é l e c t e u r 1, s é l e c t e u r 2 ... { p r o p r i é t é 1: v a l e u r 1;

...

p r o p r i é t é N: v a l e u r N; }

On peut mettre autant de couples propriété/valeur que voulu, séparés par des;

Commentaire :/* Commentaire */

Exemple

h1, h2 {c o l o r:red;}

Les CSS

Déclaration d’une règle (suite)

Sélecteur de type : nom de balise

h1 {color: red; background-color: yellow}

Sélecteur universel :*

Sélecteur d’ID :#

#important {color: red}

Sélection de :<p id="important">paragraphe</p>

Sélecteur de classe : .

.special {font-size: 20pt} ou h1.special {font-size: 60pt}

Sélection de :<h1 class="special">Titre spécial</h1>

Remarque

Les id sont uniques sur une même page.

Les class s’appliquent à plusieurs balises.

Les CSS

Déclaration d’une règle (suite)

Sélecteur de descendant

p h2 {color: green} : "les h2 qui sont dans un p"

Sélecteur d’enfant (descendant direct)

p > h2 {font-size: 30pt} : "les h2 qui sont directement dans un p"

Sélecteur d’adjacent :

p ~ h2 {font-size: 10pt} : "les h2 qui sont après un p"

Sélecteur d’adjacent direct :

p + h2 {font-size: 10pt} : "les h2 qui sont directement après un p"

Sélecteur de pseudo-classe

a:visited {color: brown}

p em:first-child {font-weight: bold}

form:invalid {font-weight: bold}et

input:required:valid {border-color: #008000;}

Les CSS

Déclaration d’une règle (suite et fin)

Sélecteur de pseudo-élément "première lettre"

p:first-letter {font-size: 200%; font-weight: bold;

float: left; text-transform: capitalize}

Sélecteurs de pseudo-élément "avant" et "après"

:beforeet:aftergénèrent du contenu avant et après un élément Le contenu généré est déclaré par la propriétécontent

Les pseudo-éléments générés héritent du style de l’élément référence dt:before { content: "->"; }

Les CSS

Propriétés (http://www.w3schools.com/cssref/) polices de caractères :

font-size, font-style, font-family, font-weight paragraphes :

line-height, text-align, text-indent, text-transform blocs :

height, width, margin-right, margin-left, margin-top, margin- bottom, padding-right, border-style, border-top-width, ...

Élément parent

Élément enfant

padding-left

margin-top

padding-bottom padding-top

padding-right

margin-bottom

margin-left margin-right

Les CSS

Tous les styles, peu importe où ils sont définis, se fusionnent dans l’ordre de chargement, en une seule feuille de style avec un système d’héritage et peuvent s’écraser.

Les CSS

Tous les styles applicables sont appliqués.

Les CSS

Fonctionnement par défaut :

Dans le flux, les éléments sont positionnés les uns en dessous des autres

Positionnement flottant (par rapport au bloc contenant) : float: left;

Positionnement absolu (par rapport au conteneur, hors flux) : position: absolute; top: x px; left: y px;

Positionnement fixe (absolu même en cas de scroll) : position: fixed; top: x px; left: y px;

Positionnement relatif (par rapport à sa position dans le flux) : position: relative; top: x px; left: y px;

http://www.w3schools.com/css/css_positioning.asp

Les CSS

Exemple

< !DOCTYPE h t m l>

<h t m l>

<h e a d>

<t i t l e>E x e m p l e d’u t i l i s a t i o n d e s CSS</t i t l e>

<meta h t t p−e q u i v=" c o n t e n t−t y p e " c o n t e n t=" t e x t / h t m l ; c h a r s e t=u t f−8" />

<l i n k h r e f=" L i v r e s . c s s " r e l=" s t y l e s h e e t " t y p e=" t e x t / c s s "/>

</h e a d>

<b o d y>

<d l>

<d t>CSS p o u r l e s n u l s</d t><dd>Yvon T e n g r e c e</dd>

<d t>XML p o u r p a s m i e u x</d t><dd>A l a i n S t i g a t e u r</dd>

<d t>XHTML p o u r <em>r i e n</em></d t><dd>A r n i e Ka</dd>

</d l>

<p>V o i c i un p e t i t t e x t e j u s t e p o u r <s t r o n g>m o n t r e r</s t r o n g> l a d i f f é r e n c e a v e c u n e <s p a n i d=" i m p o r t a n t ">l i s t e</s p a n>. On r e m a r q u e r a q u e l a l a r g e u r e s t f i x é e à <em>500px.</em></p>

<p>e t un s e c o n d p a r a g r a p h e d e r r i è r e.</p>

<d i v>Et un s p a n d a n s un d i v p o u r t e s t e r b r/i : <s p a n c l a s s=" i "><s p a n c l a s s=" b r ">i p u i s b r (on f a v o r i s e i)</s p a n></s p a n> e t <s p a n c l a s s=" b r "><

s p a n c l a s s=" i ">b r p u i s i (on t i e n t compte d e i e t b r)</s p a n></s p a n>.</d i v>

</b o d y>

</h t m l>

Les CSS

h t m l { f o n t−f a m i l y: a r i a l; f o n t−s i z e: 20px; f o n t−s t y l e: n o r m a l; c o l o r: #000000;

b a c k g r o u n d: #c c c c c c; m a r g i n: 5px; w i d t h: 500px; } p { t e x t−a l i g n: j u s t i f y }

p:f i r s t−l e t t e r { t e x t−t r a n s f o r m: c a p i t a l i z e } p + p { m a r g i n−t o p: 10mm }

d l { m a r g i n−l e f t: 50px; } d t { f o n t−s t y l e: i t a l i c; } d t em { f o n t−w e i g h t: b o l d; } dd { c o l o r: #f f 6 6 0 0; }

#i m p o r t a n t { c o l o r: r e d }

.i>.b r { f o n t−w e i g h t: n o r m a l; f o n t−s t y l e: i t a l i c; } .b r>.i { f o n t−w e i g h t: b o l d; f o n t−s t y l e: i t a l i c; }

Les CSS

Avec CSS :

XML et CSS

Objectif : séparation du contenu et de la présentation

⇒ interopérabilité

Distribution à plusieurs médias (multiplateforme) Personnalisation (adaptation de l’affichage aux groupes)

⇒ réutilisabilité (traitement par des techniques encore inexistantes)

⇒ faciliter la recherche d’informations

Plusieurs formats :

CSS :Cascading Style Sheets

XSL :eXtensible Stylesheet Language

XSL-T :eXtensible Stylesheet Language Tranform

XML et CSS

Principe

XML [+ DTD] + CSS ⇒Document formaté

<?xml-stylesheet type="text/css" href="fichier.css" ?>

Remarques :

Toutes les balises définis dans un document XML / une DTD peuvent faire l’objet d’un traitement

L’ordre des éléments (balises) dans un document XML est respecté ; il faut tenir compte de ces possibilités lorsque l’on rédige une CSS

XML et CSS

Syntaxe : sélecteur[, sélecteur...] {déclarations}

sélecteur d’élément :element

sélecteur d’id : #id

sélecteur de classe :.class

sélecteur universel : *

Sélecteur de descendant :element element

Sélecteur d’enfant (descendant direct) :element>element

Sélecteur d’adjacent :element1~element2

Sélecteur d’adjacent direct : element+element

XML et CSS

elem[att] : sélectionne les éléments de typeelemcontenant l’attributatt, quelque soit la valeur de l’attribut.

elem[att=val]: sélectionne les éléments de type elemdont l’attributatt vaut val.

elem[att∼=val] : sélectionne les éléments de typeelemdont l’attribut liste attcontient val.

elem[attˆ=val] : sélectionne les éléments de typeelemdont l’attributatt débute par val.

elem[att$=val] : sélectionne les éléments de typeelemdont l’attributatt se termine par val.

elem[att*=val] : sélectionne les éléments de typeelemdont l’attributatt contient la sous-chaîne val.

Remarque : il est possible de combiner plusieurs sélecteurs de paramètre elem[sel1][sel2]...[seln]

XML et CSS

Affichage d’un élément :

“display: block” ⇒affichage comme élémentblock

“display: inline” ⇒affichage comme élémentinline

“display: none” ⇒pas d’affichage

Par défaut les élément sont considérés commeinline Propriétés identiques à celles du HTML

polices de caractères :

font-size, font-style, font-family, font-weight textes :

line-height, text-align, text-indent, text-transform blocs :

height, width, margin-right, margin-left, margin-top, margin- bottom, padding-right, padding-left, padding-top, padding- bottom, border-style, border-top-width, border-right-width, ...

XML et CSS

Les pseudo-éléments:before et:afterpermettent de générer du contenu avant et après un élément

Le contenu généré est déclaré par la propriété content

Les pseudo-éléments générés héritent du style de l’élément référence Exemple

c o l l e c t i o n:b e f o r e {

c o n t e n t: " Dans : "; d i s p l a y: i n l i n e; f o n t−s t y l e: i t a l i c; }

XML et CSS

Exemple

<? x ml v e r s i o n=" 1 . 0 " e n c o d i n g="UTF−8" s t a n d a l o n e=" y e s "?>

< !DOCTYPE album [

<!ELEMENT album ( t i t r e , a u t e u r , c o n t e n u )>

< ! ELEMENT t i t r e (#PCDATA)>

< ! ELEMENT a u t e u r (#PCDATA)>

< ! ELEMENT c o n t e n u ( p i s t e +)>

< ! ELEMENT p i s t e (#PCDATA)>

]>

<? xml−s t y l e s h e e t t y p e=" t e x t / c s s " h r e f=" s t y l e A l b u m . c s s "?>

<album>

< t i t r e >Le monde d e l a c h a t o u i l l e</ t i t r e >

<a u t e u r>S a c h a T o u i l l e</ a u t e u r>

<c o n t e n u>

< p i s t e>01 − G u i l i g u i l i</ p i s t e>

< p i s t e>02 − G r a t o u i l l i</ p i s t e>

</ c o n t e n u>

</ album>

XML et CSS

Exemple

∗ {

d i s p l a y: b l o c k; p a d d i n g−l e f t: 10px; }

album {

w i d t h: 500px;

b a c k g r o u n d−c o l o r: t e a l; f o n t−f a m i l y: a r i a l ; c o l o r: w h i t e; f o n t−s i z e: 12p t ; }

t i t r e , a u t e u r { d i s p l a y: i n l i n e; f o n t−s i z e: 16p t; f o n t−w e i g h t: b o l d; }

a u t e u r { c o l o r: r e d ; }

a u t e u r:b e f o r e { c o n t e n t: " ( "; } a u t e u r:a f t e r { c o n t e n t: " ) "; }

Documentation et liens

HTML 5

w2schools :http://www.w3schools.com/html5/

Toutes les balises :

http://www.w3schools.com/html5/html5_reference.asp CSS

w2schools :http://www.w3schools.com/html5/

Balises :

http://www.w3schools.com/html5/html5_reference.asp Validation

W3C (DTD based) :http://validator.w3.org

Validator.ne (non-DTD) :http://html5.validator.nu L’indispensable Firebug pour le débuggage !

Compatibilité navigateurs http://caniuse.com