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

Chia sẻ: Baby Love | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

109
lượt xem 16
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 ng 15/08/2008 Khoa CNTT 1
Khái ni m DHTML DHTML (Dinamic HyperText Markup Language) DHTML = HTML + CSS + Script Language CSS- Cascading Style Sheets CSS - how to display HTML elements ? Script language – JavaScript, VBScript, PHP, ASP.NET,…Cho phép ñưa d li u lên trang web ñ ng: User Webpage 15/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 *.css 15/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 t 15/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-large 15/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 Sheet 15/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 pt Cá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 CSS 15/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 hr{color:green} } ph y 15/08/2008 Khoa CNTT 15
D ng ña ki u (Multiple style sheets) extenal style: Internal style: h3 h3 { { color: red; text-align: right; text-align: left; font-size: 20pt font-size: 8pt } } color: red; text-align: right; font-size: 20pt 15/08/2008 Khoa CNTT 16
Qui t c t o Selector (tt) B ch n thu c tính class class The class Selector p.right {text-align: right} p.center {text-align: center} This paragraph will be right-aligned. This paragraph will be center-aligned. .center {text-align: center} This heading will be center-aligned This paragraph will also be center-aligned. 15/08/2008 Khoa CNTT 17
Qui t c t o Selector (tt) B ch n thu c tính class – Trong trư ng h p có hơn m t class cho m t ph n t ki u? dl.center { Do NOT start a class name text-align: center; with a number! It will not work color: blue in Mozilla/Firefox. } dl.bold {font-weight: bold} …. Trong phan DL co center va bold p.right{text-align:right} p.left{text-align:left} Trong class left Trong class right Trong class right va left ??? 15/08/2008 Khoa CNTT 18
Qui t c t o Selector (tt) B ch n thu c tính ID (The id Selector) (The #green {color: green} p#para1 { text-align: center; color: red } VD: Tin t c th trư ng Th trư ng ch ng khoán Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. 15/08/2008 Khoa CNTT 19
CSS Comments Gi ng trong C++ /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial } 15/08/2008 Khoa CNTT 20