1、Les feuilles de style CSS,2,Les feuilles de style CSS,CSS = Cascading Style Sheets (Feuille de style en cascade) Document permettant de spcifier toutes les caractristiques de mise en forme dune page HTML Elles permettent de dfinir la mise en forme au niveau de chaque balise HTML,3,Les avantages des

2、CSS,Sparation du contenu et de la forme: Amlioration de laccessibilit numrique Cohsion de la prsentation pour lensemble du site Modification trs simple de lapparence dun site sans avoir en modifier le contenu Facilitation de la maintenance Outil de mise en forme plus propre et plus puissant que ce q

3、ue propose HTML Palier certaine insuffisance de HTML (contrle de la police, des marges, de lindentation, ) Positionnement au pixel prs Amliore le temps de chargement des pages,4,Syntaxe dun style CSS,Syntaxe suivante: Balise proprit_de_style : valeur O: Balise : Permet de prciser la balise dont on s

4、ouhaite modifier le style Proprit_de_style : Permet de spcifier la proprit de la balise que lon souhaite modifier (alignement, couleur, ) Valeur : Permet de spcifier la nouvelle valeur associe la proprit Il est possible de modifier plusieurs proprits pour une mme balise en les sparant par des ;,5,Ex

5、emple de style CSS,H1 font-family : Arial; font-style : italic H1,H2,H3 color : blue ,Les titres H1 possderont alors le style suivant: Police : Arial Ecriture en italique Couleur bleue H2 et H3 : Couleur bleue On constate que Les dfinitions des proprits saccumulent pour une mme balise Il est possibl

6、e de modifier simultanment les proprits de plusieurs balises,6,Style CSS et redondance,Dans le cas o la mme proprit dune mme balise est dfinie plusieurs fois on ne conserve que la dernire dclaration,H1 font-family : Arial; font-style : italic H1,H2,H3 color : blue ,H3 color : red ,7,CSS et contexte,

7、Il est mme possible daffiner la prise en compte des proprits dun balise en fonction du contexte dans lequel elle est utilise.,H2 I color : green ,8,Insertion de rgles CSS (1/5),Il existe 3 mthodes : Mthode globale Mthode intra-ligne Mthode importe,9,Insertion de rgles CSS (2/5) : mthode globale,Inse

8、rtion de len-tte de la page HTML c-a-d entre les balises Utilisation des balises : en prcisant quil sagit de rgles CSS Attribut type = text/css, , ,10,Insertion de rgles CSS (3/5) : mthode intra-ligne,Insertion des rgles CSS au niveau des balises qui les concernent Utilisation de lattribut style dis

9、ponible pour toutes les balises HTML, Ceci est un titre H1 ,11,Insertion des rgles CSS (4/5),Ces deux premires mthodes ajoutent les rgles CSS lintrieur mme des pages Web Perte de la notion de sparation entre forme et contenu Perte de luniformisation des pages du site Perte de la facilit de maintenan

10、ce Ces deux mthodes sont donc proscrire Eventuellement dans des cas bien prcis Lors de la phase de tests des rgles CSS,12,Insertion des rgles CSS (5/5) : Mthode importe,Insertion des rgles CSS dans un fichier ddi Ce fichier sera : Commun tout le site Li toutes les pages Web du site Cest la mthode CS

11、S la plus importante, ,13,Rgles CSS nom_de_la_proprit2 : valeur2; O: Balise : nom de la balise dont on souhaite modifier le style Classe : le nom associ la classe (lettre, chiffre et tiret),15,Rgles CSS color : blue H1.classe1 color : red , ceci est un titre idem ,16,Rgles CSS font-weight : bold , c

12、eci est un titre ceci un titre important ceci un div ceci un paragraphe,H1 font-style : italic ; color : blue ,17,Rgles CSS background-color : yellow; A:hover/*Souris au dessus du lien*/color:orange; font-style:italic;font-weight:bold;font-size:20px; ,20,Pseudo classes de liens,Pseudo classes spcifi

13、ques la balise Il en existe 2: Link : lorsque le lien na pas encore t visit Visited : lorsque le lien a dj t visit Exemple: a:link color: blue/* unvisited link */ a:visited color: violet /* visited link */ a:hover color: red /* mouse over link */ a:active color: green /* selected link */,21,Pseudo c

14、lasses de texte,Relative la position du texte Sutilise conjointement avec la balise Il en existe 2 principales : First-line : permet dappliquer un style la premire ligne dun paragraphe First-letter : permet dappliquer un style la premire lettre dun paragraphe Exemple: p.lettre:first-letter color: re

