CSS. Alexandre Benoit TS10. D après openclassrooms

Transcription

1 CSS D après openclassrooms Alexandre Benoit TS10

2 I Les bases du CSS 2 / 31

3 Introduction Où écrit t on le CSS? : 3 / 31

4 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css 3 / 31

5 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans le fichier THML, on écrit : <meta charset=" utf 8" /> <l i n k r e l=" s t y l e s h e e t " href=" s t y l e. c s s " /> 3 / 31

6 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans le fichier THML, on écrit : <meta charset=" utf 8" /> <l i n k r e l=" s t y l e s h e e t " href=" s t y l e. c s s " /> Dans le fichier sylte.css, on peut écrire juste : p { } c o l o r : b l u e ; 3 / 31

7 Class Si on veut mettre en bleu certains paragraphes et pas tous, on va les marquer. Par exemple on écrit dans le fichier html : <p c l a s s = " t o t o "> Ce p a r a g r a p h e s e r a en b l e u.</p> 4 / 31

8 Class Si on veut mettre en bleu certains paragraphes et pas tous, on va les marquer. Par exemple on écrit dans le fichier html : <p c l a s s = " t o t o "> Ce p a r a g r a p h e s e r a en b l e u.</p> On modifie alors le fichier css par :. t o t o { c o l o r : b l u e ; } 4 / 31

9 Class Si on veut mettre en bleu certains paragraphes et pas tous, on va les marquer. Par exemple on écrit dans le fichier html : <p c l a s s = " t o t o "> Ce p a r a g r a p h e s e r a en b l e u.</p> On modifie alors le fichier css par :. t o t o { c o l o r : b l u e ; } Bien sûr on aurait pu mettre class dans d autres balises comme <h1> ou <em>. 4 / 31

10 Balise universelle Et si ce que l on veut entourer en bleu n est pas dans une balise? Il existe alors 2 types de balises : 5 / 31

11 Balise universelle Et si ce que l on veut entourer en bleu n est pas dans une balise? Il existe alors 2 types de balises : <span> </span> : c est une balise de type inline, c est-à-dire une balise que l on place au sein d un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s utilise donc au milieu d un paragraphe et c est celle dont nous allons nous servir pour colorer «bienvenue». 5 / 31

12 Balise universelle Et si ce que l on veut entourer en bleu n est pas dans une balise? Il existe alors 2 types de balises : <span> </span> : c est une balise de type inline, c est-à-dire une balise que l on place au sein d un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s utilise donc au milieu d un paragraphe et c est celle dont nous allons nous servir pour colorer «bienvenue». <div> </div> : c est une balise de type block, qui entoure un bloc de texte. Les balises <p>, <h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau «bloc» dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d un design. 5 / 31

13 Quelques sélecteurs Ceux que l on connaît déjà : p{ c o l o r : b l u e ; } 6 / 31

14 Quelques sélecteurs Ceux que l on connaît déjà : p{ c o l o r : b l u e ; } * : sélecteur universel : { c o l o r : b l u e ; } 6 / 31

15 Quelques sélecteurs Ceux que l on connaît déjà : p{ c o l o r : b l u e ; } * : sélecteur universel : { c o l o r : b l u e ; } A B : Balise contenue dans une autre : h3 em{ c o l o r : b l u e ; } 6 / 31

16 Quelques sélecteurs Ceux que l on connaît déjà : p{ c o l o r : b l u e ; } * : sélecteur universel : { c o l o r : b l u e ; } A B : Balise contenue dans une autre : h3 em{ c o l o r : b l u e ; } A+B : Balise qui suit une autre : h3+p{ c o l o r : b l u e ; } 6 / 31

17 Quelques sélecteurs Ceux que l on connaît déjà : p{ c o l o r : b l u e ; } * : sélecteur universel : { c o l o r : b l u e ; } A B : Balise contenue dans une autre : h3 em{ c o l o r : b l u e ; } A+B : Balise qui suit une autre : h3+p{ c o l o r : b l u e ; } D autres sélecteurs existent 6 / 31

18 II Formatage du texte 7 / 31

19 La taille Taille absolue : Par exemple pour avoir des lettres de 16 pixels de hauteur, on écrit : p{ font s i z e : 16 px ; } 8 / 31

