CT428. L™p Trình Web Ch˜Ïng 4 - CSS và JavaScript Gi£ng viên: Tr¶n Công Án ([email protected]) BÎ môn M§ng máy tính & Truy∑n thông Khoa Công Nghª Thông Tin & Truy∑n Thông §i hÂc C¶n ThÏ 2015 Cascading Style Sheet (CSS) [CT428] Ch˜Ïng 4. CSS và JavaScript NÎi Dung GiÓi thiªu Cascading Style Sheet (CSS) Các cách s˚ dˆng CSS trong HTML Selector (BÎ chÂn) Property BË cˆc (Layout) Box model MÎt sË chú ˛ TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 3 [CT428] Ch˜Ïng 4. CSS và JavaScript GiÓi thiªu Cascading Style Sheet (CSS) Cascading Style Sheet (CSS) Là Gì? I Là mÎt ngôn ng˙ dùng ∫ mô t£ hình th˘c, bË cˆc và cách trình bày cıa thông tin trên trang web. (vs. HTML: dùng ∫ th∫ hiªn nÎi dung và cßu trúc trang web) I Dùng ∫ mô t£ thông tin s≥ ˜Òc th∫ hiªn th∏ nào. (vs. HTML: dùng ∫ ‡nh nghæa thông tin gì s≥ ˜Òc th∫ hiªn) I Cho phép tách rÌi ph¶n trình bày và ph¶n nÎi dung cıa mÎt trang web, giúp viªc b£o trì, thay Íi hay c™p nh™t dπ dàng hÏn. I CSS có th∫ ˜Òc nhúng bên trong trang web hay ‡nh nghæa trong 1 t™p tin riêng biªt (.css) ∫ s˚ dˆng chung cho nhi∑u trang web. (HTML: Structure) + (CSS: Presentation) = Web page TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 4 [CT428] Ch˜Ïng 4. CSS và JavaScript GiÓi thiªu Cascading Style Sheet (CSS) LÒi Ích Và Nh˜Òc i∫m Cıa CSS I Cßu trúc cıa các trang web rõ ràng hÏn do tách rÌi gi˙a trình bày và nÎi dung. I Có th∫ th¯a k∏ style ã ‡nh nghæa cho nhi∑u trang web ho∞c website ) ti∏t kiªm thÌi gian thi∏t k∏ website. I Gi£m kích th˜Óc trang web ) t´ng tËc Î download trang web. I B£o trì và thay Íi cßu trúc, bË cˆc và hình th˘c cıa trang web dπ dàng hÏn. I Tuy nhiên, CSS có mÎt nh˜Òc i∫m là s¸ t˜Ïng thích cıa trình duyªt Ëi vÓi CSS: các trình duyªt có s¸ hÈ trÒ khác nhau Ëi vÓi CSS. TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 5 [CT428] Ch˜Ïng 4. CSS và JavaScript GiÓi thiªu Cascading Style Sheet (CSS) Cßu Trúc Cıa MÎt CSS I MÎt CSS ch˘a mÎt t™p các lu™t CSS (CSS rules). I MÎt lu™t CSS bao gÁm mÎt (ho∞c vài) bÎ chÂn (selector) và 1 t™p các khai báo v∑ các thuÎc tính (property) áp dˆng cho bÎ chÂn. selector { property: value; property: value; ... } Ví dˆ: body { color: yellow; background-color: black; } I selector: chÂn ph¶n t˚ (element) HTML s≥ ˜Òc áp dˆng style. I property: thuÎc tính cıa thành ph¶n HTML s≥ ˜Òc áp dˆng style. I value: giá tr‡ ˜Òc gán cho thuÎc tính t˜Ïng ˘ng. TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 6 [CT428] Ch˜Ïng 4. CSS và JavaScript Các cách s˚ dˆng CSS trong HTML Nhúng CSS trong t™p tin HTML Nhúng CSS Trong T™p Tin HTML (Internal) I Cách thông dˆng nhßt là ∞t các CSS rules trong c∞p th¥ . . . I Inline:

Paragraph

(không khuy∏n khích). TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 7 [CT428] Ch˜Ïng 4. CSS và JavaScript Các cách s˚ dˆng CSS trong HTML Liên k∏t t™p tin CSS vào t™p tin HTML Liên K∏t T™p Tin CSS vào T™p Tin HTML I Các CSS rules ˜Òc ‡nh nghæa trong mÎt t™p tin vÓi ph¶n m rÎng .css (external style sheet). I Dùng th¥ ∫ liên k∏t t™p tin CSS vào t™p tin HTML. I Th¥ ˜Òc ∞t trong ph¶n head cıa t™p tin HTML. . . . TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 8 [CT428] Ch˜Ïng 4. CSS và JavaScript Các cách s˚ dˆng CSS trong HTML Th˘ t¸ ˜u tiên cıa các cách s˚ dˆng CSS Th˘ T¸ ◊u Tiên Trong Viªc Áp Dˆng CSS I N∏u trong t™p tin HTML có s˚ dˆng CSS theo nhi∑u cách, trong ó có s¸ ˆng Î v∑ ‡nh d§ng, thì Î ˜u tiên ˜Òc áp dˆng nh˜ sau: 1. Inline CSS 2. Internal CSS 3. External CSS 4. ‡nh d§ng m∞c ‡nh cıa trình duyªt TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 9 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Các Lo§i Selector Trong CSS 1. HTML-element selector (hay gÂi t≠t là element selector) 2. Class selector 3. ID selector 4. Attribute selector 5. Các selector ∞c biªt nh˜: descendant (con cháu/h™u duª), pseudo-class, group, . . . selector { property: value; ... } TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 10 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) HTML-element selector HTML-Element Selector I ChÂn tßt c£ các ph¶n t˚ (th¥) HTML trong trang web ˜Òc chø ‡nh bi selector cıa CSS rule. Cú pháp: HTML-tag {property: value; ...}

