CSS 3. Julien David. A101 - Julien David (A / 27

Transcription

1 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) / 27

2 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles. Une feuille de style permet de décrire le rendu d un fichier HTML. Attention (encore) CSS n est pas un langage de programmation. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

3 Écriture d une feuille de style 1 s e l e c t e u r{ 2 p r o p r i e t e 1: valeur ; 3 p r o p r i e t e 2: valeur ; 4 } Écriture d une règle Les sélecteurs les plus simples sont les balises html. on verra qu il existe des sélecteurs plus complexes. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

4 Écriture d une feuille de style 1 html{ 2 background c o l o r : grey ; 3 } 4 5 body{ 6 background c o l o r : blue ; 7 } main{ 1 background c o l o r : black ; 2 c o l o r : white ; 3 text a l i g n : center ; 4 } Julien David (A101 - david@lipn.univ-paris13.fr) / 27

5 Associer une feuille de style à un fichier HTML Lier CSS et HTML On ajoute dans l en-tête du fichier HTML (balise <head>) la ligne suivante. <link href= fichier.css rel= stylesheet type= text/css /> Julien David (A101 - david@lipn.univ-paris13.fr) / 27

6 Formatage du texte Le Formatage du texte font-family : police de caractère. font-size : taille des caractères. font-style : texte en italique ou non. font-weight : texte en gras ou non. text-align : alignement horizontal du texte (gauche, droit, centré, justifié). text-decoration : texte souligné, surligné (trait au dessus), barré, clignotant, normal. color : couleur du texte.... Julien David (A101 - david@lipn.univ-paris13.fr) / 27

7 Les couleurs Couleurs Il existe 3 façon de désigner une couleur : 1 par son nom : red, blue, lightblue,... (140 noms supportés à ce jour par tous les navigateurs) 2 par les fonctions rgb et rgba : rgb(255, 0, 0), rgb(0, 0, 255), rgb(173, 216, 230) 3 en héxidécimal : #FF 0000, #0000FF, #ADD8E6 Julien David (A101 - david@lipn.univ-paris13.fr) / 27

8 L arrière-plan Le background background-color background-image background-repeat background-attachment background-position Julien David (A101 - david@lipn.univ-paris13.fr) / 27

9 Les bordures Les bordures border-width border-style (requis) border-color border-radius Julien David (A101 - david@lipn.univ-paris13.fr) / 27

10 Les listes Les listes list-style-type list-style-image list-style-position Julien David (A101 - david@lipn.univ-paris13.fr) / 27

11 Les tableaux Les tableaux border-collapse Julien David (A101 - david@lipn.univ-paris13.fr) / 27

12 Modèle de boîte Julien David (A101 - david@lipn.univ-paris13.fr) / 27

13 Positionnement Positionnement statique : static Valeur par défaut, les éléments apparaîssent dans le même ordre que dans le code HTML, cet ordre est appelé le flux de la page HTML, impossible d utiliser les valeurs : top, left, right, bottom. la largeur par défaut d un type block est la largeur du conteneur. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

14 Positionnement Positionnement relatif : relative Les valeurs : top, left, right, bottom indiquent la position par rapport à celle que l élément aurait du avoir dans le flux. ne modifie pas l affichage des autres éléments dans le flux, garde les mêmes dimensions et marges que pour static. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

15 Positionnement Positionnement absolut : absolute l élément est retiré du flux, l affichage des autres éléments est effectué comme s il n existait pas, Par défaut, l élément est affiché la où il aurait du être affiché dans le flux (risque de superpositions), on utilise donc les valeurs : top, left, right, bottom, ces valeurs indiquent la position du premier ascendant qui n est pas statique (au pire, le navigateur), la largeur par défaut est la largeur minimum pour afficher le contenu. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

16 Positionnement Positionnement fixe : fixed identique à absolute sauf pour deux choses : le positionnement se fait toujours par rapport aux bords du navigateur. en cas de défilement de la page, l élément ne bouge pas. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

17 Objets flottants Objets flottants Un objet flottant que l on peut placer à droite ou à gauche de son conteneur. Le contenu des autres éléments évite alors de se superposer avec l élément flottant. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

18 Classes et identifiants HTML : Classes et identifiants Afin de marquer des balises comme possédant des caractéristiques communes ou unique, il est possible de leur attribuer une ou plusieurs classes, ou un identifiant. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

