Bài giảng Lập trình Web: Chương 4 do GV. Trần Công Án biên soạn cung cấp cho người đọc các kiến thức: Giới thiệu cascading style sheet, các cách sử dụng CSS trong HTML,...Mời các bạn cùng tham khảo Bài giảng Lập trình Web: Chương 4 do GV. Trần Công Án biên soạn cung cấp cho người đọc các kiến thức: Giới thiệu cascading style sheet, các cách sử dụng CSS trong HTML,...Mời các bạn cùng tham khảo
CT428 L™p Trình Web Ch˜Ïng - CSS JavaScript GiÊng viờn: Trản Cụng n (tcan@cit.ctu.edu.vn) Bẻ mụn MĐng mỏy tính & Truy∑n thơng Khoa Cơng Nghª Thơng Tin & Truyn Thụng Đi hc Cản Thẽ 2015 Cascading Style Sheet (CSS) [CT428] Ch˜Ïng CSS JavaScript NỴi Dung GiĨi thiªu Cascading Style Sheet (CSS) Các cách s˚ dˆng CSS 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 CSS JavaScript [CT428] Ch˜Ïng CSS 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 cách trình bày cıa thơng tin 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∏ (vs HTML: dùng ∫ ‡nh nghỉa thơng tin s≥ ˜Ịc th∫ hiªn) I Cho phộp tỏch rèi phản trỡnh by v phản nẻi dung ca 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 trang web hay ‡nh nghỉa 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 CSS JavaScript [CT428] Ch˜Ïng CSS 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 trang web rõ ràng hÏn tách rÌi gi˙a trình bày 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ì thay Íi cßu trúc, bË cˆc hình th˘c cıa trang web dπ dàng hÏn I Tuy nhiờn, CSS cú mẻt nhềc im l sá tẽng thớch cıa trình duyªt Ëi vĨi CSS: trình duyªt có sá hẩ trề khỏc ậi vểi CSS TS Trản Công Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript [CT428] Ch˜Ïng CSS JavaScript GiĨi thiªu Cascading Style Sheet (CSS) Còu Trỳc Ca Mẻt CSS I Mẻt CSS ch˘a mỴt t™p lu™t CSS (CSS rules) I MỴt lu™t CSS bao gÁm mỴt (ho∞c vài) bỴ chÂn (selector) t™p khai báo v∑ thc 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: thc tính cıa thành ph¶n HTML s≥ ˜Ịc áp dˆng style I value: giá tr‡ ˜Ịc gán cho thc tính t˜Ïng ˘ng TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript [CT428] Ch˜Ïng CSS JavaScript Các cách s˚ dˆng CSS HTML Nhúng CSS t™p tin HTML Nhúng CSS Trong T™p Tin HTML (Internal) I Cách thơng dˆng nhßt ∞t CSS rules cp thƠ v t phản head ca tin HTML (internal style sheet) body { color: yellow; background-color: black; } I Inline:Paragraph
(khơng khuy∏n khích) TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript [CT428] Ch˜Ïng CSS JavaScript Các cách s˚ dˆng CSS 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 mẻt 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 ph¶n head cıa t™p tin HTML TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript [CT428] Ch˜Ïng CSS JavaScript Các cách s˚ dˆng CSS HTML Th˘ t¸ ˜u tiên cıa cách s˚ dˆng CSS Th˘ T¸ ◊u Tiên Trong Viªc Áp Dˆng CSS I N∏u t™p tin HTML có s˚ dˆng CSS theo nhi∑u cách, ó có sá ng ẻ v nh dĐng, thỡ ẻ u tiờn ˜Òc áp dˆng nh˜ sau: Inline CSS Internal CSS External CSS ‡nh d§ng m∞c ‡nh cıa trỡnh duyêt TS Trản Cụng n (Khoa CNTT&TT) [CT428] Chẽng CSS JavaScript [CT428] Ch˜Ïng CSS JavaScript Selector (Bẻ chn) Cỏc LoĐi Selector Trong CSS HTML-element selector (hay gÂi t≠t element selector) Class selector ID selector Attribute selector 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 CSS JavaScript 10 [CT428] Ch˜Ïng CSS JavaScript BË cˆc (Layout) Float (S¸ nÍi lên)) Float (S¸ NÍi Lên) I Float CSS cho phộp mẻt phản t ni lờn v trơi (di chuy∫n) v∑ bên trái ho∞c ph£i cıa ph¶n t˚ ch˘a (containing element) I Các ph¶n t˚ bên d˜Ĩi ph¶n t˚ nÍi lên (floating element) s≥ di chuy∫n lên bao bÂc xung quanh (wrap) ph¶n t˚ nÍi lên I MỴt sË thc tính dùng ∫ thi∏t ∞t sá ni lờn ca cỏc phản t: I float: none | left | right: chø ‡nh s¸ nÍi lên cıa mẻt phản t I clear: none | left | right | both: nh sá di chuyn ca cỏc phản t˚ phía d˜Ĩi ph¶n t˚ floating TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 41 [CT428] Ch˜Ïng CSS JavaScript BË cˆc (Layout) Float (S¸ nÍi lên)) Floating – Ví Dˆ float: left; float: right; clear: right; clear: left; TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 42 [CT428] Ch˜Ïng CSS JavaScript BË cˆc (Layout) Position (V‡ trí) Position (V‡ Trí) I M∞c nhiên, ph¶n t˚ trang web ềc sp xp tá ẻng t trỏi sang phÊi (inline), t¯ xuËng d˜Ói (inline + block) I V‡ trí cıa ph¶n t˚ có th∫ ˜Ịc thi∏t ∞t băng cỏc thuẻc tớnh top, right, bottom, left Tuy nhiờn, ˛ nghỉa cıa giá tr‡ phˆ thc vào thc tính position I Thc tính position dùng ∫ chø nh nh v (positioning schema) cho mẻt phản t˚: I I posotion: static | relative | absolute | fixed Thc tính z-order ˜Ịc dùng ∫ chø ‡nh th˘ tá xp chng (stack order) cỏc phản t chỳng chÁng lên (overlapping) Ph¶n t˚ có giá tr‡ z-order cao hÏn s≥ ˜Ịc x∏p TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 43 [CT428] Ch˜Ïng CSS JavaScript BË cˆc (Layout) Position (V‡ trí) Các SÏ I I Á ‡nh V‡ (Positioning Schema) static: sÏ Á ‡nh v‡ m∞c nhiên I ph¶n t˚ inline ˜Ịc s≠p x∏p t¯ trái sang ph£i v tá ẻng xuậng dũng cản I cỏc phản t˚ block ˜Ịc x∏p t¯ xng, mÈi ph¶n t˚ dòng riêng I v‡ trí ph¶n t˚ khơng phˆ thc giá tr‡ thc tính top, right, bottom, left relative: I ph¶n t˚ cÙng ˜Ịc ‡nh v tẽng tá nh static I cỏc thuẻc tớnh top, right, bottom, left s≥ ˜Ịc s˚ dˆng ∫ làm Ỵ dÌi (offset) cho v‡ trí cıa ph¶n t˚ so vĨi v‡ trí m∞c nhiên TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 44 [CT428] Ch˜Ïng CSS JavaScript BË cˆc (Layout) Position (V‡ trí) Các SÏ I I Á ‡nh V‡ (Positioning Schema) absolute: I V‡ trí cıa ph¶n t˚ (top, right, bottom, left) ˜Ịc tính t˜Ïng Ëi so vĨi ph¶n t˚ cha ¶u tiên có thc tính position khơng ph£i static I N∏u khơng có ph¶n t˚ cha nh˜ th∏, ph¶n t˚ cha ˜Ịc xem ph¶n t˚ fixed: I v‡ trí cıa ph¶n t˚ ˜Ịc tính t˜Ïng Ëi so vĨi c˚a s trỡnh duyêt ) phản t s cậ nh tĐi mỴt v‡ trí hình (khơng thay Íi k∫ c£ nỴi dung trang web b‡ cn lên/xng) TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 45 [CT428] Ch˜Ïng CSS JavaScript Box model Box Model (Mơ Hình Khung) I MÈi ph¶n t˚ HTML có th∫ ˜Ịc coi mỴt khung I Trong CSS, mụ hỡnh khung l mẻt khỏi niêm cn bÊn viªc thi∏t k∏ bË trí giao diªn I Trong mụ hỡnh khung CSS, mẻt khung bao bc cỏc phản t˚ HTML, bao gÁm: l∑ (margins), ˜Ìng vi∑n (borders), vựng êm (paddings) v nẻi dung ca khung (content) TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 46 [CT428] Ch˜Ïng CSS JavaScript Box model Margin (L∑) Margin (L∑) I Là vùng bao quanh ˜Ìng vi∑n (border), khơng có màu n∑n, st (transparency) I Chia tách khung vĨi nh˙ng thành ph¶n khác I Thi∏t ∞t: I I margin: I margin-top/right/bottom/left: | auto N∏u giá tr‡ margin auto khung có kích th˜Ĩc cË ‡nh, margin s≥ ˜Ịc ∞t lển nhòt cú th TS Trản Cụng n (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 47 [CT428] Ch˜Ïng CSS JavaScript Box model Border ( ˜Ìng Vi∑n) Border ( èng Vin) I Năm gia padding v nẻi dung; có th∫ có màu, ki∫u Ỵ dày I Th¯a k∏ màu thi∏t ∞t bi thc tính color cıa khung ch˘a I Thi∏t ∞t: border: I I style: none, dotted, dashed, solid, double, groove, inset, outset, ridge Có th∫ ‡nh d§ng cho t¯ng t/tính ho∞c t¯ng c§nh riêng biªt: I border-width: | I border-style: I border-color: | TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 48 [CT428] Ch˜Ïng CSS JavaScript Box model Border ( ˜Ìng Vi∑n) Ví Dˆ V∑ ˜Ìng Vi∑n Và L∑ width:340px; margin:auto; border-style: solid width:340px; margin-left:auto; margin-right: 5px; border-style:dashed; border-color:cyan yellow green blue; border-style:groove; border-style:outset; border-style:inset; border-style:ridge; TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 49 [CT428] Ch˜Ïng CSS JavaScript Box model Padding (Vùng ªm) Padding (Vùng ªm) I Là vùng gi˙a nỴi dung border cıa khung I B‡ £nh h˜ng bi màu n∑n cıa khung I Thi∏t ∞t: I padding: | I padding-top/right/bottom/left: TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 50 [CT428] Ch˜Ïng CSS JavaScript Box model Padding (Vùng ªm) Bài T™p - Box Model Thi∏t k∏ trang web có bË cˆc nỴi dung t˜Ïng t¸ nh˜ hình bên: I chi∑u ngang cıa khung: 400px I hình: “/figures/http-model.png” I tÍng chi∑u ngang khung hình: 340px I kho£ng cách t¯ hình ∏n khung text: 20px I chi∑u cao khung text: 200px TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 51 [CT428] Ch˜Ïng CSS v JavaScript Mẻt sậ chỳ PhĐm vi ỏp dng CSS PhĐm Vi p Dng CSS I Viêc s dng CSS tuõn theo th tá ( ẻ u tiên) sau: inline CSS, important, specificity, order, parent-inherit, browser default I Th¯a k∏ (inheritance): Các ph¶n t˚ HTML s≥ th¯a k cỏc thuẻc tớnh t phản t cha Cỏc thuẻc tính k∏ th¯a có th∫ ˜Ịc ‡nh nghỉa l§i cho phản t băng CSS I important: thuẻc tớnh ny dùng ∫ xác ‡nh mỴt CSS rule quan trÂng s≥ ˜Ịc ˜u tiên s˚ dˆng có nhi∑u rule cĐnh tranh Mc ẻ u tiờn ca thuẻc tớnh ny thòp hẽn inline CSS TS Trản Cụng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 52 [CT428] Ch˜Ïng CSS JavaScript MỴt sË ˛ MỴt sË qui ˜Ĩc Qui ◊Ĩc Vi∏t Code I Ta có th∫ vi∏t o§n code CSS nh˜ th∏ này: selector {property: value} selector {property: value} I Tuy nhiên, cách vi∏t sau ˜Ịc khuy∏n khích: selector { property: value; } selector { property: value; } I Các thích cÙng nên ˜Ịc s˚ dˆng ∫ giúp o§n mã rõ ràng dπ b£o trì: /* comment (can be multi-line) */ TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 53 [CT428] Ch˜Ïng CSS JavaScript MỴt sË ˛ MỴt sË qui ˜Ĩc Qui ◊Ĩc ∞t Tên MỴt sË qui ˜Ĩc ∫ ∞t ID tên lĨp: I Nên mơ t£ nỴi dung, khơng ph£i cách trình bày Ví dˆ: warning thay redbox I Dùng ch˙ thèng (lowercase) v dựng dòu gĐch nậi phõn tỏch t¯ Ví dˆ: header-info thay headerInfo I Dùng ti∏p ¶u ng˙ (prefix) cho nh˙ng ph¶n t˚ Ví dˆ: footer, footer-copyright, footer-logo TS Tr¶n Cơng Án (Khoa CNTT&TT) [CT428] Ch˜Ïng CSS JavaScript 54