20 La taille Taille absolue : Par exemple pour avoir des lettres de 16 pixels de hauteur, on écrit : p{ font s i z e : 16 px ; } Taille relative : Deux moyens. En utilisant des valeurs prédéfinies : p{ font s i z e : s m a l l ; } Ou en utilisant des valeurs brutes : p{ font s i z e : 1. 5em ; } 8 / 31

21 Police Il suffit ici d écrire : p{ font f a m i l y : p o l i c e ; } 9 / 31

22 Police Il suffit ici d écrire : p{ font f a m i l y : p o l i c e ; } Voici une liste des polices disponibles sur tous les navigateurs : Voici une liste de polices qui fonctionnent bien sur la plupart les navigateurs : Arial ; Arial Black ; Comic Sans MS ; Courier New ; Georgia ; Impact ; Times New Roman ; Trebuchet MS ; Verdana. 9 / 31

23 Italique, gras, souligné Mettre en italique, on utilise : p{ font s t y l e : i t a l i c ; } 10 / 31

24 Italique, gras, souligné Mettre en italique, on utilise : p{ font s t y l e : i t a l i c ; } En gras, on utilise : p{ font weight : b o l d ; } 10 / 31

25 Italique, gras, souligné Mettre en italique, on utilise : p{ font s t y l e : i t a l i c ; } En gras, on utilise : p{ font weight : b o l d ; } Souligné : p{ t e x t d e c o r a t i o n : u n d e r l i n e ; } On peut aussi surligner ou barrer avec overline et line-through. 10 / 31

26 Alignement On peut aligner un texte à droite de la manière suivante : p{ t e x t a l i g n : r i g h t ; } 11 / 31

27 Alignement On peut aligner un texte à droite de la manière suivante : p{ t e x t a l i g n : r i g h t ; } On peut évidemment utiliser aussi left et center ou encore justify. 11 / 31

28 III La couleur et le fond 12 / 31

29 Couleur du texte On peut utiliser Le nom des couleurs : p{ c o l o r : maroon ; } 13 / 31