19 Classes et identifiants Classes Les classes permettent d indentifier un ensemble de balises. Dans le code HTML 1 <a r t i c l e class= exemple > 2 <header><h2 class= i t a l i q u e >Les classes</ h2></ header> 3 Ici, contrairement au monde reel, i l n y a pas de lutte des <em class= italique, rouge >classes</em> 4 </ a r t i c l e> Dans le code CSS 1. exemple{ 2 padding :1%; 3 border : 1px black s o l i d ; 4 border radius :25px ; 5 } 6. i t a l i q u e{ 7 font s t y l e : i t a l i c ; 8 } 9. rouge{ 0 c o l o r : red ; 1 } Julien David (A101 - david@lipn.univ-paris13.fr) / 27

22 Classes et identifiants Identifiant Les identifiants permettent d identifier une balise unique. Dans le code HTML 1 <div id= j o l i f o n d > 2 Ce bloc va avoir un j o l i fond rien que pour lui. 3 </ d i v> Dans le code CSS 1 # j o l i f o n d{ 2 background image : u r l ( j o l i. jpg ) ; 3 background position : top l e f t ; 4 background repeat : no repeat ; 5 } Julien David (A101 - david@lipn.univ-paris13.fr) / 27

25 Les pseudos classes Les pseudos-classes Permet de spécifier un état particulier d une balise. Quelques exemples Interaction avec la souris :hover la souris passe sur la balise. :active clic maintenu sur la balise. Les liens hypertextes : :link lien non visité. :visited lien visité. Les <input> des formulaires :valid les valeurs sont valides. :invalid les valeurs sont invalides. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

26 Les pseudos éléments Les pseudos-éléments Permet de spécifier la mise en page de parties spécifiques d une balise. : :before permet d insérer du contenu avant celui d une balise. : :after permet d insérer du contenu après celui d une balise. : :selection zone sélectionnée/surlignée par l utilisateur. : :first-line première ligne de texte du conteneur. : :first-letter première lettre de texte du conteneur. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

27 Combinaisons Combinaisons de sélecteurs Il est possible de combiner plusieurs sélecteurs. Conjonction 1. l o l : : before,. l o l : : a f t e r{ 2 content : u r l ( l o l. png ) ; 3 } Julien David (A101 - david@lipn.univ-paris13.fr) / 27

28 Rappel : Le DOM Code html 1 <! doctype html> 2 <html> 3 <head> 4 <meta charset= UTF 8 /> 5 </ head> 6 7 <body> 8 <nav> 9 <a href= 5 image. html >Image</ a> 0 <a href= 6 son. html >Son</ a> 1 <a href= 7 video. html >Video</ a> 2 </ nav> 3 4 <main> 5 <header> 6 <h1>je suis l en tete principal de la page</ h1> 7 </ header> 8 9 <a r t i c l e> 0 <header> 1 <h3>je suis l en tete d un article</ h3> 2 </ header> 3 <s e c t i o n> 4 Je suis une section dans un a r t i c l e. 5 </ s e c t i o n> 6 </ a r t i c l e> 7 8 <footer>je suis le pied de page de l a r t i c l e.</ footer> 9 </ main> </ body> 3 4 </ html> DOM html head body meta meta meta title nav main header article footer h1 header section h3 Julien David (A101 - david@lipn.univ-paris13.fr) / 27

29 Combinaisons Combinaisons de sélecteurs A B B descendant de A. A > B B descendant direct de A. A + B B directement adjacent à A (B après A). A B B adjacent à A (B après A). A.B tous les A de classe B. A # B A avec identifiant B. A,B A et B. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

30 Héritage Héritage par défaut Certaines propriétés sont héritées par défaut par tous les éléments du conteneur. La couleur du texte, La police, Les styles de listes,... Exceptions Les balises ayant des propriétés prédéfinies n hériteront pas automatiquement. la couleur des liens hypertextes, les modifications de la police pour les balises <h1>,..., <h6>, <em> et <strong>. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

31 Héritage Héritage par défaut Certaines propriétés sont héritées par défaut par tous les éléments du conteneur. La couleur du texte, La police, Les styles de listes,... Exceptions Les balises ayant des propriétés prédéfinies n hériteront pas automatiquement. la couleur des liens hypertextes, les modifications de la police pour les balises <h1>,..., <h6>, <em> et <strong>. Julien David (A101 - david@lipn.univ-paris13.fr) / 27

32 Héritage Héritage explicite Pour toute propriété, on peut préciser explicitement qu elles vont être héritées du conteneur. Exemple 1 main{ 2 margin :2%; 3 border :1px solid black ; 4 } 5 p{ 6 margin : inherit ; 7 border : i n h e r i t ; 8 } Julien David (A101 - david@lipn.univ-paris13.fr) / 27