chương 4: Bảng kiểu CSS

Dùng để mô tả cách hiển thị các thành phần trên trang web sử dụng tương tự dạng template.
Nội dung trích xuất từ tài liệu:
chương 4: Bảng kiểu CSS Chương 4: B ng ki u CSS - Khái ni m DHTML - Gi thi u CSS - Cách ho t ñ ng c a các CSS - Syntax- qui t c t o CSS - Phân lo i CSS và cách s d ng15/08/2008 Khoa CNTT 1 Khái ni m DHTMLDHTML (Dinamic HyperText Markup Language) DHTML = HTML + CSS + Script LanguageCSS- Cascading Style SheetsCSS - how to display HTML elements ?Script language – JavaScript, VBScript, PHP, ASP.NET,…Chophép ñưa d li u lên trang web ñ ng: User Webpage15/08/2008 Khoa CNTT 2 Gi i thi u CSS CSS- Cascading Style Sheets – Dùng ñ mô t cách hi n th các thành ph n trên trang WEB – S d ng tương t như d ng TEMPLATE – Có th s d ng l i cho các trang web khác – Có th thay ñ i thu c tính t ng trang ho c c site nhanh chóng (cascading) B ng ki u xác ñ nh cách b trí, trình bày, màu s c,… cho các tags c a HTML- VD: cho tag body màu h ng, cho tag p màu ñ , lo i font Times New Roman, lo i ch nghiêng,…- CSS ñ c lu trong: - B ng ki u nhúng trong file HTML - B ng ki u ngo i trú trong File b ng ki u riêng có ñuôi *.css15/08/2008 Khoa CNTT 3 Ưu, khuy t ñi m c a CSS Ưu ñi m: -Ki m soát b c c trang, k thu t thi t k phông và d ng ch t t hơn -D duy trì ho t ñ ng c a site hơn -Thông tin ki u ñư c tách ra kh i c u trúc site Khuy t ñi m: Không ñư c h tr r ng rãi, ho c h tr không h t15/08/2008 Khoa CNTT 4 Cách ho t ñ ng c a các CSS B ng ki u nhúng trong file HTML – Ph n ñ nh d ng ki u thư ng ñ t trong tag – Các ki u trong dòng: ñ t trong m t tag D ng ki u nào ñư c dùng cho tag khi có nhi u ki u ñư c ñ nh nghĩa cho nó? – Browser default – External style sheet ð ưu tiên tăng – Internal style sheet (inside the tag) – Inline style (inside an HTML element)15/08/2008 Khoa CNTT 5 Syntax- qui t c t o CSS The CSS syntax is made up of three parts: a selector, a property and a value: selector {property: value} p body {color: black} { text-align: center; p {font-family: sans serif} color: black; font-family: arial p {text-align:center;color:red} }15/08/2008 Khoa CNTT 6 Các giá tr kích thư c phông ch font- size – Các giá tr ñ l n: • Px - Pixel • Pt - Point • Pc - pica • In - inch • Mm - milimet • Cm - centimet – Ph n trăm % – Tương ñ i: • Larger • Smaller – Kích thư c tuy t ñ i: xx-small,x-small,small,medium, large, x- large, xx-large15/08/2008 Khoa CNTT 7 Phân lo i CSS và cách s d ng G m 3 lo i CSS 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet15/08/2008 Khoa CNTT 8 Inline Style Sheet ð nh nghĩa style trong thu c tính style c a t ng tag HTML Syntax (ki u 1): D li u c a tag Ví d : This is a paragraph 15/08/2008 Khoa CNTT 9 Embedding Style Sheet Nhúng trong tag c a trang HTML Syntax (ki u 2): 15/08/2008 Khoa CNTT 10 VD Embedding Style Sheet External Style Sheet M i style ñ u lưu trong file có ph n m r ng là *.css *.css Syntax gi ng như trong embedding SS ð dùng b ng ki u c n t o liên k t ñ n file CSS b ng 2 cách: 1. Liên k t b ng tag link. Cú pháp: 2. Liên k t b ng tag style dùng @import url. @import url(URL); 15/08/2008 Khoa CNTT 12 VD External Style Sheet Dùng file CSS riêng: Trong file “ex1.css”: body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} Chú ý: không tách r i This header is 36 ptCách khác: This header is blue This paragraph has a left margin of 50 pixels @import url(ex1.css) 15/08/2008 Khoa CNTT 13 So sánh, ñánh giá 3 lo i CSS15/08/2008 Khoa CNTT 14 Qui t c t o Selector Qui t c ñơn gi n: p { text-align: center; color: black; font-family: arial } Grouping h1,h2,hr Nhóm các b h1{color: green} { ch n cách h2{color: green} color: green nhau b i d u ...