CSS
D’après openclassrooms
Alexandre Benoit
TS10
I Les bases du CSS
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 {
c o l o r : b l u e ; }
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 {
c o l o r : b l u e ; }
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
{
c o l o r : b l u e ; }
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
{
c o l o r : b l u e ; }
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>.
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>.
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>.
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.
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.
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
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
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
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
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
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
II Formatage du texte
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 ; }
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 ; }
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.
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.
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 overlineetline-through.
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 overlineetline-through.
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 overlineetline-through.
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 leftetcenter ou encore justify.
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 aussileft etcenter ou encore justify.
III La couleur et le fond
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
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
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
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
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
Couleur de fond
Il suffit d’utiliser le code : body
{
b a c k g r o u n d−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 i r ∗/ 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
{
b a c k g r o u n d−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 i r ∗/ 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 ∗/
}
Couleur de fond
Il suffit d’utiliser le code : body
{
b a c k g r o u n d−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 i r ∗/ 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
{
b a c k g r o u n d−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 i r ∗/ 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 ∗/
}
Image de fond
Pour appliquer une image de fond, il suffit d’utiliser le code : body
{
b a c k g r o u n d−image : u r l ( " l e n n a . j p g " ) ; }
background-attachment: fixer le fond
body { b a c k g r o u n d−image : u r l ( " l e n n a . j p g " ) ;
b a c k g r o u n d−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 a f i x e ∗/}
background-repeat: répétition du fond
body { b a c k g r o u n d−image : u r l ( " l e n n a . j p g " ) ; b a c k g r o u n d−r e p e a t : no−r e p e a t ; }
IV La bordure et les ombres
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 :
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 :
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 ; }
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 ; }
V Création d’apparences dynamiques
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 : r e d ;
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 ; c o l o r : g r e e n ;
}
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 ∗/
{
b a c k g r o u n d−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 ∗/ {
b a c k g r o u n d−c o l o r : #FFCC66 ; }
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 ∗/
{
b a c k g r o u n d−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 ∗/
{
b a c k g r o u n d−c o l o r : #FFCC66 ; }
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 r n e 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 ∗/
}
VI Structurer sa page
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>
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>
Les balises structurantes de HTML5 (2)
Le menu :
<nav>
<u l>
<l i><a h r e f=" i n d e x . h t m l ">A c c u e i l</a></l i>
<l i><a h r e f=" forum . h t m l ">Forum</a></l i>
<l i><a h r e f=" c o n t a c t . h t m l ">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>
Les balises structurantes de HTML5 (2)
Le menu :
<nav>
<u l>
<l i><a h r e f=" i n d e x . h t m l ">A c c u e i l</a></l i>
<l i><a h r e f=" forum . h t m l ">Forum</a></l i>
<l i><a h r e f=" c o n t a c t . h t m l ">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>
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 : Commeem,strong,aet une balise universelle :
<span></span>
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 : Commeem,strong,aet une balise universelle :
<span></span>
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 ; }
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∗/ }
Positionnement flottant
nav float : left ; width : 150px ; border : 1px solid black ; section margin-left : 170px ; border : 1px solid blue ;
VII Conclusion
Conclusion
En pratique il peut être utile de s’aider du design d’autre page web comme : http://freehtml5templates.com
