tailieunhanh - 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. | 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à .