15、d; font-size:xx-large p.ligne:first-line color: blue; font-variant:small-caps ,22,Les lments structurels,Rgles CSS sappliquent sur des balises HTML introduction de 2 nouvelles balises permettant de structurer la page HTML : Bloc particulier au sein dune page Provoque la cration dun nouveau paragraph

16、e : lment ou groupe dlments particulier Ne provoque pas la cration dun nouveau paragraphe: Utile pour changer le style dune partie de phrase, ,23,Les botes (1/3),Un des avantages des CSS : positionnement au pixel prs grce, notamment, aux 2 lments structurels Notion de botes: Contenu : texte afficher

17、 Padding : espace entre le contenu et la bordure de la bote Border : la bordure de la bote Margin : espace entre la bordure de la bote et les lments environnant,24,Les botes (2/3),Configuration possible: Du contenu : texte classique, fond, Taille (width, height), indentation (text-indent) , interlig

18、ne (line-height) , Du padding : taille (padding), couleur (background-color), Des bordures : type de bordures (border-style), paisseur (border-width), couleurs (border-color), Des marges : taille (margin), couleur, De manire globale ou cot par cot margin, padding, border-style, border-color-top, bot

19、tom, left, right,25,Les botes (3/3) : Exemple,div.1background-color : lightblue;padding : 10px 30px 50px 70px;margin : 10px 30px 50px 70px;border-width : medium;border-style : solid;border-color : blue; div.2background-color : lightpink;padding : 10px 10px 10px 10px;/*border-width border-style borde

20、r-color*/border-top : thick dashed darkviolet;border-bottom : thick groove lightgreen;border-left : thick dotted yellow;border-right : thick ridge orange;,26,La structure HTML et le rendu CSS des balises : bloc et en-ligne,Chaque balise HTML se caractrise par : Une structure HTML sans rapport avec l

21、affichage de llment. 2 types dlments de structure imbrication lment de type bloc : parties entires de texte, comme des titres, des paragraphes, des listes, des citations, etc. ; DIV, P, H1.H6, UL, OL, TABLE, PRE, etc. lment de type en-ligne : prvus pour rester dans le texte pour lenrichir (lien hype

22、rtexte, emphase, renforcement, etc.). SPAN, EM, STRONG, IMG, BR, INPUT, etc. Son rendu sur les navigateurs affichage, positionnement, comportement Dfini par dfaut selon le navigateur Dfini par les styles CSS via la proprit display (le plus souvent inline et block),27,Structure HTML : Imbrication,un

23、lment de groupe %block peut contenir une (ou plusieurs) balise %block et/ou %inline Une balise du groupe %inline ne peut contenir QUE une (ou plusieurs autres) balise %inline lments %inline remplacs possdent des dimensions (height, width) par dfaut , , , lments %inline non-remplacs nont pas de dimen

24、sion proprement parler par dfaut (il noccupent que la place minimum ncessaire leur contenu) , , , etc. Exemples: Paragraphe 1Paragraphe 2 Paragraphe 1Paragraphe 2,28,Rendu sur navigateur : bloc (1/3),bloc: toujours lun en dessous de lautre par dfaut (comme un retour chariot) Occupe automatiquement,

25、par dfaut, toute la largeur disponible dans son conteneur Possde de dimensions (hauteur, largeur, profondeur), Peut contenir des lments dimensionns Possde des marges internes (padding) et externes (margin) Peut tre positionn (contribuer la mise en page du document),29,Rendu sur navigateur : inline (

26、2/3),en ligne : toujours lun ct de lautre afin de rester dans le texte Taille dtermine par le texte ou llment quelles contiennent (pour les non remplaces) Faits pour rester au sein du texte pour lenrichir et lui apporter du sens. Pas de marges: ni internes, ni externes (valeur nulle) Pas prvu pour t

27、re (mme si cela est possible) positionnes, Leur donner des dimensions (hauteur, largeur, profondeur): exception faite des balises en-ligne remplaces,30,Rendu sur navigateur par dfaut (3/3),Les balises block ont un positionnement de type block Les balises en ligne en un positionnement de type en lign

28、e Possibilit de basculer dun positionnement lautre avec la proprit CSS display,31,Exemples (1/2),Paragraphe 1Paragraphe 2 Les paragraphes saffichent les uns sous les autres,Toto et moi Les styles se mettent en place sur la mme ligne,Paragraphe 1Paragraphe 2 Avec : p display : inline; Les paragraphes

