Langage CSS Cascading style sheets 20en%20forme%20et%20language%20css.ppt Daprès.

Langage Langage CSSCSS

Cascading style sheets Cascading style sheets

http://www.u-bourgogne.fr/MODCI/ideri/ressources/web/mise%20en%20forme%20et%20language%20css.ppt

D’après

2

HTML et CSSHTML et CSS►Pour maîtriser l’aspect final à l’écran Pour maîtriser l’aspect final à l’écran on utilise un autre langage que le HTML: on utilise un autre langage que le HTML: le langage le langage CSSCSS►version actuelle : CSS2version actuelle : CSS2

CSS = Cascading Style SheetsCSS = Cascading Style Sheets = feuilles de style en cascade = feuilles de style en cascade

►traduction officielle des spécifications traduction officielle des spécifications de référence : de référence : http://www.yoyodesign.org/doc/w3c/css2/cover.html

3

HTML et CSSHTML et CSS►Exemple d'un site sans css ni mise en forme Exemple d'un site sans css ni mise en forme (mise en page (mise en page par tableau)par tableau)

4

HTML et CSSHTML et CSS►On veut obtenir quelque chose comme On veut obtenir quelque chose comme

5

HTML et CSSHTML et CSS►Gestion de la couleur du fondGestion de la couleur du fond

6

HTML et CSSHTML et CSS► Le code html est modifiéLe code html est modifié

► Il faut coller ce code dans toutes les pages du siteIl faut coller ce code dans toutes les pages du site► On recommence pour les fonds de tableaux etc.On recommence pour les fonds de tableaux etc.► Les espacements, les fontes, les couleurs de texte, …Les espacements, les fontes, les couleurs de texte, …

7

HTML et CSSHTML et CSS► Code html (balise FONT)Code html (balise FONT)

Notepad++

8

HTML et CSSHTML et CSS► Comment modifier toutes les polices de caractères de la page index.htm en une seule opération ?Comment modifier toutes les polices de caractères de la page index.htm en une seule opération ?► Comment appliquer ces modifications automatiquement aux autres pages ?Comment appliquer ces modifications automatiquement aux autres pages ?► Réponses (imparfaites) :Réponses (imparfaites) :

En utilisant l'outil de recherche/remplacement automatique de Dreamweaver sur l'ensemble du site (pas toujours facile)En utilisant l'outil de recherche/remplacement automatique de Dreamweaver sur l'ensemble du site (pas toujours facile) En utilisant un logiciel de recherche/remplacement automatique qui peut travailler avec plusieurs fichiers texte.En utilisant un logiciel de recherche/remplacement automatique qui peut travailler avec plusieurs fichiers texte.

► Bonne réponse: utiliser une feuille de styleBonne réponse: utiliser une feuille de style

9

HTML et CSSHTML et CSS► Feuille de style Feuille de style musee.css

10

HTML et CSSHTML et CSS► Feuille de style Feuille de style musee.css

11

HTML et CSSHTML et CSS►Trois méthodes d'application de style Trois méthodes d'application de style CSS:CSS:

ajout d'un ajout d'un attribut "styleattribut "style" dans une " dans une balise donnéebalise donnée ajout d'une ajout d'une section <style>section <style> au début au début du document html : s'applique aux du document html : s'applique aux balises du document courantbalises du document courant ajout d'une ajout d'une feuille de style externefeuille de style externe (monstyle.css) liée à une ou plusieurs (monstyle.css) liée à une ou plusieurs pages htmlpages html

12

HTML et CSSHTML et CSS►attribut "styleattribut "style" dans une balise " dans une balise donnéedonnée

<BODY><BODY>

<H1 <H1 style="color:blue">style="color:blue">La page personnelle de La page personnelle de Bach</H1>Bach</H1>

<P >Jean-Sébastien Bach était un compositeur <P >Jean-Sébastien Bach était un compositeur prolifique.prolifique.

</BODY></BODY> ne s'applique qu'à cette section H1

13

HTML et CSSHTML et CSS►section <style>section <style> s'appliquant aux balises s'appliquant aux balises du document courantdu document courant

