View
231
Download
0
Category
Preview:
Citation preview
7/25/2019 Chapitre3 CSS
1/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
2/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; - J17 ,K,8.+,D :"" 0(*L7, +,4 .(+/0,4D +,4 0(*+,*74D +,4 817C,4D +,4
+/C3,4D +1 51*2,*7D +1 +17C,*7D +,4 /81C,4 )M177/N7,O.+13D +,4 .(4/2/(33,8,324 9L(+*9,4 ,2 P/,3 )M1*27,4
05(4,4Q
!"# %"&'(("# )" #*+(", -.&/0&.' %1'/" 2
R3 H#'ID .(*7 8,227, ,3 G(78, *3 2/27, 3(*4 *2/+/4(34 +1 P1+/4, SG(32T>
!"# %&%'()% *
Mon titre
ici
:, F*/ )(33, +, 794*+212 4*/L132 -
!"# %&%'( &)&
!81C/3(34 F*, 3(*4 16(34 U 2/27,4 )134 +1 8V8, .1C,D 1L,0 +1 8V8, .794,3212/(3D 3(*4 79.92,7/(34
U G(/4 3(27, P1+/4, SG(32T 1L,0 2(*4 4,4 1227/P*24> :,0/ )(33,71/ *3 0(), P1L17) ,2 3(*4 (P+/C,71/ W ),
8*+2/.+,4 8()/G/012/(34 +, X(*7 (Y +M(3 4(*51/2, 8()/G/,7 +1 0(*+,*7 ), 3(4 2/27,4>
I1 4(+*2/(3D 49.17,7 +, 0(), ,2 +1 .794,3212/(3 1L,0 +,4 :""
$L,0 +,4 G,*/++,4 ), 426+,D (3 .,*2 7,C7(*.,7 +,4 /3G(7812/(34 ), .794,3212/(3 *3, G(/4 .(*7 2(*2,.(*7 3(27, .1C,>
I1 G/C*7, 4*/L132, 8(327, 0, F*, )(33, +1 8V8, .1C, 4134 :"" .*/4 1L,0 +, :"">
7/25/2019 Chapitre3 CSS
3/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; - R++, .(4, +,4 P14,4 ), 0, +13C1C, F*/
.,78,2 ), .794,32,7 41 .1C, [,PD 0(88, +,4 0(*+,*74D +,4 817C,4D +,4 .(+/0,4 ), 017102N7,4D ,20>
:"" A - 1..17*, ,3 =ZZZ .*/4 0(8.+929, .17 :"" A>=D 0,22, 3(*L,++, L,74/(3 ), :"" 71X(*2, ),3(8P7,*4,4 (.2/(34> ?3 .,*2 )94(781/4 *2/+/4,7 ),4 2,053/F*,4 ), .(4/2/(33,8,32 27N4 .790/4,4D F*/
3(*4 .,78,22,32 )M1GG/05,7 ),4 9+98,324 (Y (3 +, 4(*51/2, 4*7 +1 .1C,>
:"" ; - 0M,42 +1 ),73/N7, L,74/(3D F*/ 1..(72, ),4 G(302/(331+/294 .172/0*+/N7,8,32 122,3)*,4 0(88,
+,4 P(7)*7,4 177(3)/,4D +,4 )9C71)94D +,4 (8P7,4D ,20>
7&"(# #.4* ("# 1314*18"# )" 566 2
:"" G*2 *3, 79L(+*2/(3 )134 +M*3/L,74 ), +1 0(30,.2/(3 \,P> I,4 1L1321C,4 0(307,24 ), :"" 4(32 +,4
4*/L1324 -
I, 0(327]+, ), +1 .794,3212/(3 ), .+*4/,*74 )(0*8,324 .17 *3, 4,*+, G,*/++, ), 426+, ^
@3 0(327]+, .+*4 .790/4 ), +1 .794,3212/(3 ^
_,4 .794,3212/(34 )/GG97,32,4 1..+/F*9,4 W ),4 26.,4 ), 89)/14 )/GG97,324 BW +M90713D W
+M/8.7,44/(3D ,20>E ^
_, 3(8P7,*4,4 2,053/F*,4 9L(+*9,4 ,2 4(.5/42/F*9,4>
_134 0, F*/ 4*/2D 3(*4 L,77(34 0(88,32 :"" G(302/(33, 79,++,8,32 ,2 0(88,32 0(88,30,7
." /,00'() /11 2,(3)+,(('4)4+5 6
_134 0, 051./27,D 3(*4 1..7,3)7(34 W G1P7/F*,7 3(27, .7,8/N7, G,*/++, ), 426+,> `(*4 41*7(34 0,
F*M,42 +, 8()N+, :"" ), P14, ,2 F*,+4 4(32 +,4 0(),4 390,441/7,4 .(*7 *2/+/4,7 :"" )134 *3 )(0*8,32
H#'I>
a,1*0(*. ), .7(.7/9294 ),4 G,*/++,4 ), 426+, ,3 01401), B:""E 4(32 4/8/+1/7,4 W 0,++,4 ), H#'I> "/
3(*4 1L(34 +M51P/2*), )M*2/+/4,7 H#'I .(*7 +1 .794,3212/(3D 3(*4 7,0(331b27(34 )(30 P,1*0(*. ),
0,4 0(),4> c(6(34 *3 ,K,8.+, 0(307,2>
! !1 #+4*19" 566 )" :1#" ;
I1 )9G/3/2/(3 ), P14, )M*3 426+, ,42 4/8.+, -
a1+/4, d.7(.7/929 ), 426+,- L1+,*7^ .7(.7/929 ), 426+,- L1+,*7e
RK,8.+, = -
$L,0 H#'ID 3(*4 +M1*7/(34 G1/2 0(88, 0,0/ -
?@AABBBB?C
$L,0 :""D (3 .,*2 (P2,3/7 +, 8V8, 794*+212 0(88, 0,+1 -
:.)+ D:1=E8/.&4)F=.(./; @AABBBBGH
7/25/2019 Chapitre3 CSS
4/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; - R2 )134 L(27, )(0*8,32D 2(*2,4 +,4 P1+/4,4
SH;T 1*7(32 0(88, 426+, $7/1+ ,2 /21+/F*,>
:(88, 3(*4 +M1*7(34 7,817F*9D +,4 0(),4 4(32 .+*4 (* 8(/34 /),32/F*,4 .(*7 H#'I ,2 :""> :,4
,K,8.+,4 /++*427,32 9C1+,8,32 +, 8()N+, G(3)18,321+ ), :"" -
",+,02(7 d.7(.,726-L1+*,^Qe
." /,00'() *775+89'$ /11 : 9( ;,390'() ? 6
Il y a trois faons d'appliquer le style CSS un document HTML.
dans un fichier .css (mthode la plus recommande) ;
dans l'en-tte du fichier HTML ;
directement dans les balises du fichier HTML via un attribut style (mthode la moins
recommande).
Elles sont toutes expliques ci-dessous :
" Dans un fichier .css (recommand)
?3 907/2 +, 0(), :"" )134 *3 G/05/,7 4.90/1+ 16132 +M,K2,34/(3 g >044 h> :M,42 +1 8925(), +1 .+*4
.712/F*, ,2 +1 .+*4 4(*.+,> :,+1 3(*4 9L/2, ), 2(*2 89+13C,7 )134 *3 8V8, G/05/,7> BJ(*7 +, 7,42,D
3(*4 *2/+/4,7(34 0,22, 8925(), .(*7 2(*4 +,4 ,K,8.+,4>E
!"#$%&
!"()*&
!$(#)+"),-(#./0#123/4&!%567,(%./-#8%(-"((#/",(1./-#8%(9+--/4&
!#5#%(&:,($5(,- #(-#- *0 ;!4"()*&
!=>*8&
!"?&@>6 -0A(, -5#(!4"?&
!A&B>6C>0, (# =5(6D(60( -0, $>6 -5#( E!4A&
!A&:>0, %( $>$(6#F $>6 -5#( (-# 06 A(0 !($&D5*(!4($&9 :)#5(6#(G (6+>,( 06 A(0 E!4A&
!4=>*8&
!4"#$%&
`(2,i +, 0(32,3* ), +1 +/C3, 044 ,2 0517C9 ), +1 8/4, ,3 G(78,>
$ F*,++, P1+/4, H#'I +1
.7(.7/929 4j1..+/F*,> RK>
a()6D H;D Q
I1 .7(.7/929D .17 ,K,8.+,
+1 0(*+,*7 )j177/N7,O.+13
P10kC7(*3)O0(+(7 ^
I1 L1+,*7 ), +1 .7(.7/929D .17
,K,8.+, +1 0(*+,*7 )j177/N7,O
.+13 ,42 7(*C, - l
7/25/2019 Chapitre3 CSS
5/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
6/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
7/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; - 6 -0A(, -5#(!4"?&
!A&B>6C>0, (# =5(6D(60( -0, $>6 -5#( E!4A&
!A&:>0, %( $>$(6#F $>6 -5#( (-# 06 A(0 !($&D5*(!4($&9 :)#5(6#(G (6+>,( 06 A(0 E!4A&
!4=>*8&
!4"#$%&
Testez, vous verrez que le rsultat est le mme.
" Directement dans les balises (non recommand)
Dernire mthode, manipuler avec prcaution : vous pouvez ajouter un attribut style n'importe quelle balise. Vous insrerez votre code CSS directement dans cet attribut :
!"#$%&
!"()*&
!$(#)+"),-(#./0#123/4&
!#5#%(&:,($5(,- #(-#- *0 ;!4"()*&
!=>*8&
!"?&@>6 -0A(, -5#(!4"?&
!A-#8%(./+>%>,I =%0(J/&B>6C>0, (# =5(6D(60( -0, $>6 -5#( E!4A&
!A&:>0, %( $>$(6#F $>6 -5#( (-# 06 A(0 !($&D5*(!4($&9 :)#5(6#(G (6+>,( 06 A(0 E!4A&
!4=>*8&!4"#$%&
Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code
CSS, sera color en bleu (figure suivante).
7/25/2019 Chapitre3 CSS
8/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
9/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
10/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
11/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
12/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
13/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
14/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
15/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
16/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
17/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
18/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
:510*3, ), 0,4 P(b2,4 ,42 0(342/2*9, )j*3 0(32,3*D )j*3 ,4.10,8,32 /3297/,*7D )j*3, P(7)*7,D ,2
)j*3, 817C, ,K2,73,> c(/0/ +,4 .7(.7/9294 :"" F*/ .,78,22,32 ), )92,78/3,7 +,4 )/8,34/(34D +1
0(*+,*7D +, 426+, ), 0510*3 ), 4,4 0(342/2*1324 -
K1/8'4- 817C, ,K2,73, ), +1 P(b2, B27134.17,32,E^
:./)"/- +1 P(7)*7, ), +1 P(b2,^
-1))'48- 7,.794,32, *3 ,4.10, 1*2(*7 )* 0(32,3* ), +1 P(b2,^
7/25/2019 Chapitre3 CSS
19/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
F"! G,$;'$
Permet de dfinir les bordures autour des lments.
Liste des proprits border :
- border-style
Border-style vous permet de prciser la taille du bord. Les bords peuvent tre en pointill, en
trait, avec ligne continue, une double ligne, etc.
p {border-style:solid;}
Vous pouvez galement utiliser :
dashed (en tirets) ; dotted (en pointills) ; double (double); ridge; inset; outset (en 3D)
- border-color
Border-color vous permet de prciser la couleur du bord.
p {border-color:black}
-border-width :
Dfinit lpaisseur de la bordure.
Exemple :
p {border-width:5px}
Remarque : Les proprits border-width, border-styleet border-color regroupent elles-
mmes les proprits top, left, bottomet right.
7/25/2019 Chapitre3 CSS
20/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; - *$I+(:(88, )/2 .7909),88,32D K1/8'47,.794,32, +1 817C, ,K2,73, ), +1 P(b2,> c(*4 .(*L,i 8()/G/,7
+,4 ,4.10,4 51*2D )7(/2D P14 ,2 C1*05, /3)9.,3)188,32 ),4 1*27,4>
7/25/2019 Chapitre3 CSS
21/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
22/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
7/25/2019 Chapitre3 CSS
23/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; - I,4 L1+,*74 .(44/P+, - /34/),^ (*24/),^
- ('#*F#*+(" ; r100(*70/ C+(P1+ L,74 +,4 .7(.7/9294 ),4 +/42,4 - *+-" -.#'*'.4 &/(VWG
K ?'& 5+'(&`(*4 .(*L(34 1..+/F*,7 1*K +/,34 0, F*, 3(*4 1L(34 )9XW L* )134 +,4 .172/,4 .7909),32,4 B0M,42O
WO)/7, W 0513C,7 +,4 0(*+,*74 ,2 +,4 .(+/0,4D +,4 4(*+/C394D ,20>E> I1 3(*L,1*29D 0M,42 F*, :"" .,78,2 ),
)9G/3/7 0,4 .7(.7/9294 )/GG97,88,32D 4,+(3 F*, +, +/,3 ,42 3'#'*XD 4.4 3'#'*X, 1=*'3XD (* 4/ +, 0*74,*7 +,
#&/3.("> :,+1 .,78,2 )M1X(*2,7 ),4 ,GG,24 .+1/41324 ,2 *2/+,4 W L(4 4/2,4 \,P> J(*7 0(327]+,7 0,4 ,GG,24D
(3 *2/+/4, 0, F*M(3 1..,++, ),4 -#"&).F=(1##"#>
7&Y"#*F=" 0&Y&4" -#"&).F=(1##" 2
@3, .4,*)(O0+144, .,78,2 ), 2,3/7 0(8.2, ), 0(3)/2/(34 ,2 9L93,8,324 )/GG97,324 .(*7 +1
)9G/3/2/(3 )M*3, .7(.7/929 4*7 *3, P1+/4, H#'I>
c(6(34 *3 ,K,8.+,> :(88, L(*4 +, 41L,iD +,4 +/,34 4(32 )9G/3/4 ,3 H#'I 1L,0 ),4 P1+/4,4 S1T>
?3 .,*2 )(30 *2/+/4,7 1 0(88, 49+,02,*7 )134 :"" -
a {color: blue;}
@3 +/,3 ,42 4*40,.2/P+, )M1L(/7 .+*4/,*74 92124> J17 ,K,8.+,D /+ .,*2 V27, L/4/29 (* 3(3> c(*4
.(*L,i *2/+/4,7 ),4 .4,*)(O0+144,4 .(*7 144/C3,7 ),4 426+,4 )/GG97,324 1*K +/,34 L/4/294 ,2 3(3 L/4/294>
1;('4E d0(+(7- P+*,^e
1;3'#'*") d0(+(7- 7,)^e
@2/+/4(34 7,4.,02/L,8,32 1-+/3k ,2 1-L/4/2,) .(*7 +,4 +/,34 3(3 L/4/294 ,2 .(*7 0,*K L/4/294> I,4
+/,34 102/G4 (32 .(*7 .4,*)(O0+144, 1-102/L,D ,2 +1 .4,*)(O0+144, 1-5(L,7 /32,7L/,32 +(74F*, +, 0*74,*7
4*7L(+, +, +/,3>
`(*4 1++(34 81/32,3132 ,K18/3,7 0510*3, ),4 F*127, .4,*)(O0+144,4 1L,0 ),4 ,K,8.+,4 ,2 ),4,K.+/012/(34 4*..+98,321/7,4>
!1 -#"&).F=(1##" ;('4E
I1 .4,*)(O0+144, -+/3k ,42 *2/+/49, .(*7 +,4 +/,34 8,3132 1*K .1C,4 F*, +M*2/+/412,*7 3M1 .14
L/4/29,4>
_134 +, 0(), 4*/L132D +,4 +/,34 3(3 L/4/294 4,7(32 ,3 P+,* 0+1/7>
a:link {color: #6699CC;}
!1 -#"&).F=(1##" ;3'#'*")
I1 .4,*)(O0+144, -L/4/2,) ,42 *2/+/49, .(*7 +,4 +/,34 8,3132 1*K .1C,4 F*, +M*2/+/412,*7 1L/4/29,4> J17 ,K,8.+,D +, 0(), 4*/L132 )(33,71 +1 0(*+,*7 81*L, G(309 W 2(*4 +,4 +/,34 L/4/294 -
7/25/2019 Chapitre3 CSS
24/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
:,2 ,K,8.+, 8(327, ),4 +/,34 102/L94 )(32 +1 0(*+,*7 )M177/N7,O.+13 ,42 X1*3, -
a:active {background-color: #FFFF00;}
!1 -#"&).F=(1##" ;M.3"/
I1 .4,*)(O0+144, -5(L,7 ,42 *2/+/49, +(74F*, +, .(/32,*7 ), +1 4(*7/4 4*7L(+, *3 +/,3>
?3 .,*2 4M,3 4,7L/7 .(*7 079,7 ),4 ,GG,24 /3297,441324> J17 ,K,8.+,D 4/ 3(*4 L(*+(34 F*, 3(4
+/,34 4(/,32 (713C, ,2 ,3 /21+/F*,4 1* 4*7L(+ )* .(/32,*7D +, 0(), :"" ),L71/2 V27, +, 4*/L132 -
a:hover {
color: orange;
font-style: italic;
}
U9"K-("# ;
U#-1="K"4* )"# ("**/"# ;
:(88, /3)/F*9 1L132D (3 .,*2 1X*42,7 +M,4.10,8,32 ,327, +,4 +,227,4 1L,0 +1 .7(.7/929
+,22,7O4.10/3C> :,+1 4M1..+/F*, 1*K +/,34 .(*7 *3 ,GG,2 4.90/1+ -
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
PLZ[65[!U6 "* K'4=&("#
`(*4 1L(34 )9XW L* +1 .7(.7/929 *"9*F*/14#%./K F*/ .,78,2 ), P140*+,7 ,327, ),4 +,227,4
81X*40*+,4 ,2 8/3*40*+,4>
R++, .,*2 1*44/ 4,7L/7 .(*7 079,7 *3 ,GG,2 4*7 +,4 +/,34 -
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Supprimer le trait sous les liens
7/25/2019 Chapitre3 CSS
25/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
a {text-decoration:none;}
L ?M+;'()+2+3*)+,( N35*&& ') +;O
L"! ?'& 35*&&'& B!+ .,*2 4M1L97,7 /3297,44132 )M1GG,02,7 ),4 426+,4 )/GG97,324 W ),4 8V8,4 P1+/4,4> J(*7 0,+1 +,4
4.90/G/012/(34 :"" (32 /327()*/2 +, 0(30,.2 ), 0+144,>
I1 )9G/3/2/(3 ),4 0+144,4 ,42 1*44/ 4/8.+, F*, 0,++,4 ),4 426+,4> R++, 0(34/42, W .790/4,7 +1 P1+/4,
49+,02/(339, B0(88, .(*7 *3, )90+1712/(3 ), 426+,ED .*/4 ), +*/ 1X(*2,7 *3 .(/32 B>E ,2 +, 3(8 F*,
+M(3 4(*51/2, )(33,7 W +1 0+144,> I, 3(8 ), +1 0+144, .,*2OV27, 0(8.(49 ), +,227,4 B100,32*9,4 (*
3(3ED ), 05/GG7,4 ,2 ), 2/7,24 -
6+4*19"-
balise.nom_de_classe {proprit de style: valeur ; proprit de style: valeur ; }
?Y g `(8w),w+1w0+144, h 7,.794,32, +, 3(8 )(339 W +1 0+144,>
RK,8.+, -
p.rouge {font: Verdana 12px; color: #FF0000; }
L--"( )Y&4" =(1##" ;
J(*7 1..,+,7 *3, 0+144, )134 +, 0(), H#'ID /+ 4*GG/2 ), 71X(*2,7 *3 1227/P*2 =(1##W +1 P1+/4, -
Texte mettre en rouge
!"# =(1##"# &4'3"/#"(("# ;
!+ ,42 .(44/P+, ), 3, .14 .790/4,7 ), P1+/4,D 1*F*,+ 014 +1 0+144, .(*771 V27, *2/+/49, )134
3M/8.(72, F*,++, P1+/4, .(*7 +1F*,++, +, 426+, 49+,02/(339 1 *3 4,34 x ?3 .17+, 1+(74 ), =(1##"
&4'3"/#"(("B.17G(/4 "#$%%& '()*+&()$(,&E> I1 )9G/3/2/(3 )M*3, 2,++, 0+144, 4, G1/2 ,3 .7909)132 2(*2
4/8.+,8,32 +, 3(8 ), +1 0+144, )M*3 .(/32
.Nom_de_la_classe {proprit de style: Valeur; proprit de style: Valeur ...}
RK,8.+, -
"(/2 +1 0+144, g /8.(72132 h 4*/L132, -
.important {font-type: arial; color: red; font-weight: bold}
IM1..,+ ), 0,22, 0+144, .,*2 V27, G1/2 W .172/7 ), 3M/8.(72, F*,+ 9+98,32 H#'I .(*7 +,F*,+ +1
)9G/3/2/(3 ,42 L1+/), -
7/25/2019 Chapitre3 CSS
26/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; -
"/ .17 0(327, L(*4 4(*51/2,i *2/+/4,7 ),4 407/.24 1L,0 +,4 G,*/++,4 ), BL(/7 .+*4 +(/3 )134 +,
0(*74ED +1 3(2/(3 ), !_ L(*4 4,71 1+(74 /3)/4.,341P+,>
!S?' $'I$,97'0'() ;M%5%0'()& B N&7*( ') ;+TO!+ 177/L,71 .17G(/4 F*, L(*4 16,i P,4(/3 )M1..+/F*,7 *3, 0+144 B(* *3 /)E W 0,721/34 8(24 F*/D W
+M(7/C/3,D 3, 4(32 .14 ,32(*794 .17 ),4 P1+/4,4>"/D .17 ,K,8.+,D (3 L,*2 8()/G/,7 *3/F*,8,32 g
P/,3L,3*, h )134 +, .171C71.5, 4*/L132 -
Bonjour et bienvenue sur mon site !
:,+1 4,71/2 G10/+, W G1/7, 4M/+ 6 1L1/2 *3, P1+/4, 1*2(*7 ), g P/,3L,3*, h 81/4D
81+5,*7,*4,8,32 /+ 3M6 ,3 1 .14>
I,4 P1+/4,4 6]L^,2 _`aF*/ 0791/,32 1/34/ ),4 .,2/24 P+(04 .172/0*+/,74 )134 +, )(0*8,32 4134
),L(/7 7,.144,7 .17 +,4 9+98,324 427*02*7,+4 )* H28+ 0+144/F*,>
`(2(34 F*, "J$` ,2 _!c 4M*2/+/4,32 2(*X(*74 1L,0 +,4 0+144,4 ,2 +,4 !_>
6]L^
7/25/2019 Chapitre3 CSS
27/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
:5.; - >> Sz"J$`T .,78,2 )M1..+/F*,7 ),4 426+,4 W ),4 9+98,324 ), 2,K2, )M*3
.171C71.5, (* 4/ L(*4 .79G97,i W *3 8(70,1* ), .171C71.5,> $/34/ (3 .,*2 907/7, .(*7 +j,K,8.+,
.7909)132 -
Bonjour et bienvenue sur mon site !
$L,0 +1 0+144 41+*212/(3 ,42 )9G/3/2 0(88, 4*/2 -
.salutations
{
color: blue;
}
_`a
I1 P1+/4, S_!cT >>> Sz_!cT ,42 *2/+/49, .(*7 )9G/3/7 *3, )/L/4/(3 (* *3, 49+,02/(3 )134 *3
)(0*8,32 528+> R++, ,42 4(*L,32 *2/+/49, .(*7 C7(*.,7 +,4 9+98,324 ), 26., P+(0 ,2 +,*7 1..+/F*,7 *3
426+,>
RK,8.+, = -
Paragraphe dintroduction :
un autre paragraphe>
$L,0 +1 )9G/3/2/(3 ), +1 0+144, /327()*02/(3 -
.introduction
{
font-type : arial ; font-size : 12px ; color : blue
}
RK,8.+, A -
Banane
Pomme
Fraise
7/25/2019 Chapitre3 CSS
28/28
!"#$ #$&$ '()*+, - $..+/012/(34 56.,789)/14
Pomme de terre
Tomate
Ognion
_134 3(27, G,*/++, ), 426+,D 3(*4 .(*L(34 )9G/3/7 +,4 !_ 4*/L132 -
#fuit{background: yellow}
#legume{background: green}
Recommended