29、 saffichent les uns a la suite des autres comme des span,Toto et moi Avec : em display : block; Le contenu de em est envoy la ligne,32,Exemples (2/2),item 1item item 3item 4 Les items saffichent les uns sous les autres,item 1item item 3item 4 Avec : li display : inline; Les items saffichent les uns

30、la suite des autres comme des span,33,Le positionnement,Bas sur limbrication et les notions de parent (parent, anctre, frre, .) Notion de parent facilitant galement la mise en place de style grce aux slecteurs Anctre : lment qui contient un lment ou une hirarchie dlments Parent : lment contenant dir

31、ectement un autre bloc Parent = Anctre immdiat. Frre : lments ayant le mme lment Parent,34,Les diffrents schmas de positionnement,Un schma de positionnement dans le Flux (positionnement par dfaut) (static) Trois schmas hors du flux HTML Positionnement absolu (absolute) Positionnement fix (fixed) Pos

32、itionnement flottant (float) Un dernier positionnement, dit relatif, est en fait une variante du positionnement courant (Flux) qui provoque un dcalage. (relative) La notion de Flux est fondamentale.,35,Positionnement dans le flux,Les lments (balises) sont placs les uns aprs les autres dans le code H

33、TML de la page. Notion fondamentale de balises structurelles inline ou block Chaque lment est donc dpendant des lments frres qui lentourent,.conteneur padding-top: 200px; padding-left: 15px; .bloc width: 100px; height: 100px; background-color: yellow; ,36,Positionnement en flottant,Proprit CSS FLOAT

34、 Permet de positionner un bloc gauche ou droite dans un parent (et non-plus lun en-dessous de lautre). Le reste du conteneur parent occupera alors lespace laiss libre. Un flottant sort du flux courant pas compt dans le calcul de la hauteur du conteneur peu dpasser si non spcifi, texte bla bla bla .

35、Et la CSS correspondante : .gauche float: left; ,37,Les positionnements absolu, fixe ou relatif,Ide reue : ne permet pas (ou difficilement) ladaptation du site aux diffrentes rsolutions dcran. Possibilit de travailler en % Cest le seul moyen de superposer deux blocs (avec la proprit z-index),38,Posi

36、tionnement absolu et fixe,Lorsquil est en position absolue ou fixe, le bloc est dit positionn. Il est retir du flux du code html : son positionnement sera le mme quel que soit lemplacement de la balise dans le code du conteneur parent, quel que soit sa fraternit. Le bloc est plac par rapport son par

37、ent sil est lui-mme positionn, ou alors par rapport au dernier Anctre positionn (HTML si pas danctres positionns). Le bloc est gnralement plac laide des proprits top et left par rapport au coin suprieur gauche du parent.,39,Positionnement relatif,Lorsquil est en position relatif, le bloc est aussi d

38、it positionn. Positionnement qui laisse llment dans le flux normal dpend et influence les lments frres tout en le dcalant laide des proprits top et left. Avantage : peut servir de parent pour des lments hors-flux (position absolue par exemple).,40,Le positionnement : Exemple,p.rel background-color :

39、 lightblue;padding : 10px, 30px, 30px, 10px;border : medium solid blue;position : relative;left:50px width:300px img.relborder : medium solid green;position : relative;left:10px,p.absbackground-color : pink;padding : 10px, 10px, 10px, 10px;border : medium solid blue;position : absolute;left:80px;top

40、:350px; img.absborder : medium solid yellow;position : absolute;left:10px;top:300px;, Ceci est un paragraphe plac en positionnement relatif Ceci est un paragraphe plac en positionnement absolu,41,Dpassement du contenu (1/2) : proprit Clip,Equivalent un rognage de limage Sapplique lors dun positionne

41、ment absolu Permet de dfinir un masque (dune forme donne) sur limage Clip:rect(haut, droit, bas , gauche) Exemple: img.test position:absolute; top:10px; left:10px; clip:rect(0, 25, 25, 0); ,42,Dpassement du contenu (2/2) : proprit overflow,Permet de grer le dpassement Overflow : valeur Valeur : Visi

42、ble : la bote est agrandi aux dimensions de limage Hidden : le contenu est rogn Scroll : ajout dune scrollbar Exemple:,div width:300px;height:300px;overflow:scroll;border : medium solid blue; ,43,La superposition : z-index,Que faire lorsque deux boites se chevauchent ? Z-index : priorit sur laxe z Plus la valeur est grande plus llment est prioritaire (valeur allant de -1 ) Exemple: .toto po