La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Langage CSS Cascading style sheets Daprès.

Présentations similaires


Présentation au sujet: "Langage CSS Cascading style sheets Daprès."— Transcription de la présentation:

1 Langage CSS Cascading style sheets Daprès

2 2 HTML et CSS Pour maîtriser laspect final à lécran on utilise un autre langage que le HTML: le langage CSS Pour maîtriser laspect final à lécran on utilise un autre langage que le HTML: le langage CSS version actuelle : CSS2 version actuelle : CSS2 CSS = Cascading Style Sheets = feuilles de style en cascade CSS = Cascading Style Sheets = feuilles de style en cascade traduction officielle des spécifications de référence : traduction officielle des spécifications de référence :

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

4 4 HTML et CSS On veut obtenir quelque chose comme On veut obtenir quelque chose comme

5 5 HTML et CSS Gestion de la couleur du fond Gestion de la couleur du fond

6 6 HTML et CSS Le code html est modifié Le code html est modifié Il faut coller ce code dans toutes les pages du site Il 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 7 HTML et CSS Code html (balise FONT) Code html (balise FONT) Notepad++

8 8 HTML 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 style Bonne réponse: utiliser une feuille de style

9 9 HTML et CSS Feuille de style musee.css Feuille de style musee.cssmusee.css

10 10 HTML et CSS Feuille de style musee.css Feuille de style musee.cssmusee.css

11 11 HTML et CSS Trois méthodes d'application de style CSS: Trois méthodes d'application de style CSS: ajout d'un attribut "style" dans une balise donnée ajout d'un attribut "style" dans une balise donnée ajout d'une section au début du document html : s'applique aux balises du document courant ajout d'une section au début du document html : s'applique aux balises du document courant ajout d'une feuille de style externe (monstyle.css) liée à une ou plusieurs pages html ajout d'une feuille de style externe (monstyle.css) liée à une ou plusieurs pages html

12 12 HTML et CSS attribut "style" dans une balise donnée attribut "style" dans une balise donnée La page personnelle de Bach La page personnelle de Bach Jean-Sébastien Bach était un compositeur prolifique. Jean-Sébastien Bach était un compositeur prolifique. ne s'applique qu'à cette section H1

13 13 HTML et CSS section s'appliquant aux balises du document courant section s'appliquant aux balises du document courant H1 { color: blue } H1 { color: blue } La page personnelle de Bach La page personnelle de Bach L'indication de style porte sur tous les titres de niveau 1 (Heading 1) de la page html

14 14 HTML et CSS feuille de style externe (monstyle.css) liée à une ou plusieurs pages html. feuille de style externe (monstyle.css) liée à une ou plusieurs pages html. page liée à monstyle.css page liée à monstyle.css indique que cette page web utilise les styles du fichier monstyle.css

