Bài giảng môn Thiết kế web - Phần 3: Ngôn ngữ định dạng CSS

Bài giảng môn Thiết kế web - Phần 3: Ngôn ngữ định dạng CSS trình bày tổng quan về CSS, các thuộc tính định dạng, các thuộc tính khác. Đây là tài liệu hữu ích với các bạn chuyên ngành Công nghệ thông tin và những ngành có liên quan.
Nội dung trích xuất từ tài liệu:
Bài giảng môn Thiết kế web - Phần 3: Ngôn ngữ định dạng CSS Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Chương 1: T NG QUAN V CSS Gi i thi u M t s quy ư c v cách vi t CSS I. GI I THI U 1. CSS là gì? Trong lĩnh v c xây d ng, chúng ta có trang trí n i th t, trong lĩnh v c th m m - làm p, chúng ta có k thu t make-up; còn trong lĩnh v c thi t k web chúng ta có CSS. CSS (Cascading Style Sheets) là m t ngôn ng quy nh cách trình bày cho các tài li u vi t b ng HTML, XHTML, XML, SVG, hay UML,… 2. T i sao CSS? Ngôn ng HTML cũng có s thu c tính nh d ng cơ b n cho text, picture, table, … nhưng nó không th t s phong phú và chính xác như nhau trên m i h th ng. CSS cung c p cho b n hàng trăm thu c tính trình bày dành cho các i tư ng v i s sáng t o trong k t h p các thu c tính giúp mang l i hi u qu cao. Ngoài ra, CSS ã ư c h tr b i t t c các trình duy t, nên b n hoàn toàn có th t tin trang web c a mình có th hi n th “như nhau” trên m i h i u hành. S d ng các mã nh d ng tr c ti p trong HTML t n hao nhi u th i gian thi t k cũng như dung lư ng lưu tr . Trong khi ó CSS ưa ra phương th c áp d ng m t khuôn m u chu n t m t file CSS ngoài. Có hi u qu ng b khi b n t o m t website có hàng trăm trang hay c khi b n mu n thay i m t thu c tính trình bày nào ó. CSS ư c c p nh t liên t c mang l i các trình bày ph c t p và tinh vi hơn. 3. H c CSS c n nh ng gì? - Có là m t ki n th c v HTML. - M t trình so n th o văn b n b n có th vi t mã CSS. Nên s d ng m t trình so n th o ơn gi n như Notepad trong Windows hay Pico trong Linux, Simple Text trong Mac. Hay t các chương trình như khi dùng DreamWeaver, FrontPage, Golive,… - M t trình duy t web. II. M T S QUY Ư C V CÁCH VI T CSS 1. Cú pháp CSS: tìm hi u cú pháp CSS chúng ta hãy th xem m t ví d sau. Ví d : nh màu n n cho m t trang web là xanh nh t (light cyan): + Trong HTML: + Trong CSS: body { background-color:#00BFF3; } Qua ví d trên ta th y ư c m i tương Cú pháp CSS cơ b n: ng gi a các thu c tính trong HTML và CSS. Selector { property:value; } Trong ó: + Selector: Các i tư ng mà chúng ta s áp d ng các thu c tính trình bày. + Property: Chính là các thu c tính quy family, color, padding, margin,… nh cách trình bày. Như: background-color, font- M i thu c tính CSS ph i ư c gán m t giá tr . N u có nhi u hơn m t thu c tính cho m t selector thì chúng ta ph i dùng m t d u ; (ch m ph y) phân cách các thu c tính. T t c các thu c tính trong m t selector s ư c t trong m t c p ngo c nh n sau selector. Biên s an: Dương Thành Ph t Trang 60 Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Ví d : body { background:#FFF; color:#FF0000; font-size:14pt } d c hơn, b n nên vi t m i thu c tính CSS dung lư ng lưu tr CSS c a b n. m t dòng. Tuy nhiên, nó s làm tăng i v i m t trang web có nhi u thành ph n có cùng m t s thu c tính, chúng ta có th th c hi n gom g n l i như sau: h1 { color:#0000FF; text-transform:uppercase } h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-transform:uppercase; } h1, h2, h3 { color:#0000FF; text-transform:uppercase; } + Value: Giá tr c a thu c tính. Như ví d trên value chính là #FFF dùng tr ng cho n n trang. i v i m t giá tr có kho ng tr ng, b n nên nh màu t t t c trong m t d u ngo c kép. Ví d : font-family:”Times New Roman” i v i giá tr là ơn v o, không nên t m t kho ng cách gi a s o v i ơn v c a nó. Ví d : width:100 px. Nó s làm CSS b vô hi u trên Mozilla/Firefox hay Netscape. Chú thích trong CSS: Cũng như nhi u ngôn ng web khác. Trong CSS, chúng ta cũng có th vi t chú thích cho các o n code như sau /* N i dung chú thích */ Ví d : /* Màu ch cho trang web là màu */ body { color:red } 2. ơn v CSS: B ng li t kê các ơn v chi u dài và màu s c dùng trong CSS. ơn v chi u dài ơn v Mô t % Ph n trăm in Inch (1 inch = 2.54 cm) cm Centimeter mm Millimeter pc Pica (1 pc = 12 pt) px Pixels ( i m nh trên màn hình máy tính) pt Point (1 pt = 1/72 inch) em 1 em tương ương kích thư c font hi n hành, n u font hi n hành có kích c 14px thì 1 em = 14 px. ây là m t ơn v r t h u ích trong vi c hi n th trang web. ơn v màu s c ơn v Color-name RGB (r,g,b) RGB (%r,%g,%b) Hexadecimal RGB 3. V trí Mô t Tên màu. Ví d : black, white, red, green, blue, cyan, magenta,… Màu RGB v i 3 giá tr R, G, B có tr t 0 – 255 k t h p v i nhau t o ra vô s màu. Màu RGB v i 3 giá tr R, G, B có tr t 0 – 100% k t h p. Mã màu RGB d ng h th p l c. Ví d : #FFFF: tr ng, #000: en, t CSS: Chúng ta có ba cách khác nhau nhúng CSS vào trong m t tài li u HTML + Cách 1: N i tuy n (ki u thu c tính) ây là m t phương pháp nguyên th y nh t nhúng CSS vào m t tài li u HTML b ng cách nhúng vào t ng th HTML mu n áp d ng. Biên s an: Dương Thành Ph t Trang 61 Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS Lưu ý: N u b n mu n áp d ng nhi u thu c tính cho nhi u th HTML khác nhau thì không nên dùng cách này. Ví d nh n n màu en cho trang và màu ch tr ng cho o n văn b n như sau: Ví d ^_^ Welcome To MyWebsite ^_^ + Cách 2: Bên trong (th style) b ng cách rút t t c các thu c tính CSS vào trong th style ( ti n cho công tác b o trì, s a ch a v sau). Ví d nh n n màu tr ng cho trang và màu ch xanh lá cho o n văn b n như sau: Ví d body { background-color:#000 } p { color:white } ^_^ Welcome To MyWebsite ^_^ Lưu ý: Th style nên t trong th head. + Cách 3: Bên ngoài (liên k t v i m t file CSS bên ngoài) Thay vì t t t c các mã CSS trong th style chúng ta s ưa chúng vào trong m t file CSS (có ph n m r ng .css). ây là cách làm ư c khuy n cáo, website l n s d ng cùng m t ki u m u. Cú pháp Ho c c bi t h u ích cho vi c ng b hay b o trì m t chèn file css vào trang là: @import url("filename.css") + u tiên chúng ta s t o ra m t file html Ví d ^_^ Welcome To MyWebsite ^_^ Biên s an: Dương Thành Ph t Trang 62 Bài Gi ng Môn Thi t K Web Ph n 3 : Ngôn Ng nh D ng CSS + Sau ó hãy t o m t file style.css lưu cùng thư m c v i file htm trên v i n i dung: body { background-color:#000 } p{ color:Wh ...