8/3/2019 bai 11 CSS

1/34

8/3/2019 bai 11 CSS

2/34

CSS l g?- CSS: Cascading Style Sheet: y l nhng mu

quy nh cch thc th hin cc th HTML.-CSS c 3 cch s dng:+ S dng trc tip km vi cc th HTML (InlineStyle Sheet)

+ nh ngha trong 1 trang web (Internal Style Sheet)+ nh ngha thnh 1 file CSS ring (External StyleSheet)

Ti sao phi dng CSS- CSS gip bn tit kim c rt nhiu thi gian vcng sc cho vic thit k web.

8/3/2019 bai 11 CSS

3/34

Th t p dng cc nh dngNh trn ni, ta c th s dng nhiu cch khc nhau lm CSS.

iu g s xy ra nu bn p dng nhiu cch nh dngcho 1 th HTML?(S 1 l u tin nht, s 4 l km u tin nht).1. Inline Style (Style c qui nh trong 1 th HTML c

th)2. Internal Style (Style c qui nh trong phn ca 1 trang HTML )3. External Style (style c qui nh trong file CSS

ngoi)4. Browser Default (thit lp mc nh ca trnh duyt)Nh vy ta thy inline style c mc u tin cao nht,nhng g c nh ngha y s b qua tt c ccnh ngha khc

8/3/2019 bai 11 CSS

4/34

C php ca CSS c to nn bi 3 thnh phn:- Thnh phn la chn (thng l mt th HTML) (Selector)- Thuc tnh (Property)

- Gi tr (Value)C php ca CSS c th hin nh sau:Selector {

Property1: Value1;Property2: Value2;}

- Selector thng l cc th HTML bn mun nh ngha thm.

Property l thuc tnh m bn mun thay i; mi mt thuc tnhcn phi c mt gi tr.

Mt thuc tnh v gi tr ca n c phn cch bi du haichm . Hai cp thuc tnh-gi tr c phn cch nhau bi duchm phy . Ton b cc cp thuc tnh-gi tr ca mt thHTML c t trong cp du ngoc nhn

8/3/2019 bai 11 CSS

5/34

Inline Style SheetTh d :

y l CSS dng 1

u im

D dng qun l Style theo tng th ca trang webC u tin cao nht

Khuyt im

Cn phi thng bo li thng tin Style trong tngtrang web mt cch th cng

Kh cp nht Style

8/3/2019 bai 11 CSS

6/34

on vn bn ny c mu
y l CSS dng 1

8/3/2019 bai 11 CSS

7/34

8/3/2019 bai 11 CSS

8/34

Cho cc bn. y l Inline Style Sheet. Mu xanh. Size 27.Font Arial

8/3/2019 bai 11 CSS

9/34

Internal Style SheetTh d 1:

p

{color:red;Font-size:13;Font-family:arial}

Cho cc bn. y l Internal Style Sheet

8/3/2019 bai 11 CSS

10/34

Th d 2:Thit K Web .H{color:red;

font-family:arial;font-size:13pt;}

Cho cc bn. y l CSS dng 2

8/3/2019 bai 11 CSS

11/34

Thit K Web do{color:red}xanh{color:blue}tim{color:violet} y l mu
Su dung css trong thiet ke web
Mu thnh cng mu xanh hy vng

Mu tm tnh yu

CSS MU CH

8/3/2019 bai 11 CSS

12/34

y l mu Su dung css trong thiet ke webMu thnh cngmu xanh hy vngMu tm tnh yu

8/3/2019 bai 11 CSS

13/34

p.t {font-family:"Times New Roman"}p.a{font-family:Arial}do{color:red}

CSS ci t Font

y l on text Times New Roman font.

y l on text Arial font mu

CSS FONT CH

8/3/2019 bai 11 CSS

14/34

8/3/2019 bai 11 CSS

15/34

CSS MU NN