<HEAD><HEAD><STYLE type="text/css"><STYLE type="text/css">

H1 { color: blue }H1 { color: blue }

</STYLE></STYLE>

</HEAD></HEAD>

<BODY><BODY>

<H1>La page personnelle de Bach</H1><H1>La page personnelle de Bach</H1>

L'indication de style porte sur tous les titres de

niveau 1 (Heading 1) de la page html

14

HTML et CSSHTML et CSS►feuille de style externefeuille de style externe (monstyle.css) liée à une ou plusieurs (monstyle.css) liée à une ou plusieurs pages html.pages html.<head><head>

<title>page liée à monstyle.css </title><title>page liée à monstyle.css </title>

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

</head></head>

indique que cette page web utilise les styles du fichier monstyle.css

15

HTML et CSSHTML et CSS►feuille de style externefeuille de style externe (monstyle.css) (monstyle.css) liée à une ou plusieurs liée à une ou plusieurs pages web.pages web.body {body {

background-color: #FFFFCC;background-color: #FFFFCC;

font-family: Verdana, Arial, Helvetica, sans-serif;font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;font-size: 12px;

line-height: 24px;line-height: 24px;

color: #336699;color: #336699;

}}

a {a {


color: #336600;color: #336600;

}}

sélecteur (ici une balise)

propriété

valeur

16

HTML et CSSHTML et CSSPour appliquer un style ...► .... à tous les éléments de la page:

