Cascading style sheets Langage CSS Cascading style sheets D’après http://www.u-bourgogne.fr/MODCI/ideri/ressources/web/mise%20en%20forme%20et%20language%20css.ppt
HTML et CSS Pour maîtriser l’aspect final à l’écran on utilise un autre langage que le HTML: le langage CSS version actuelle : CSS2 CSS = Cascading Style Sheets = feuilles de style en cascade traduction officielle des spécifications de référence : http://www.yoyodesign.org/doc/w3c/css2/cover.html
HTML et CSS Exemple d'un site sans css ni mise en forme (mise en page par tableau)
HTML et CSS On veut obtenir quelque chose comme
HTML et CSS Gestion de la couleur du fond
HTML et CSS Le code html est modifié Il faut coller ce code dans toutes les pages du site On recommence pour les fonds de tableaux etc. Les espacements, les fontes, les couleurs de texte, …
HTML et CSS Code html (balise FONT) Notepad++
HTML et CSS 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 ? Réponses (imparfaites) : 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. Bonne réponse: utiliser une feuille de style
HTML et CSS Feuille de style musee.css
HTML et CSS Feuille de style musee.css
HTML et CSS Trois méthodes d'application de style CSS: ajout d'un attribut "style" dans une balise donnée ajout d'une section <style> 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
ne s'applique qu'à cette section H1 HTML et CSS attribut "style" dans une balise donnée <BODY> <H1 style="color:blue">La page personnelle de Bach</H1> <P >Jean-Sébastien Bach était un compositeur prolifique. </BODY> ne s'applique qu'à cette section H1
HTML et CSS section <style> s'appliquant aux balises du document courant <HEAD> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <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
indique que cette page web utilise les styles du fichier monstyle.css HTML et CSS feuille de style externe (monstyle.css) liée à une ou plusieurs pages html. <head> <title>page liée à monstyle.css </title> <link href="monstyle.css" rel="stylesheet" type="text/css"> </head> indique que cette page web utilise les styles du fichier monstyle.css
sélecteur (ici une balise) HTML et CSS 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) valeur propriété
HTML et CSS Pour 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)
HTML 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)
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 <p id="vert"> sera vert. Le contenu des autres balises <p> restera bleu ; Une seule balise <p id="vert"> par page html
sauf pour font-size et color qui corrigent les propriétés de body. HTML et CSS 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 <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.
HTML et CSS ordre de priorité dans la "cascade" (CSS = cascading sheets style) ordre de priorité dans la "cascade" 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
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)
le positionnement CSS remplace le positionnement par les tableaux html garde la structure logique des balises html contrairement aux tableaux html. mise en page "liquide" (liquid layout), absolue ou fixe. plus difficile à maîtriser que les tableaux html différence entre les navigateurs css hacks.
le positionnement CSS mise en page "liquide" (liquid layout) : 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) 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 fixe par rapport à la barre de titre de la fenêtre du navigateur (menus ..) : toujours visible. Absolute Positioning Layout (using "position:absolute") Pros Precise positioning of elements in relation to their nearest positioned ancestor. Allows you to create a page where the order of the information in the HTML is completely different than the order things appear on the page, i.e. navigation columns can be pushed down to the end of the HTML code but still appear as the left column of the page. Cons Because absolutely positioned elements are no longer in the document flow, it is harder to line them up with other page sections. There is no way to instruct other parts of the page to start or end with respect to the absolutely positioned element, instead you must allow enough room in the design for both the maximum and minimum size that the element could ever have. Possibility of overlaps. If you don't know which column will be longest, you can't have a footer that spans all the columns. Float Layout (using "float:left" or "float:right") Easier to achieve simple layouts. Avoids the footer problem. See FooterBeneathSidebar. Tied to the document flow. Allows less flexibility. Lots of browser bugs, that, although possible to get around, add significantly to browser testing and tweaking time. See also: CssPositioning
le positionnement CSS le modèle des boîtes : les boîtes en bloc sauf mention contraire : elles sont alignées en succession verticale elles occupent la largeur de la fenêtre
le positionnement CSS le 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>
le positionnement CSS Principales balises générant de boîtes en bloc : l'élément générique div les titres h1, h2, h3, h4, h5, h6 le paragraphe p Les listes et éléments de liste ul, ol, li, dl,dd
le modèle des boîtes : les boîtes en ligne le positionnement CSS le modèle des boîtes : les boîtes en ligne sauf mention contraire : elles se succèdent horizontalement elles occupent la largeur de leur contenu
le positionnement CSS le 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>
le positionnement CSS Principales balises générant des boîtes en ligne: l'élément générique span ; le lien hypertexte a ; L'image img ; les ornements : u (underline), b (bold), s (strong) i (italic) em (emphasize)
le positionnement CSS les dimensions des boîtes (http://www.brainjar.com/css/positioning/)
le positionnement CSS les dimensions des boites (traduction officielle du w3C : http://www.yoyodesign.org/doc/w3c/css2/box.html)
le positionnement CSS les dimensions des boites
le positionnement CSS .jaune { background-color: #FFFF66; height: 20px; border: 5px dashed #006699; margin: 30px; padding: 50px; } <span class="jaune">section span </span>
le positionnement CSS .verte { background-color: #00CC99; height: 30px; width: 200px; margin: 20px; padding: 20px; } <a class="verte">lien hypertexte</a>
le positionnement CSS .rouge { background-color: #FF3300; height: 50px; width: 100px; border: 30px solid #CCCC66; padding: 30px; } <p class="rouge">paragraphe</p>
le positionnement CSS Positionnement relatif : la boîte est décalée par rapport à la place qu'elle aurait occupée dans le flux normal #verte { background-color: #00CC99; margin: 10px; padding: 10px; position: relative; top: 10px; } <span class="jaune">jaune</span> <span id="verte">vert</span> <span class="jaune">jaune</span>
le positionnement CSS boîte flottante : 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
le positionnement CSS boîte flottante : code html <style> #maboîte { float: left; } </style> <img id="maboîte" src="rose.jpg" width="200" height="150"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imperdiet pour aller plus loin : http://openweb.eu.org/articles/initiation_float/ http://www.brainjar.com/css/positioning/
le positionnement CSS positionnement absolu : le bloc est positionné par rapport au coin supérieur gauche de la fenêtre
le positionnement CSS codes css (positionnement absolu) code html #maboîte { position: absolute; left: 387px; top: 59px; } code html <img id="maboîte" src="rose.jpg" width="200" height="150">
le positionnement CSS code css code html #p1 { position: absolute; left: 51px; top: 62px; width: 313px; } code html <p id="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus suscipit nisl. Sed imp (...)
le positionnement CSS code css code html #p2 { position: absolute; width: 543px; height: 70px; left: 50px; top: 222px; } code html <p id="p2">Donec at velit vel purus (...)