Heading 1 (redefined)

This is a paragraph

Heading 2 (default)

TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 11 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Class selector Class Selector I ChÂn tßt c£ các ph¶n t˚ trong trang web thuÎc class ˜Òc chø ‡nh bi selector. Cú pháp: .classname {property: value;...}

Heading 2 (warning)

A paragraph

Heading 2 (normal)

TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 12 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) ID selector ID Selector I ChÂn 1 ph¶n t˚ duy nhßt trong trang web có id chø ‡nh bi selector. Cú pháp: #id {property: value;...} TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 13 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) ID selector ID Selector TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 14 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Attribute selector Attribute Selector I Dùng ∫ l¸a chÂn các ph¶n t˚ HTML có thuÎc tính ˜Òc chø ‡nh bi selector. MÎt sË cú pháp: I [attribute]: chÂn tßt c£ các ph¶n t˚ có thuÎc tính attribute. I [attribute="avalue"]: chÂn tßt c£ các ph¶n t˚ có thuÎc tính attribute có giá tr‡ là avalue. I [attribute⇠="avalue"]: chÂn tßt c£ các ph¶n t˚ có thuÎc tính attribute vÓi giá tr‡ có ch˘a t¯ avalue. I I [attribute*="avalue"]: giá tr‡ thuÎc tính có ch˘a avalue. Có th∫ k/hÒp HTML-element selector vÓi attr selector nh˜ sau: I HTML-tag[attribute-selector]: chÂn tßt c£ các ph¶n t˚ là HTML-tag có thuÎc tính ˜Òc chø ‡nh bi attribute-selector. TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 15 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Attribute selector Ví dˆ

Good boys Bad boys

TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 16 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Các lo§i selector ∞c biªt Descendent Selector I Cú pháp: dùng kho£ng tr≠ng ances-selector desc-selector {. . .} I Ho§t Îng: chÂn tßt c£ các thành ph¶n desc-selector là “con cháu” (descendant) cıa ances-selector.

• The 1st <em>

The 2nd <em>

Chú ˛: dùng k˛ hiªu > ∫ chÂn con tr¸c ti∏p. TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 17 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Các lo§i selector ∞c biªt HTML-Element + Class Selector I Cú pháp: HTML-tag.className {. . .} I Ho§t Îng: chÂn tßt c£ các thành ph¶n HTML-tag có thuÎc tính class có giá tr‡ là className.

• Rice
• Special Beer

Special but not special

TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 18 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Các lo§i selector ∞c biªt K∏t HÒp Nhi∑u Lo§i Selector I Các lo§i selector trên có th∫ lÁng nhau nhi∑u cßp. I Ví dˆ: div#header p em.required { color: white; } , ChÂn các ph¶n t˚ có thuÎc tính class có giá tr‡ ch˘a t¯ required (thuÎc lÓp required) và là con/cháu cıa các ph¶n t˚

; vÓi các ph¶n t˚

ph£i là con cháu cıa mÎt ph¶n t˚

có id là header. TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 19 [CT428] Ch˜Ïng 4. CSS và JavaScript Selector (BÎ chÂn) Các lo§i selector ∞c biªt Pseudo-Classes Và Pseudo-Elements I Pseudo-classes (lÓp gi£) và pseudo-element (thành ph¶n gi£) cho phép truy c™p mÎt sË t/ph¶n ∞c biªt cıa các ph¶n t˚ HTML, n¨m ngoài cßu trúc cây cıa trang web (document tree). I Các pseudo-classes/elements b≠t ¶u b¨ng dßu : I Cú pháp: selector:pseudo-class ho∞c selector:pseudo-element Speudo :link :visited :hover :focus :active :firstchild fi nghæa ChÂn tßt c£ các l/k∏t ch˜a vi∏ng th´m ChÂn tßt c£ các l/k∏t ã ˜Òc vi∏ng th´m ChÂn t/ph¶n ang n¨m d˜Ói tr‰ chuÎt ChÂn t/ph¶n ang ˜Òc focused (pointer) ChÂn t/ph¶n ang ˜Òc kích ho§t ChÂn t/ph¶n là con ¶u tiên cıa mÎt t/ph¶n khác TS. Tr¶n Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng 4. CSS và JavaScript 20

- Xem thêm -