CSS, VN CHNG CHO V TH T U TIN

Nhc li CSS: C 3 cch a CSS vo cho cc i tng trong trang HTML:

1.

inline: nh dng CSS c a trc tip vo bn trong mi i tng thng qua thuc tnh style.

2.

internal: nh dng CSS t trong th <style></style> v nm bn trong trang HTML. Cc nh dng CSS ny s c a vo cc i tng thng qua 3 dng rule: Rule dng tag: c nh ngha bng tag {}, tc ng ln tt c cc i tng tag .
a.

Rule dng class: nh ngha dng .tn lp {}, tc ng ln cc i tng c thuc tnh class=tn lp
b.

c.

rule dng id: nh ngha bng #nh danh {} v tc ng ln cc i tng c thuc tnh id=nh danh (Trong 1 trang .html thuc tnh id nn t l duy nht)

2.

External: Cng c 3 dng (tag, class, id) nh Internal nhng cc rule khng c t trong mt trang .html (Ch dng cho duy nht trang .html ny) m c t trong file .css ring v lin kt n mt hoc nhiu trang .html

Tm li: C th xem nh c 4 dng rule: inline, tag, class, id. Vi phm vi tc ng t cao n thp nh sau: tag, class, id, inline.

Chng cho thuc tnh CSS v th t u tin.

S chng cho xy ra khi mt i tng chu tc ng bi nhiu rule khc nhau. Khi s chng cho xy ra th th t u tin s quyt nh nh dng ca i tng.

Dng chng cho 1: Chng cho gia cc rule khc dng.

Th t u tin ca 4 dng rule nh sau: Cc dng rule inline id class tag

Th t u tin 1 2 3 4

Phm vi tc ng 4 3 2 1

Nhn xt: Th t u tin t l nghch vi phm vi tc ng. Dng rule c phm vi tc ng cng cao th u tin cng thp, ngc li dng rule c phm vi tc ng cng thp th u tin cng cao. Lin tng n cu thnh ng Php vua thua l lng.

V d 1.1: i tng on vn Hello world chu tc ng bi 4 rule thuc 4 dng khc nhau (inline, tag p, class .p1, id #p2). 4 rule ny quy nh 4 mu ch (color) khc nhau.

Theo bng th t u tin th mu ca ch Hello world s theo mu quy nh ca rule dng inline (mu black) V d 1.2 By gi nu ta b i style=color:black (rule dng inline)

Kt qu ch Hello world s c mu theo quy nh ca rule dng id #p2 (mu blue)

V d 1.3 Nu ta tip tc b i thuc tnh id (rule dng id)

Kt qu ch Hello world s c mu theo quy nh ca rule dng class .p1 (mu green)

V d 1.4: Ta c th s dng !important tng mc u tin.

Vi vic thm !important vo sau gi tr mu red th rule dng tag (u tin thp nht) c mc u tin cao hn c rule dng inline (u tin cao nht) V d 1.5

Nhng nu cc dng rule u c !important th th t u tin li theo bng u tin trn (inline > id > class > tag)

Dng chng cho 2: Chng cho do nhiu rule cng mt dng.

Khi c s chng cho ca cc rule cng dng th th t u tin tnh theo v tr rule nm trc hay sau. V d 2.1

Trong khai bo trn th c 2 rule u l dng class v cng tn p1. 2 rule ny c thuc tnh color chng cho nhau. V trnh duyt x l m (html,css,javascript) theo th t t tri qua phi, t trn xung di nn trong trng hp ny rule no nm sau s u tin hn rule nm trc. Do , mu s l blue V d 2.2

Trong v d trn th i tng u chu tc ng bi 2 rule dng class .p1 v .p2. V .p2 nm sau .p1 nn mu s theo rule .p2 V d 2.3

Rule trong file mystyle.css l .p1 { color: red } v .p1 nm sau .p2 V d 2.4

Tc dng ca vic thm !important

Ch thch:

nh chp t phn mm Dreamweaver CS4. Vic h tr trn cc trnh duyt i ch cn khc nhau do chun CSS th ch c 1 t chc qun l (W3C) nhng li c nhiu t chc xy dng trnh duyt v mi trnh duyt li c nhiu phin bn khc nhau.

test trn IE 9, FireFox 11, Chrome 17.