L3 CSS

8/2/2010

Bài 3.

Cascading Style Sheets

Ĉӛ%i/kP
9LӋQ&17777- Ĉ+%.+1
1

0өFÿtFK
‡ 4XDQViWVӵWKD\ÿәLKuQKWKӭFWUDQJ:HENKL
WKD\ÿәLWHPSODWH
‡ 7HPSODWHWURQJ-RRPODJӗP
± template_css
± WKѭPөFYӅ-DYD6FULSW3LFWXUH«FiFILOHFVVNKiF
ILOHLQGH[SKS«

2

1


8/2/2010

0өFÿtFK
‡ &XQJFҩSFKR6LQKYLrQQKӳQJNLӃQWKӭFYӅ
&66ÿӇ
± 7KӵFKLӋQYLӋFFKLSKӕLKuQKWKӭFWUDQJ:HEӣ
PӭFFDRKѫQ
± 7ҥRUDVӵQKҩWTXiWYjWKӕQJQKҩWWURQJEӕFөFYj

trình bày trang Web

3

1ӝLGXQJ
‡
‡
‡
‡
‡
‡
‡

*LӟLWKLӋXYӅ&DVFDGLQJ6W\OH6KHHW&66

/êGRVӱGөQJ&66
3KkQORҥL6W\OH
&iFKFKqQPӝW6W\OH
&ҩXWU~FPӝW6W\OH
&iFVW\OHFѫEҧQYjQkQJFDR
7UҳFQJKLӋP
4

2


8/2/2010

*LӟLWKLӋXYӅ&DVFDGLQJ6W\OH6KHHW&66

‡ Cascading Style SKHHWKD\FzQJӑLWҳWOjStyle
0үXTX\ÿӏQKFiFKWKӭFWKӇKLӋQFiFWKҿ+70/
‡ %DQÿҫX+07/
± 7ұSFiFTX\WҳFFKRSKpS16'[HPFiFWUDQJ:HE
± .K{QJKӛWUӧQKjWKLӃWNӃFyQKLӅXTX\ӅQFKLSKӕLWKLӃWNӃ
!&iFWUuQKGX\ӋWEәVXQJWKrPFiFWKҿ+70/ULrQJ
NK{QJWKHRFKXҭQ

‡ :&:RUOG:LGH:HE&RQVRUWLXP
UDÿӡL&66FKR
SKpSKӛWUӧQKjWKLӃWNӃ
5

/êGRVӱGөQJ&66
‡
‡
‡
‡
‡
‡

6W\OHWLӃWNLӋPWKӡLJLDQ
&66GӉWKD\ÿәL
6ӵQKҩWTXiQ
.KҧQăQJFKLSKӕLÿDGҥQJ
7ҥRUDÿӏQKGҥQJFKXQJFKRWRjQEӝ:HE
1K˱ͫFÿL͋P"

6

3


8/2/2010

3KkQORҥL&66
‡ &yORҥL6W\OH
± Browser default
± External Style Sheet
± Internal Style Sheet
± Inline Style

7ăQJGҫQ

‡ ĈӝѭXWLrQ"

7

&iFKFKqQPӝW6W\OH
‡ 9ӟL,QOLQHVW\OH
WrQBWKҽVW\OH ³WW1:gt1;tt2:gt2«´!

‡ 9tGө
EVW\OH ³FRORUEOXH´!9ăQEҥQQj\
LQÿүPYjPjX[DQKE!
LQÿүPYjPjX[DQKIRQW!E!
‡ 6W\OHFyOͫLtFKNK{QJ"
8

4


8/2/2010

&iFKFKqQPӝW6W\OH
‡ 6W\OHWKѭӡQJÿѭӧFÿѭDYjRWURQJWKҿGLY!
KRһFWKҿVSDQ!
‡ 7KҿGLY!FKӭDÿӏQKGҥQJNKӕL
‡ 7KҿVSDQ!ÿѭӧFGQJErQWURQJNKӕL

9

&iFKFKqQPӝW6W\OH
‡ 9ӟL,QWHUQDOVW\OH
VW\OHW\SH ³WH[WFVV´!

-->
</style>

‡ 7KLӃWOұSFiF6W\OHӣWURQJKDLWKҿKHDG!Yj
</head>
‡ &һSWKҿ--- và ---!QKҵPFKHJLҩX6W\OH
NKӓLFiF%URZVHUNK{QJKӛWUӧFK~QJ

10

5

8/2/2010

&iFKFKqQPӝW6W\OH
‡ 9ӟL([WHUQDOVW\OH
± ĈӏQKQJKƭDVW\OHWURQJILOHULrQJWKѭӡQJFyÿX{L
.CSS)
± 1K~QJILOH&66ÿmÿӏQKQJKƭDYjRWUDQJZHEӣ
JLӳDKDLWKҿKHDG!YjKHDG!
OLQNKUHI ³ÿӍDBFKӋBILOH
rel="stylesheet" type="text/css">

11

&iFKFKqQPӝW6W\OH
‡ 9DLWUzFӫDWӯQJORҥL
‡ Inline Style:
ѬX
± 3KѭѫQJSKiSGӉGjQJQKҩWÿӇEәVXQJWKXӝFWtQK
YjRWKҿ
± 'ӉGjQJTXҧQOêVW\OHWKHRWӯQJWDJ
± &yÿӝѭXWLrQFDRQKҩW
1KѭӧF
± .KDLEiRFKRWӯQJWDJWKӫF{QJNKyFұSQKұW
12

6


8/2/2010

&iFKFKqQPӝW6W\OH
‡ Internal Style
ѬX
± /êWѭӣQJFKRYLӋFiSGөQJWURQJQKӳQJWjLOLӋX
ULrQJOҿ

1KѭӧF
± &ҫQSKҧLNKDLEiROҥLVW\OHFKRWjLOLӋXNKiFWURQJ
PӛLOҫQVӱGөQJ

13

&iFKFKqQPӝW6W\OH
‡ External Style
ѬX
± ĈӗQJQKҩWFKRPӑLWUDQJ:HEWKHRFQJPӝWÿӏQK
GҥQJ
± 7K{QJWLQVW\OHÿѭӧFWUuQKGX\ӋWOѭXYjRFDFKH
± 0ӛLVӵWKD\ÿәLFӫDPүXVW\OHQJRjLFiFWUDQJ:HEVӁ
FұSQKұWWKD\ÿәLWKHR

1KѭӧF
± 7ӕQWKӡLJLDQWҧLILOHFVVYjELrQGӏFKӣWUuQKGX\ӋW
FKROҫQÿҫXVӱGөQJ
± )LOHFVVKӓQJVӁҧQKKѭӣQJÿӃQWRjQEӝZHEVLWH
14

7

8/2/2010

&ҩXWU~FPӝW6W\OH
Chú ý:
‡ 6W\OHSKkQELӋWFKӳKRDFKӳWKѭӡQJ
‡ ĈӇJKLFK~WURQJVW\OHVӱGөQJ
/*
ĈRңQJKLFK~

*/

15

&ҩXWU~FPӝW6W\OH
selector{
Property1:Value1;
Propertyn:Valuen;
}
‡ 7URQJÿy
± 6HOHFWRUPӝWWKҿJӕF+70/KD\ÿӏQKQJKƭDFӫD
Style
± 6DXGҩX³´NK{QJFyNKRҧQJWUҳQJ
± &iF3URSHUW\QJăQFiFKEӣLGҩX
16

8


8/2/2010

6W\OHiSGөQJFKRWKҿFөWKӇ
‡ 7UѭӡQJKӧSWKҿselector là WrQBWK̓
p {
color: red;
}

‡ .KDLEiRÿӗQJWKӡLQKLӅXWKҿ9LӃWGDQKViFK
WrQWKҿSKkQFiFKEӣLGҩXSKҧ\
h1,h2,h3,h4,h5,h6{
font-family:arial;

}
17

6W\OHiSGөQJFKRWKҿFөWKӇ
‡ 'ӳOLӋXEӏWiFÿӝQJEӣLFiFWKҿ3!Yj+!
FyFzQQKӳQJWKXӝFWtQKFӫDWKҿJӕF"
=> &iFWK̓+70/JLͷO̩LN͇WKͳD
FiFWKX͡F
WtQKEDQÿ̯XFͯDPuQK

‡ ĈLӅXJu[ҧ\UDNKLWURQJÿӏQKQJKƭDORҥLEӓ
WKXӝFWtQKFӫDWKҿJӕF"
18

9


8/2/2010

6W\OHiSGөQJFKROӟS
‡ *ҳQYӟLWKҿFөWKӇselector là WrQBWK̓WrQBOͣS
p.loai1{
color:red;

}
p.loai2{
color:blue;

}

‡ .K{QJJҳQYӟLWKҿFөWKӇEӓSKҫQWrQBWK̓ ÿLJLӳOҥL
GҩXFKҩP
.loai3{
color:green;

}

19

6W\OHiSGөQJFKROӟS
‡ ĈһWWKXӝFWtQKclass FӫDWKҿ ³WrQBOͣS´
WrQBWKҽFODVV ³WrQBOӝS´!

‡ 9tGө
SFODVV ³ORDL´!ĈRңQQj\PjX
ÿӑS!
KFODVV ³ORDL´!6W\OHNK{QJFy
KLӉXOӳFK!

KFODVV ³ORDL´!7LrXÿӃPjX
xanh
20

10


8/2/2010

6W\OHNLӇXÿӏQKGDQKLG

‡ 7ѭѫQJWӵQKѭFODVV7KD\GҩXFKҩP
WKjQK
GҩXWKăQJ

‡ &KRWKҿFөWKӇWrQBWKҽÿӍQKBGDQK^«`
‡ 7әQJTXiWÿӍQKBGDQK^«`

21

6W\OHNLӇXÿӏQKGDQKLG

‡ 9tGө
p#id1{
color:red;

}
#id2{
color:blue;

}

22

11


8/2/2010

6W\OHNLӇXÿӏQKGDQKLG

‡ 0͟LLGFK͑[X̭WKL͏QP͡WO̯QWUrQWUDQJ
‡ ĈһWWKXӝFWtQKid FӫDWKҿ ÿӍQKBGDQK
WrQBWKҽLG ³ÿӍQKBGDQK´!

‡ 9tGө
SLG ³LG´!ĈRңQQj\PjXÿӑS!
KLG ³LG´!7LrXÿӃPjX[DQKK!

23

6W\OHiSGөQJFKROӟSFRQ
‡ 9tGө
b i{background-color:yellow;}
b,i{color:blue;}

‡ éQJKƭD
± 9ӟLGҩX³´NKLFyFҧWKҿOӟS
WKXӝFWtQKPӟL
ÿѭӧFiSGөQJ

± 9ӟLGҩX³´WKXӝFWtQKÿѭӧFiSGөQJFKRFҧWKҿ
OӟS

24

12


8/2/2010

6W\OHiSGөQJFKROӟSFRQ
‡ 9tGө
<b>Doan nay mau blue</b>
<b><i>Doan nay mau vang
</i></b>
<i>Doan nay mau blue</i>

25

Basic CSSs
1.
2.
3.
4.
5.
6.
7.

CSS Background
CSS Text

CSS Font
CSS Border
CSS Margin
CSS Padding
CSS List
26

13


8/2/2010

Advanced CSSs
1.
2.
3.
4.
5.
6.

CSS Dimension
CSS Classification
CSS Positioning
CSS Pseudo-class
CSS Pseudo-element
CSS Media Types

27

6.1. CSS Background

‡ 7KXӝFWtQK%DFNJURXQGFKRSKpSWKLӃWOұSPjX
QӅQҧQKQӅQOһSҧQK«

28

14