le sélecteur universel * agit sur tous les éléments HTML. Pour définir par exemple une couleur rouge par défaut : * { color: #ff0000; } ;

► ... à toutes les sections correspondant à une balise donnée :p { color: #0000ff; } ;le contenu de toutes les balises <p> sera bleu, sauf si une autre couleur leur est attribuée par ailleurs de façon plus spécifique (class ou id, voir plus loin)

17

HTML et CSSHTML et CSS► ... à certaines élément portant un

attribut "class=...." : code css ►p.vert { color: #008000; }

code html► Le contenu de toutes les balises

<p class="vert"> sera vert. ► Le contenu des autres balises <p> restera

bleu (si p { color: #0000ff; } est présent)

18

HTML et CSSHTML et CSS► à une instance unique (dans la page

html) d'un élément portant un attribut du type "id=..." p#vert { color: #008000; } ; le contenu de la seule balise

<p id="vert"> sera vert. Le contenu des autres balises <p>

restera bleu ;

Une seule balise <p id="vert"> par page html

19

HTML et CSSHTML et CSS►HéritageHéritage : :body {body {

background-color: #FFFFCC;background-color: #FFFFCC;

font-family: Verdana, Arial, Helvetica, sans-serif;font-family: Verdana, Arial, Helvetica, sans-serif;


line-height: 24px;line-height: 24px;

color: #336699;color: #336699;

}}

a {a {


color: #336600;color: #336600;

}}

la balise <a> est dans la section <body>. Elle en hérite le style :

couleur, police, ...

sauf pour font-size et color qui corrigent les propriétés de body.

20

HTML et CSSHTML et CSS► (CSS = cascading sheets style)► ordre de priorité dans la "cascade"

1. L'auteur: produit des feuilles de style pour un document source. Prioritaire sur ...

2. ... l'utilisateur: peut modifier la taille des caractères, la couleur de fond par défaut (=couleur des fenêtres windows par ex.), l'affichage ou non de certains éléments (images). Prioritaire sur ...

3. ... l'agent utilisateur: (= navigateur = IE, Mozilla Firefox, Opera ...) : applique sa feuille de style par défaut

21

HTML et CSSHTML et CSS► Résumé :

Les règles des feuilles de style de l'auteur ont, par défaut, plus de poids que celles de l'utilisateur. Les règles d'un auteur et d'un utilisateur sont prioritaires sur celles de la feuille de style par défaut de l'agent utilisateur. Les feuilles de style importées suivent aussi la cascade, leur poids dépendant de leur ordre d'importation. (c'est la dernière qui l'emporte)

22

le positionnement CSSle positionnement CSS►remplace le positionnement par les remplace le positionnement par les

tableaux htmltableaux html►garde la structure logique des balises garde la structure logique des balises

html contrairement aux tableaux html.html contrairement aux tableaux html.►mise en page "liquide" (liquid layout), mise en page "liquide" (liquid layout),

absolue ou fixe.absolue ou fixe.►plus difficile à maîtriser que les plus difficile à maîtriser que les

tableaux htmltableaux html►différence entre les navigateurs différence entre les navigateurs css css

hacks.hacks.

23

le positionnement CSSle positionnement CSS►mise en page "liquide" (liquid layout)mise en page "liquide" (liquid layout) ::

boîte flottante (le texte coule autour de boîte flottante (le texte coule autour de la boîte) ou ...la boîte) ou ...boîte à positionnement relatif (la boîte à positionnement relatif (la position s'adapte à la taille de la fenêtre)position s'adapte à la taille de la fenêtre)

►mise en page fixemise en page fixeboîte à positionnement absolu : position boîte à positionnement absolu : position fixe par rapport au coin supérieur fixe par rapport au coin supérieur gauche de page affichée fenêtre, ou ...gauche de page affichée fenêtre, ou ...boîte à positionnement fixe par rapport boîte à positionnement fixe par rapport à la barre de titre de la fenêtre du à la barre de titre de la fenêtre du navigateur (menus ..) : toujours visible.navigateur (menus ..) : toujours visible.

24

le positionnement CSSle positionnement CSSle modèle des boîtes : les le modèle des boîtes : les boîtes en bloc►sauf mention contraire :sauf mention contraire :

elles sont alignées en succession elles sont alignées en succession verticaleverticale elles occupent la largeur de la elles occupent la largeur de la fenêtrefenêtre

25

le positionnement CSSle positionnement CSSle modèle des boîtes : les boîtes en blocle modèle des boîtes : les boîtes en bloc

code html :

<p class="jaune">boîte jaune</p>

<p class="verte">boîte verte</p>

26

le positionnement CSSle positionnement CSSPrincipales balises générant de Principales balises générant de boîtes en bloc :boîtes en bloc :►l'élément générique div l'élément générique div ►les titres h1, h2, h3, h4, h5, h6 les titres h1, h2, h3, h4, h5, h6 ►le paragraphe ple paragraphe p► Les listes et éléments de liste ul, ol, li, Les listes et éléments de liste ul, ol, li, dl,dddl,dd

27

le positionnement CSSle positionnement CSSle modèle des boîtes : les boîtes en le modèle des boîtes : les boîtes en

ligneligne►sauf mention contraire :sauf mention contraire :

elles se succèdent horizontalementelles se succèdent horizontalementelles occupent la largeur de leur elles occupent la largeur de leur contenucontenu

28

le positionnement CSSle positionnement CSSle modèle des boîtes : les boîtes en lignele modèle des boîtes : les boîtes en ligne

code html :

<span class="jaune">section span </span><a class="verte">lien hypertexte</a><p class="rouge">paragraphe</p>

29

le positionnement CSSle positionnement CSSPrincipales balises générant des boîtes Principales balises générant des boîtes en ligne:en ligne:►l'élément générique span ; l'élément générique span ; ►le lien hypertexte a ; le lien hypertexte a ; ►L'image img ; L'image img ; ►les ornements : les ornements :

u (underline),u (underline),b (bold), b (bold), s (strong)s (strong)i (italic)i (italic)em (emphasize)em (emphasize)

30

le positionnement CSSle positionnement CSSles dimensions des boîtesles dimensions des boîtes((http://www.brainjar.com/css/positioning/)http://www.brainjar.com/css/positioning/)

31

le positionnement CSSle positionnement CSSles dimensions des boitesles dimensions des boites(traduction officielle du w3C : (traduction officielle du w3C : http://www.yoyodesign.org/doc/w3c/css2/box.html)http://www.yoyodesign.org/doc/w3c/css2/box.html)

32

le positionnement CSSle positionnement CSSles dimensions des boites

33

le positionnement CSSle positionnement CSS..jaunejaune { {

background-color: #FFFF66;background-color: #FFFF66;height: 20px;height: 20px;border: 5px dashed #006699;border: 5px dashed #006699;margin: 30px;margin: 30px;padding: 50px;padding: 50px;

}} <span class="jaune">section span </span><span class="jaune">section span </span>

34

le positionnement CSSle positionnement CSS..verteverte { {

background-color: #00CC99;background-color: #00CC99;height: 30px;height: 30px;width: 200px;width: 200px;margin: 20px;margin: 20px;padding: 20px;padding: 20px;

}}<a class="verte">lien hypertexte</a><a class="verte">lien hypertexte</a>

35

le positionnement CSSle positionnement CSS..rougerouge { {

background-color: #FF3300;background-color: #FF3300;height: 50px;height: 50px;width: 100px;width: 100px;border: 30px solid #CCCC66;border: 30px solid #CCCC66;padding: 30px;padding: 30px;

}}<p class="rouge">paragraphe</p><p class="rouge">paragraphe</p>

36

le positionnement CSSle positionnement CSSPositionnement relatifPositionnement relatif : la boîte est décalée par rapport : la boîte est décalée par rapport à la place qu'elle aurait occupée dans le flux normalà la place qu'elle aurait occupée dans le flux normal

#verte {#verte {background-color: #00CC99;background-color: #00CC99;margin: 10px;margin: 10px;padding: 10px;padding: 10px;position: relative;position: relative;top: 10px;top: 10px;

}}<span class="jaune">jaune</span> <span <span class="jaune">jaune</span> <span id="verte">vert</span> <span id="verte">vert</span> <span class="jaune">jaune</span> class="jaune">jaune</span>

37

le positionnement CSSle positionnement CSSboîte flottante boîte flottante : : ►la boîte flottante est décalée complètement à gauche la boîte flottante est décalée complètement à gauche (ou à droite) sur sa ligne(ou à droite) sur sa ligne►les boîtes les boîtes suivantessuivantes "s'écoulent" autour de la boite "s'écoulent" autour de la boite flottanteflottante

38

le positionnement CSSle positionnement CSSboîte flottante boîte flottante : code html: code html

<style><style>

#maboîte {#maboîte { float: left;float: left; } }

</style></style>

<img id="maboîte" src="rose.jpg" width="200" <img id="maboîte" src="rose.jpg" width="200" height="150">height="150">

Lorem ipsum dolor sit Lorem ipsum dolor sit

amet, consectetuer adipiscing elit. Phasellus amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imperdietsuscipit nisl. Sed imperdiet

pour aller plus loin :► http://openweb.eu.org/articles/initiation_float/►http://www.brainjar.com/css/positioning/

39

le positionnement CSSle positionnement CSSpositionnement positionnement absolu absolu : le bloc est : le bloc est positionné par rapport positionné par rapport au coin supérieur au coin supérieur gauche de la fenêtregauche de la fenêtre

40

le positionnement CSSle positionnement CSScodes css (positionnement absolu)codes css (positionnement absolu)#maboîte { #maboîte { position: absolute; position: absolute;

left: 387px;left: 387px;

top: 59px;top: 59px;

}}

code htmlcode html<img id="maboîte" src="rose.jpg" width="200" <img id="maboîte" src="rose.jpg" width="200"

height="150">height="150">

41

le positionnement CSSle positionnement CSScode csscode css#p1 {#p1 {

position: absolute;position: absolute;left: 51px;left: 51px;top: 62px;top: 62px;width: 313px;width: 313px;

}}

code htmlcode html

<p id="p1">Lorem ipsum dolor sit amet, consectetuer <p id="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imp (...)adipiscing elit. Phasellus suscipit nisl. Sed imp (...)

42

le positionnement CSSle positionnement CSScode csscode css #p2 {#p2 {

position: absolute;position: absolute;width: 543px;width: 543px;height: 70px;height: 70px;left: 50px;left: 50px;top: 222px;top: 222px;

}}

code htmlcode html

<p id="p2">Donec at velit vel purus (...)<p id="p2">Donec at velit vel purus (...)

Langage CSS Cascading style sheets 20en%20forme%20et%20language%20css.ppt Daprès.

Documents

Transcript of Langage CSS Cascading style sheets 20en%20forme%20et%20language%20css.ppt Daprès.