Bài giảng Thiết kế web - Chương 5: CSS- Cascading Style Sheet

Nội dung text: Bài giảng Thiết kế web - Chương 5: CSS- Cascading Style Sheet

1. THI T K N CH NG 5 CSS- CASCADING STYLE SHEET GV: Nguy n Th Thùy Linh
2. NI DUNG • Các khái ni m c bn • Áp dng CSS vào trang HTML • Các nhóm trong CSS • S dng CSS trong Dreamweaver
3. 1. Các khái ni m c bn • CSS: mu nh dng phân tng • CSS là mt chu n nh dng các trang HTML, XHTML, XML. • CSS m rng ngôn ng HTML vi hơn 70 thu c tính ki u dáng áp dng cho các th HTML. • Giúp các nhà thi t k Web có thêm nhi u la ch n màu sc, kho ng cách, v trí, biên, con tr trang web. • CSS ph c v cùng lúc cho nhi u trang, CSS cng là mt dng HTML Style.
4. 1. Các khái ni m c bn • Nh ng thu c tính áp dng vào trong tài li u mà không phá v cu trúc HTML sn có • CSS làm t ng s nh t quán (nh d ng) và tc ti trang web (t p tin CSS ch ti l n u tiên khi truy c p vào trang web)
5. 1. Các khái ni m c bn • Ti n ích ca CSS : – Ki m soát b cc trang, k thu t thi t k font và dng ch tt hơn – Khi thay i nh dng ch cn thay i CSS, các trang khác s t ng cp nh t s thay i ó –D duy trì ho t ng ca site hơn. • Bt li ca CSS : – Không h tr rng rãi, hay h tr không ht
6. 2. Áp dng CSS vào trang HTML Các cách áp dng Có 3 cách áp dng – Inline style: s dng thu c tính style ca th nh ngh a style – Internal style sheet : nh ngh a style bên trong th ca tài li u. – External style sheet: liên kt n mt tp tin *.css ch a toàn b style s dng trong tài li u.
7. 2. Áp dng CSS vào trang HTML 1. Inline style nh ngh a Kiu gán cho một dòng ho c một đoạn văn bản, bng cách s dng thu c tính style bên trong tag mu n nh dng. Cú pháp Ni dung vn bn mu n nh dng
8. 2. Áp dng CSS vào trang HTML 1. Inline style Ví d Khoa KHTN B môn Tin hc ng dng
9. 2. Áp dng CSS vào trang HTML 1. Inline style •Mt inline style áp dng cho bt k th nào và ch có tác dng trên chính th ó. • Dùng inline style làm cho tài li u rõ ràng hơn nh ưng vi t mã quá nhi u có th thi u s nh t quán toàn cc trên toàn site. • Làm cho các on mã dư th a, khó bo trì.
10. 2. Áp dng CSS vào trang HTML 2. Internal style nh ngh a: Là mu thích hp cho trang riêng l vi nhi u vn bn – Cách to: Ta bng mu chung trên ph n u trang trong cp tag – S dng: Trong ph n body , t ni dung mu n s dng nh dng theo bng mu trong ph n head
11. 2. Áp dng CSS vào trang HTML 2. Internal style Cú pháp: TagName{property1:value1; } (lp li cho mi tag có thu c tính cn nh dng)
12. 2. Áp dng CSS vào trang HTML 2. Internal style Ví d b { text-transform: lowercase; font-size:18px } p { border: silver thick solid; background-color: turquoise;} on này s có vi n m màu bc
13. 2. Áp dng CSS vào trang HTML 3. Externa style nh ngh a: Là bng ưc lưu tr thành mt file bên ngoài và liên kt vi trang HTML . Bng áp dng và nh hưng tt c các trang ca mt website. Cách to: – To tp tin mi, và nh p tên các tag mu n nh dng thu c tính theo mu: TagName{property1: value1; } –Lưu tp tin vi ph n m rng .css
14. 2. Áp dng CSS vào trang HTML 3. Externa style Ví d To tp tin Sheet1.css H2H2 {color:blue;{color:blue; font-style:italic}font-style:italic} P{text-align:justify;P{text-align:justify; text-indent:8pt;text-indent:8pt; font:10pt/15ptfont:10pt/15pt “Myriad“Myriad Roman”,”Verdana”}Roman”,”Verdana”}
15. 2. Áp dng CSS vào trang HTML 3. Externa style Cú pháp
16. 2. Áp dng CSS vào trang HTML 3. Externa style Ví d Changing the rules Thi t k Website CSDL Thi t k Website
17. 3. Các thành ph n trong CSS Khái ni m CSS gm 3 thành ph n –B ch n (Selector) – Thu c tính (Property) – Giá tr (Value) Cú pháp Selector { Thu ộc tính 1: giá tr ị; Thu ộc tính n: giá tr ị; }
18. 3. Các thành ph n trong CSS Khái ni m B ch n (Selector) th ưng là tên các th HTML •Mi mt thu c tính cn ph i có mt giá tr •Mt thu c tính và giá tr ca nó ưc phân cách nhau bi du hai ch m “:” • Hai cp thu c tính-giá tr ưc phân cách nhau bi du ch m ph y “;” • Toàn b các cp thu c tính-giá tr ca mt th HTML ưc t trong cp du ngo c nh n { }
19. 3. Các thành ph n trong CSS Ví d B ch n P { text-align: center; Các giá tr Các thu c tính color: black; font-family: "sans serif" } t giá tr trong cp du nháy kép “ ” khi giá tr là chu i các t liên ti p
20. 3.1 B ch n (Selector) • CSS cung cp nhóm nhi u b ch n cùng lúc • Giúp thi t k giá tr cho các thu c tính chung gi ng nhau ca nhi u b ch n khác nhau cùng lúc. • Gi m kích th ưc tp tin css và th i gian ti trang web Ví d: h1, h2, h3, h4, h5, h6 { color : green }
21. 3.1. B ch n (Selector) Các lo i b ch n • Các lo i b ch n trong CSS –B HTML (HTML selector) –B lp (Class selector) –B ID (Identity selector) –B hu du /con cháu (Descendant selector) –B th con (Child selector) –B thu c tính (Attribute selector) –B lp gi (Pseudo class selector)
22. 3.2. B ch n HTML (HTML selector) nh ngh a • Là b ch n ơ n gi n nh t, dùng các ph n t HTML làm ph n t ch n Ví d: nh dng tt c các siêu liên kt trong toàn b trang web không có ưng gch chân A { /* B ưng gch chân ca các hypelink */ text-decoration : none ; }
23. 3.3 B ch n lp (Class selector) nh ngh a •Vic to ra các lp (class), nh ngh a nhi u ki u th hi n khác nhau cho cùng th HTML và áp dng các lp này vào mt v trí trên trang web. • Có 2 cách nh ngh a b ch n lp – nh ngh a b ch n lp cho mt th c th . – nh ngh a b ch n lp không xác nh th c th (có th dng mt lp cho nhi u th khác nhau ).
24. 3.3 B ch n lp (Class selector) Ví d • B ch n lp cho mt th c th Ví d: Trên trang web có 3 lo i on vn – on vn canh l trái – on vn canh l gi a – on vn canh l ph i nh ngh a 3 lp riêng bi t (cho th p), cho 3 lo i on vn nh ư sau: p.trai {text-align : left} p.phai {text-align : right } p.giua {text-align : center }
25. 3.3 B ch n lp (Class selector) Áp dng • Áp dng vào trang html on vn này ưc canh l trái. on vn này ưc canh l ph i. on vn này ưc canh l gi a. • Áp dng không hp l ây là on áp dng sai Áp dng sai th
26. 3.4 nh bng mu cho lp (class) Cú pháp • Chia các yu t trong HTML thành các lp áp dng ki u hi u qu hơn. ClassName{property1: value1; property2:value2; } • Trong ph n , ánh du ph n trong lp: Ni dung
27. 3.4 nh bng mu cho lp (class) Ví d Dang1{ color : blue} Dang2{ color : red} Ni dung vn bn 1 Ni dung vn bn 2
28. 3.5 nh các tag riêng bi t Cú pháp Áp dng cho mt ph n t riêng bi t trang Web Cú pháp: TagName #IDName{property1: value1; property2:value2; } Trong tag Body nh p cú pháp: Ni dung
29. 3.5 nh các tag riêng bi t Ví d ID Selectors p#control {color: red;font-weight:bold; text-indent:18pt} p{color: magenta;text-indent:0pt} KHTN THUD
30. 3.6 To các tag tùy ý nh ngh a Có 2 lo i tag ni Class hay ID to các tag tùy ý, phân bi t i tưng cp kh i và cp hàng . • i tưng cp kh i: on vn, dòng mi và có th ch a các i tưng cp kh i khác: P, H1, Body, table • i tưng cp hàng: không to dòng mi, th ưng ch a vn bn và các yu t trong hàng khác: tag B, Font • Tag DIV và SPAN : kt ni vi các ph n t cp kh i và ID to ra các tag tu ý. – Trong ó DIV phù hp vi các i tưng cp kh i, SPAN phù hp vi các i tưng cp hàng
31. 3.6 To các tag tùy ý Cú pháp Bng cách thêm mt CLASS ho c ID vào tag DIV và nh mu. Trong ph n Style ho c mt bng mu bên ngoài dùng: DIV.ClassName{property1: value1; property2:value2; } vi ClassName là tên lp s s dng. ho c: DIV#Idname{property1: value1; property2:value2; } vi IDName là tên nh danh ca tag DIV
32. 3.6 To các tag tùy ý Cp kh i tùy ý • Áp dng tag cp kh i tu ý vào trang HTML Ti u ph n vn bn mu n nh dng, ta nh p cú pháp Ni dung (bên trong có th ch a các tag ho c )
33. 3.6 To các tag tùy ý Ví d ID Selectors DIV.control{background:magenta;font- size:28pt} DIV#intro{color: magenta;text-indent:0pt;font- weight:bold} KHTN THUD
34. 3.6 To các tag tùy ý Các tag trong hàng tùy ý Kt ni nhi u ki u nh dng vn bn trong mt tag Cú pháp: Trong ph ần Style, nh ập cú pháp: SPAN.Clname{property1: value1; property2:value2; } Ho ặc: SPAN#IDname{property1: value1; property2:value2; }
35. 3.6 To các tag tùy ý Các tag trong hàng tùy ý Áp dụng tag trong hàng tu ỳ ý vào trang HTML: Ti u on vn bn mu n nh dng, nh p cú pháp: Ni dung vn bn Ho c: Ni dung vn bn
36. 3.6 To các tag tùy ý Các tag trong hàng tùy ý Ví d: ID Selectors SPAN.control{background:magenta;font-size:200%} SPAN#intro{font-variant:small-caps;color: orange;font- weight:bold} A KHTN THUD
37. 3.7 Các thu c tính nh dng nh dng vn bn • Ch ọn bộ font: font-family: familyname1, familyname2 • Tạo ch ữ nghiêng : Font-style: italic • Tạo ch ữ đậm: Font-weight: bold • Định cỡ ch ữ: Font-size: xx-small ho c x-small, small, medium, large, x-large, xx-large ho c Font-size:12pt (giá tr c th ) • Có th nh dng các thu c tính ch nghiêng, m và c ch cùng mt lúc: Font: italic bold size
38. 3.7 Các thu c tính nh dng nh dng vn bn • Màu ca ch ữ: Color: colorName ho c #rrggbb • Màu nn của ch ữ: Background:colorName ho c #rrggbb • Định kho ảng các gi ữa các từ, các ký tự: Word-spacing:n (n: kho ng cách gi a các t, tính bng pixel) Letter-spacing:n (n: kho ng cách gi a các t, tính bng pixel) • Canh lề cho văn bản: Text-Align: left, right, center, justify • Thay đổi dạng ch ữ: Text-transform: capitalize, uppercase, lowercase
39. 3.7 Các thu c tính nh dng nh dng danh sách List-style: circle ch m tròn rng List-style: disc ch m tròn en List-style: square ch m en vuông List-style: decimal ánh s Á rp List-style: l ower-alpha th t alpha List-style: upper-alpha th t alpha ch in hoa List-style: upper-roman s la mã hoa List-style: lower-roman s la mã th ưng List-style-image: url : hình làm bullet
40. 3.7 Các thu c tính nh dng nh dng danh sách Ví d: Inline style Internal style External style
41. 3.7 Các thu c tính nh dng nh dng nn trang – bacground-color : màu nn – background-image : nh nn – Background- position : v trí t nh nn gm các giá tr :left, right, center, top, bottom,inherit – background-repeat : nh lp
    Repeat: lp trên c trang
    Repeat-x: lp theo chi u ngang
    Repeat-y: lp theo chiêù ng – background-attachment : gi nh cu n /không cu n theo trang ca trình duy t
