Tải bản đầy đủ

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´!

-->


‡ 7KLӃWOұSFiF6W\OHӣWURQJKDLWKҿKHDG!Yj

‡ &һ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\OHWURQJILOHULrQJ WKѭӡ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̩L N͇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ÿӏQKGDQK LG

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

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

21

6W\OHNLӇXÿӏQKGDQK LG

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

}
#id2{
color:blue;

}

22

11


8/2/2010

6W\OHNLӇXÿӏQKGDQK LG

‡ 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ө
Doan nay mau blue
Doan nay mau vang

Doan nay mau blue

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


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×