h1{background-color:aqua} mu xanh ngcp{background-color:lime} mu xanh l cy sngdiv{background-color:teal} mu xanh tm

Th d v CSS background-color

Lp Thit k Web.

Mu nn cho on text ny l mu xanh sng.

Chng ta vn trong th div c mu nn xanh tm.

8/3/2019 bai 11 CSS

16/34

8/3/2019 bai 11 CSS

17/34

h1 {font-size:27;}h2 {font-size:16;}p {font-size:80%;}

Lp Thit K Web size ch 27Lp Thit K Web size ch 16

Lp Thit K Web size ch bng 80% size mc nh

Lp Thit K Web size ch mc nh

CSS FONT SIZE

8/3/2019 bai 11 CSS

18/34

body {background-image:url("hinhanh/lacay.jpg")}

Lp Thit K Web

S dng CSS internal hnh nn

CSS HNH NN

8/3/2019 bai 11 CSS

19/34

8/3/2019 bai 11 CSS

20/34

body{background-image:url('hinhanh/tim.jpg');background-repeat:no-repeat;background-position:right top;

}Lp Thit K Web

Hnh nn c t gc phi trn ca trang WebHnh khng lp li

CSS HNH NN

8/3/2019 bai 11 CSS

21/34

8/3/2019 bai 11 CSS

22/34

8/3/2019 bai 11 CSS

23/34

8/3/2019 bai 11 CSS

24/34

p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}

lp thit k web.

lp thit k web.

lp thit k web.

CSS CHANGE CASE

8/3/2019 bai 11 CSS

25/34

p{ word-spacing:30px;}

Lp Thit K Web. Lp Thit K Web.

CSS KHONG CCH GIA CC T

8/3/2019 bai 11 CSS

26/34

Ch :- CSS phn bit ch hoa v ch thng do khi vit bn cn phi cn thn trong vic s

dng ch hoa, ch thng.

8/3/2019 bai 11 CSS

27/34

External Style Sheet CSSt cc thuc tnh CSS vo mt tp tin

ring bit (*.css), khi c th tham chiun t nhiu trang Web khc nhau

S dng External Style l mt cch ltng khi ta cn phi nh dng nhiutrang web theo mt mu thng nht.

8/3/2019 bai 11 CSS

28/34

Bc 1 : Vit file CSS

Cch vit file CSS

Mt file CSS c th c vit ra t bt k trnh sontho vn bn no. Trong file CSS ch cha cc nhdng, khng bao gm cc th HTML. Mt file CSS phighi vi phn m rng l *.CSS

Th d 1:

h1 {font-size: 36; font-color:blue}

p {background-color:aqua}body {font-family:verdana;background-image: url(images/back40.gif)}

8/3/2019 bai 11 CSS

29/34

Th d 2 :

body

{background-color: yellow}h1{color:orange;text-align:center}p{font-family:"Times New Roman";font-size:20}

8/3/2019 bai 11 CSS

30/34

Bc 2:To lin kt n file CSS

Mi trang web s dng file CSS ngoi ny uphi s dng th .Th c tbn trong th , vi thuc tnh hrefs trn file .CSS bn ngoi.

Th d:Lin kt n file mystyle.css

8/3/2019 bai 11 CSS

31/34

u im :C th thit lp style cho nhiu trang web nhanh chngThng tin cc style c trnh duyt ghi nh

Code CSS nm ring trong mt file nn d qun lkhng b ri

Khuyt im :Tn thi gian download file *.css v lm chm qu trnhbin dch web trnh duyt ln u tin s dng (filec load mt ln v c dng li cho cc ln sau )

8/3/2019 bai 11 CSS

32/34

Th d minh ha :

File html

8/3/2019 bai 11 CSS

33/34

8/3/2019 bai 11 CSS

34/34

BI TP

TO MT TRANG WEB

C S DNG FILE CSS(CH : FILE CSS TNHT L 1O STYLE)