15 15 HTML et CSS feuille de style externe (monstyle.css) liée à une ou plusieurs pages web. feuille de style externe (monstyle.css) liée à une ou plusieurs pages web. body { background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; color: #336699; } a { font-size: 11px; color: #336600; } sélecteur (ici une balise) propriété valeur

16 16 HTML et CSS Pour a ppliquer 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 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 17 HTML et CSS... à certaines élément portant un attribut "class=...." : code css p.vert { color: #008000; } code html Le contenu de toutes les balises sera vert. Le contenu des autres balises restera bleu (si p { color: #0000ff; } est présent)

18 18 HTML 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 sera vert. Le contenu des autres balises restera bleu ; Une seule balise par page html

19 19 HTML et CSS Héritage : Héritage : body { background-color: #FFFFCC; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; color: #336699; } a { font-size: 11px; color: #336600; } la balise est dans la section. Elle en hérite le style : couleur, police,... sauf pour font-size et color qui corrigent les propriétés de body.

20 20 HTML et CSS (CSS = cascading sheets style) ordre de priorité dans la "cascade" 1. 1.L'auteur: produit des feuilles de style pour un document source. Prioritaire sur 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 l'agent utilisateur: (= navigateur = IE, Mozilla Firefox, Opera...) : applique sa feuille de style par défaut

21 21 HTML 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 22 le positionnement CSS remplace le positionnement par les tableaux html remplace le positionnement par les tableaux html garde la structure logique des balises html contrairement aux tableaux html. garde la structure logique des balises html contrairement aux tableaux html. mise en page "liquide" (liquid layout), absolue ou fixe. mise en page "liquide" (liquid layout), absolue ou fixe. plus difficile à maîtriser que les tableaux html plus difficile à maîtriser que les tableaux html différence entre les navigateurs css hacks. différence entre les navigateurs css hacks.

23 23 le positionnement CSS mise en page "liquide" (liquid layout) : mise en page "liquide" (liquid layout) : boîte flottante (le texte coule autour de la boîte) ou... boîte flottante (le texte coule autour de la boîte) ou... boîte à positionnement relatif (la position s'adapte à la taille de la fenêtre) boîte à positionnement relatif (la position s'adapte à la taille de la fenêtre) mise en page fixe mise en page fixe boîte à positionnement absolu : position fixe par rapport au coin supérieur gauche de page affichée fenêtre, ou... boîte à positionnement absolu : position fixe par rapport au coin supérieur gauche de page affichée fenêtre, ou... boîte à positionnement fixe par rapport à la barre de titre de la fenêtre du navigateur (menus..) : toujours visible. boîte à positionnement fixe par rapport à la barre de titre de la fenêtre du navigateur (menus..) : toujours visible.

24 24 le positionnement CSS le modèle des boîtes : les boîtes en bloc boîtes en blocboîtes en bloc sauf mention contraire : sauf mention contraire : elles sont alignées en succession verticale elles sont alignées en succession verticale elles occupent la largeur de la fenêtre elles occupent la largeur de la fenêtre

25 25 le positionnement CSS le modèle des boîtes : les boîtes en bloc code html : boîte jaune boîte verte

26 26 le positionnement CSS Principales balises générant de 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 p le paragraphe p Les listes et éléments de liste ul, ol, li, dl,dd Les listes et éléments de liste ul, ol, li, dl,dd

27 27 le positionnement CSS le modèle des boîtes : les boîtes en ligne sauf mention contraire : sauf mention contraire : elles se succèdent horizontalement elles se succèdent horizontalement elles occupent la largeur de leur contenu elles occupent la largeur de leur contenu

28 28 le positionnement CSS le modèle des boîtes : les boîtes en ligne code html : section span lien hypertexte paragraphe

29 29 le positionnement CSS Principales balises générant des boîtes 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 30 le positionnement CSS les dimensions des boîtes (

31 31 le positionnement CSS les dimensions des boites (traduction officielle du w3C :

32 32 le positionnement CSS les dimensions des boites les dimensions des boites

33 33 le positionnement CSS.jaune { background-color: #FFFF66; height: 20px; border: 5px dashed #006699; margin: 30px; padding: 50px; } section span section span

34 34 le positionnement CSS.verte { background-color: #00CC99; height: 30px; width: 200px; margin: 20px; padding: 20px; } lien hypertexte lien hypertexte

35 35 le positionnement CSS.rouge { background-color: #FF3300; height: 50px; width: 100px; border: 30px solid #CCCC66; padding: 30px; } paragraphe paragraphe

36 36 le positionnement CSS Positionnement relatif Positionnement relatif : la boîte est décalée par rapport à la place qu'elle aurait occupée dans le flux normal Positionnement relatif #verte { background-color: #00CC99; margin: 10px; padding: 10px; position: relative; top: 10px; } jaune vert jaune jaune vert jaune

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

38 38 le positionnement CSS boîte flottante : code html Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imperdiet pour aller plus loin :

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

40 40 le positionnement CSS codes css (positionnement absolu) #maboîte { position: absolute; left: 387px; top: 59px; } code html

41 41 le positionnement CSS code css #p1 { position: absolute; left: 51px; top: 62px; width: 313px; } code html Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imp (...) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imp (...)

42 42 le positionnement CSS code css #p2 { #p2 { position: absolute; width: 543px; height: 70px; left: 50px; top: 222px; } code html Donec at velit vel purus (...) Donec at velit vel purus (...)


Télécharger ppt "Langage CSS Cascading style sheets Daprès."

Présentations similaires


Annonces Google