30 Couleur du texte On peut utiliser Le nom des couleurs : p{ c o l o r : maroon ; } La notation hexadécimale : p{ c o l o r : #FFFFFF ; } 13 / 31

31 Couleur du texte On peut utiliser Le nom des couleurs : p{ c o l o r : maroon ; } La notation hexadécimale : p{ c o l o r : #FFFFFF ; } La méthode RGB : p{ c o l o r : rgb ( 2 4 0, 9 6, ) ; } 13 / 31

32 Couleur du texte On peut utiliser Le nom des couleurs : p{ c o l o r : maroon ; } La notation hexadécimale : p{ c o l o r : #FFFFFF ; } La méthode RGB : p{ c o l o r : rgb ( 2 4 0, 9 6, ) ; } 13 / 31

33 Couleur du texte On peut utiliser Le nom des couleurs : p{ c o l o r : maroon ; } La notation hexadécimale : p{ c o l o r : #FFFFFF ; } La méthode RGB : p{ c o l o r : rgb ( 2 4 0, 9 6, ) ; } Comment obtenir la liste des couleurs? 13 / 31

34 Couleur de fond Il suffit d utiliser le code : body { background c o l o r : b l a c k ; / Le fond de l a page s e r a n o c o l o r : w h i t e ; / Le t e x t e de l a page s e r a b l a n c / } 14 / 31

35 Couleur de fond Il suffit d utiliser le code : body { background c o l o r : b l a c k ; / Le fond de l a page s e r a n o c o l o r : w h i t e ; / Le t e x t e de l a page s e r a b l a n c / } Et si on veut les titres en fond blanc : h1 { background c o l o r : b l a c k ; / Le fond de l a page s e r a n o c o l o r : w h i t e ; / Le t e x t e de l a page s e r a b l a n c / } 14 / 31

36 Image de fond Pour appliquer une image de fond, il suffit d utiliser le code : body { background image : u r l ( " l e n n a. j p g " ) ; } background-attachment : fixer le fond body { background image : u r l ( " l e n n a. j p g " ) ; background attachment : f i x e d ; / Le fond r e s t e r background-repeat : répétition du fond body { background image : u r l ( " l e n n a. j p g " ) ; background r e p e a t : no r e p e a t ; } Et plein d autres options à découvrir en cas de besoin. 15 / 31

37 IV La bordure et les ombres 16 / 31

38 La bordure Pour définir la bordure, on utilise : h1 { b o r d e r : 3px b l u e dashed ; } 17 / 31

39 La bordure Pour définir la bordure, on utilise : h1 { b o r d e r : 3px b l u e dashed ; } Différents type de bordure : 17 / 31

40 Les ombres box-shadow : les ombres des boîtes p{ box shadow : 6 px 6 px 0 px b l a c k ; } 18 / 31

41 Les ombres box-shadow : les ombres des boîtes p{ box shadow : 6 px 6 px 0 px b l a c k ; } text-shadow : l ombre du texte p{ t e x t shadow : 2 px 2 px 4 px b l a c k ; } 18 / 31

42 V Création d apparences dynamiques 19 / 31

43 Au survol a / L i e n s par d e f a u t ( non s u r v o l e s ) / { t e x t d e c o r a t i o n : none ; c o l o r : red ; font s t y l e : i t a l i c ; } a : hover / Apparence au s u r v o l des l i e n s / { t e x t d e c o r a t i o n : u n d e r l i n e ; c o l o r : green ; } 20 / 31

44 Au clic et lors de la sélection Au moment du clic a : a c t i v e / Quand l e v i s i t e u r c l i q u e s u r l e l i e n / { background c o l o r : #FFCC66 ; } 21 / 31

45 Au clic et lors de la sélection Au moment du clic a : a c t i v e / Quand l e v i s i t e u r c l i q u e s u r l e l i e n / { background c o l o r : #FFCC66 ; } Lorsque l élément est sélectionné a : f o c u s / Quand l e v i s i t e u r s e l e c t i o n n e l e l i e n / { background c o l o r : #FFCC66 ; } 21 / 31

46 Lorsque le lien a déjà été sélectionné a : v i s i t e d / Quand l e v i s i t e u r a d e j a vu l a page c o n c e { c o l o r : #AAA; / A p p l i q u e r une c o u l e u r g r i s e / } 22 / 31

47 VI Structurer sa page 23 / 31

48 Les balises structurantes de HTML5 (1) L entête : <header> <! P l a c e z i c i l e contenu de l en t e t e > </ header> 24 / 31

49 Les balises structurantes de HTML5 (1) L entête : <header> <! P l a c e z i c i l e contenu de l en t e t e > </ header> Le pied de page : <f o o t e r> <! P l a c e z i c i l e contenu du p i e d de page </ f o o t e r> 24 / 31

50 Les balises structurantes de HTML5 (2) Le menu : <nav> <ul> < l i><a href=" i n d e x. html ">A c c u e i l</a></ l i> < l i><a href=" forum. html ">Forum</a></ l i> < l i><a href=" c o n t a c t. html ">Contact</a></ l i> </ ul> </ nav> 25 / 31

51 Les balises structurantes de HTML5 (2) Le menu : <nav> <ul> < l i><a href=" i n d e x. html ">A c c u e i l</a></ l i> < l i><a href=" forum. html ">Forum</a></ l i> < l i><a href=" c o n t a c t. html ">Contact</a></ l i> </ ul> </ nav> Une section de page : <s e c t i o n> <h1>ma s e c t i o n de page</h1> <p>bla b l a b l a b l a</p> </ s e c t i o n> 25 / 31

52 Les balises de type block et inline Il existe deux types de balise : Type block : Comme p, h1, article et une balise universelle : <div></ div> 26 / 31

53 Les balises de type block et inline Il existe deux types de balise : Type block : Comme p, h1, article et une balise universelle : <div></ div> Type inline : Comme em, strong, a et une balise universelle : <span></ span> 26 / 31

54 Dimension d un bloc En valeur relative de l écran : p { } width : 50%; En valeur absolue : p { } width : 250 px ; 27 / 31

55 Marge d un bloc p { } width : 350 px ; / On a i n d i q u e une l a r g e u r / margin : auto ; / On peut demander a ce que l e b l o c s o i t c e n t r e avec auto / b o r d e r : 1px s o l i d b l a c k ; t e x t a l i g n : j u s t i f y ; padding : 12 px ; / Marge i n t e r i e u r / margin bottom : 20 px ; / Marge e x t e r i e u r en bas / 28 / 31

56 Positionnement flottant nav float : left ; width : 150px ; border : 1px solid black ; section margin-left : 170px ; border : 1px solid blue ; 29 / 31

57 VII Conclusion 30 / 31

58 Conclusion En pratique il peut être utile de s aider du design d autre page web comme : 31 / 31