42. 3.7 Các thu c tính nh dng nh dng nn trang • Ví d:
43. 3.7 Các thu c tính nh dng nh dng ưng vi n • border-style : ki u ưng vi n • border-collapse : collapse: ưng vi n lún • border-bottom -style • border-left-style: double • border-right-style :double nh dng tng cnh ca khung • border-top-style • border-left-color
44. 3.7 Các thu c tính nh dng nh dng hypertext link • Text-Decoration :none: không gch dưi • A:visited {color:#rrggbb} • A:link {styles cho v trí ch ưa ưc xem} • A:active {style cho nh ng link ang click} • A:hoever {style khi tr lưt qua link} • A:hover {color: #FF00FF;}
45. NH D NG V N B N - S DNG CSS TRONG DREAMWEAVER
46. 1. NH D NG V N B N • Cách nh p: – Ng tn: Enter – Xu ng dòng trong cùng m t on: Shift + Enter. • Sử dụng thanh công c ụ Properties Inspector hi u ch nh v n b n, b ng cách ánh d u kh i vn b n , ch n ki u nh d ng
47. 1. NH D NG V N B N nh dng font ch Cách 1 : Format, ch n các heading, à các nh d ng m u: Font, ki u ch , size, Cách 2 : Ch n nhóm Font: Ch n v n b n – Ch n Font: menu Font Properties Inspector (Text / Font). – Ki u Font nh thành t ng nhóm Font tu ý: Font/ Ch n Edit Font List
48. 1. NH D NG V N B N nh dng font ch
49. 1. NH D NG V N B N nh dng font ch Font size : Ch n kh i vn bn: • Trong mc Size ca Properties Inspector • Text/ Size. Size ch trong Dreamweaver gm 17 Size , trong ó có 8 mức th ể hi ện bằng số, t 9 đến 36 và 9 mức th ể hi ện bằng ch ữ Font Color : • Ch n kh i vn bn, Click nút Text Color trong properties inspector , ch n màu • Ho c ch n Text/ Color
50. 1. NH D NG V N B N nh dng font ch Click ch n màu • Canh l on vn bn – Ch n Text / Align ho c Click công c
51. 1. NH D NG V N B N Danh sách • Danh sách dng li t kê: To danh sách dng li t kê:Ch n Text/ List • Unordered List : Chèn Bulletted u dòng • Ordered List : ánh s th t u dòng • Definition list : Danh sách nh ngh a Thay i thu c tính li t kê: • t du nháy trong danh sách li t kê • Ch n Text/ List/ Properties • Ho c click nút List Item trong thanh properties
52. 1. NH D NG V N B N Danh sách • List Type: Ch n ki u danh sách (Bullets ho c Numbered) • Start count: S bt du cho danh sách li t kê List item: • New Style: li t kê nhi u cp • Reset count to: s bt u cho danh sách con
53. SS ddngng CSS:CSS: DreamweaverDreamweaver cungcung ccpp côngcông cc ttoo stylestyle ơơ nn gigi nn vvàà nhanhnhanh chch óóngng
54. 2. S DNG CSS To CSS cc b • To CSS cc b: Style ưc to trong trang hi n hành Cách to: – Ch n Text /CSS Styles/ New Xu t hi n hp tho i New CSS Style: – Ho c Window/ CSS Style , m CSS Panel , Cilck nút New CSS rule Click nút New CSS rule
55. 2. S DNG CSS To CSS cc b Selector type : Ch n lo i CSS Define in : Ch n This document only: To style (internal style ), s dng trong trang hi n hành
56. 2. S DNG CSS Có 3 lo i style – Class : Style dng lp • Name : Nh p tên lp, bt u bng du (.) – Tag : nh ngh a tag • Tag : Ch n tên tag – Advanced : nh dng các tag riêng bi t • Selector : Nh p #IDName (bt u bng du #) – OK / Ca s CSS Style definition : • Khung category: Ch n nhóm nh dng • Khung style : ch n các nh dng
57. 2. S DNG CSS CSS style Ch n Apply và OK Trong CSS Panel xu t hi n StyleStyle vvaa ttoo
58. 2. S DNG CSS Cách s dng Style cc b Cách s dng : • Ch n ni dung vn bn cn nh dng • Trong CSS Style Panel , ch n tên CSS (hay ch n tên style: Properties inspector ) •Nu lo i tag nh dng riêng bi t thì i tưng s dng style ph i có tên nh danh ID
59. 2. S DNG CSS To mt tp tin CSS • To mt tp tin CSS: Tp tin ki u .CSS, nm trong th ư mc root của Site Cách to: Text/ CSS Styles/ New Trong hp tho i New CSS Style • Selector Type: Ch n lo i style • Define in : Ch n New Style Sheet file, OK  Hp tho i yêu cu lưu tp tin CSS Ca s CSS Style definition : • Khung category : Ch n nhóm nh dng • Khung style : ch n các nh dng gi ng style cc b
60. 2. S DNG CSS To mt tp tin CSS Ch n Apply và OK Trong CSS Panel xu t hi n tp tin Style va to
61. 2. S DNG CSS Áp dng CSS t tp tin CSS : – Áp dng CSS t tp tin CSS : •M trang HTML cn s dng tp tin CSS • Ch n Text/ CSS Style/ Attach Style Sheet . ( Click Attach Style Sheet trong Style Panel) • Ch n tp tin CSS cn kt ni, Click nút Browse • Link : Ch liên kt vi tp tin CSS s dng • Import : Chép tập tin CSS vào trang
62. 2. S DNG CSS Hi u ch nh - Xoá • Hi u ch nh mt CSS: – Click ph i tr n tên CSS trong CSS Style Panel – Ch n Edit, th c hi n hi u ch nh • Xoá mt CSS Styles: Khi xoá mt CSS Style thì nh ng ni dung áp dng CSS Style b xoá s tr v tr ng thái ban u – Ch n CSS Style cn xoá – Click nút Delete CSS Style trong CSS Style Panel – Ho c R_click, ch n Delete
63. 2. S DNG CSS Attach Style Sheet Delete Style New Style Sheet
64. 3. M T S K THU T Text : Công dng : Thông th ưng s dng k thu t này trang trí. Thao tác chung : + To mu nh dng chung (CSS Style) cho text. + Ch n text cn nh dng theo mu. + Ch n nh dng ã ưc to.
65. 3. M T S K THU T Text : Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Vào menu Text / CSS Styles / New  t tên cho mu nh dng, click OK
66. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  t tên file CSS lưu trên Windows.  Click Save lưu file CSS.
67. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Xu t hi n hp tho i cho phép nh dng các tính ch t ca text.
68. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Type :
69. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Background :
70. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Block :
71. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Box :
72. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Border :
73. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  List :
74. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Positioning :
75. 3. M T S K THU T Text: Thao tác chung : + To mu nh dng chung (CSS Style) cho text.  Extensions :
76. 3. M T S K THU T Text: Thao tác chung : + Ch n text cn nh dng theo mu. + Ch n nh dng ã ưc to. Kết quả
77. 3. M T S K THU T Ngoài ra có th s dng CSS cho các i tưng khác nh ư: hình nh, bng
78. BÀI T P Áp dng Mu nh dng trong file css cho ni dung trang web: • Ví d: nh dng ô trong bng Th i khóa bi u: Th 2 Th 3 Th ư 4 Th 5 Th 6 Th 7 CN Ti t 1 TKWeb LT T CSDL Ti t 2 HH CSDL TKWeb TKWeb CSDL Ti t 3 CSDL HH CSDL LT T TKWeb Ti t 4 CSDL HH
79. BÀI T P Áp dng Mu nh dng trong file css cho ni dung trang web: nh dng ô trong bng Th i khóa bi u - Bưc 1: Ch n ô trên bng cn áp dng mu Mau1 trong file format Table.css Kt qu ta ưc mt nh ngh a mu mi.
80. BÀI T P Áp dng Mu nh dng trong file css cho ni dung trang web: Ví d: nh dng ô trong bng Th i khóa bi u: Bưc 2: Ch n cell cn nh dng. Vào c a s Property ch n style: style1
81. BÀI T P Áp dng Mu nh dng trong file css cho ni dung trang web: - Bưc 3 : T ca s Modify Style , ch n tên m u cn áp d ng trong danh sách Class / Ok - Bưc 4: Ki n tra li kết qu ả áp dụng mẫu. Ch n ô va mi áp dng mu, chuy n qua ch Code