CSS D`après openclassrooms - Page personnelle d`Alexandre Benoit

CSS
D’après openclassrooms
Alexandre Benoit
TS10
I Les bases du CSS
2 / 31
Introduction
Où écrit t’on le CSS ? :
3 / 31
Introduction
Où écrit t’on le CSS ? :
Dans un nouveau fichier par exemple, nous l’écrirons dans le fichier
style.css
3 / 31
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 c h a r s e t=" u t f −8" />
<l i n k r e l=" s t y l e s h e e t " h r e f=" s t y l e . c s s " />
3 / 31
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 c h a r s e t=" u t f −8" />
<l i n k r e l=" s t y l e s h e e t " h r e f=" s t y l e . c s s " />
Dans le fichier sylte.css, on peut écrire juste :
p
{
color : blue ;
}
3 / 31
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
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 :
. toto
{
color : blue ;
}
4 / 31
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 :
. toto
{
color : blue ;
}
Bien sûr on aurait pu mettre class dans d’autres balises comme <h1> ou
<em>.
4 / 31
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
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
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
Quelques sélecteurs
Ceux que l’on connaît déjà :
p{ c o l o r : b l u e ; }
6 / 31
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
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
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
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
II Formatage du texte
7 / 31
La taille
Taille absolue : Par exemple pour avoir des lettres de 16 pixels de
hauteur, on écrit :
p{ f o n t −s i z e : 16 px ; }
8 / 31
La taille
Taille absolue : Par exemple pour avoir des lettres de 16 pixels de
hauteur, on écrit :
p{ f o n t −s i z e : 16 px ; }
Taille relative : Deux moyens. En utilisant des valeurs prédéfinies :
p{ f o n t −s i z e : s m a l l ; }
Ou en utilisant des valeurs brutes :
p{ f o n t −s i z e : 1 . 5 em ; }
8 / 31
Police
Il suffit ici d’écrire :
p{
f o n t −f a m i l y : p o l i c e ; }
9 / 31
Police
Il suffit ici d’écrire :
p{
f o n t −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
Italique, gras, souligné
Mettre en italique, on utilise :
p{
f o n t −s t y l e : i t a l i c ; }
10 / 31
Italique, gras, souligné
Mettre en italique, on utilise :
p{
f o n t −s t y l e : i t a l i c ; }
En gras, on utilise :
p{
f o n t −w e i g h t : b o l d ; }
10 / 31
Italique, gras, souligné
Mettre en italique, on utilise :
p{
f o n t −s t y l e : i t a l i c ; }
En gras, on utilise :
p{
f o n t −w e i g h t : 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
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
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
III La couleur et le fond
12 / 31
Couleur du texte
On peut utiliser
Le nom des couleurs :
p{ c o l o r : maroon ; }
13 / 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 ; }
13 / 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 : r g b ( 2 4 0 , 9 6 , 2 0 4 ) ; }
13 / 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 : r g b ( 2 4 0 , 9 6 , 2 0 4 ) ; }
13 / 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 : r g b ( 2 4 0 , 9 6 , 2 0 4 ) ; }
Comment obtenir la liste des couleurs ?
http://fr.wikipedia.org/wiki/Liste_de_couleurs
13 / 31
Couleur de fond
Il suffit d’utiliser le code :
body
{
background −c o l o r : b l a c k ; /∗ Le f o n d 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
Couleur de fond
Il suffit d’utiliser le code :
body
{
background −c o l o r : b l a c k ; /∗ Le f o n d 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 f o n d 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
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 −a t t a c h m e n t : f i x e d ; /∗ Le f o n d 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
IV La bordure et les ombres
16 / 31
La bordure
Pour définir la bordure, on utilise :
h1 { b o r d e r : 3 px b l u e d a s h e d ; }
17 / 31
La bordure
Pour définir la bordure, on utilise :
h1 { b o r d e r : 3 px b l u e d a s h e d ; }
Différents type de bordure :
17 / 31
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
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
V Création d’apparences dynamiques
19 / 31
Au survol
a /∗ L i e n s p a r 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 ;
f o n t −s t y l e : i t a l i c ;
}
a : h o v e r /∗ A p p a r e n c e au s u r v o l d e s 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 ;
col or : green ;
}
20 / 31
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
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
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
VI Structurer sa page
23 / 31
Les balises structurantes de HTML5 (1)
L’entête :
<h e a d e r>
<!−− P l a c e z i c i l e c o n t e n u de l ’ en−t e t e −−>
</ h e a d e r>
24 / 31
Les balises structurantes de HTML5 (1)
L’entête :
<h e a d e r>
<!−− P l a c e z i c i l e c o n t e n u de l ’ en−t e t e −−>
</ h e a d e r>
Le pied de page :
< f o o t e r>
<!−− P l a c e z i c i l e c o n t e n u du p i e d de page −
</ f o o t e r>
24 / 31
Les balises structurantes de HTML5 (2)
Le menu :
<nav>
<u l>
< l i ><a h r e f=" i n d e x . html ">A c c u e i l</a></ l i >
< l i ><a h r e f=" forum . html ">Forum</a></ l i >
< l i ><a h r e f=" c o n t a c t . html ">C o n t a c t</a></ l i >
</ u l>
</ nav>
25 / 31
Les balises structurantes de HTML5 (2)
Le menu :
<nav>
<u l>
< l i ><a h r e f=" i n d e x . html ">A c c u e i l</a></ l i >
< l i ><a h r e f=" forum . html ">Forum</a></ l i >
< l i ><a h r e f=" c o n t a c t . html ">C o n t a c t</a></ l i >
</ u l>
</ 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>B l a b l a b l a b l a</p>
</ s e c t i o n>
25 / 31
Les balises de type block et inline
Il existe deux types de balise :
Type block : Comme p, h1, article et une balise universelle :
<d i v></ d i v>
26 / 31
Les balises de type block et inline
Il existe deux types de balise :
Type block : Comme p, h1, article et une balise universelle :
<d i v></ d i v>
Type inline : Comme em, strong, a et une balise universelle :
<span></ span>
26 / 31
Dimension d’un bloc
En valeur relative de l’écran :
p
{
w i d t h : 50%;
}
En valeur absolue :
p
{
w i d t h : 250 px ;
}
27 / 31
Marge d’un bloc
p
{
w i d t h : 350 px ; /∗ On a i n d i q u e une l a r g e u r ∗/
m a r g i n : a u t o ; /∗ On p e u t demander
a c e que l e b l o c s o i t c e n t r e a v e c a u t o ∗/
b o r d e r : 1 px 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 ;
p a d d i n g : 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 b a s ∗/
}
28 / 31
Positionnement flottant
nav float : left ; width : 150px ; border : 1px solid black ;
section margin-left : 170px ; border : 1px solid blue ;
29 / 31
VII Conclusion
30 / 31
Conclusion
En pratique il peut être utile de s’aider du design d’autre page web comme :
http://freehtml5templates.com
31 / 31