ÔN TẬP VỀ STYLE SHEETS

Chia sẻ: Danh Ngoc | Ngày: | Loại File: PDF | Số trang:23

0
80
lượt xem
23
download

ÔN TẬP VỀ STYLE SHEETS

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

Bài giảng môn học ÔN TẬP VỀ STYLE SHEETS Khoa Công nghệ thông tin Trường Đại học Khoa học Tự nhiên Thiết kế & Lập trình WEB 2 Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets CSS CSS = Casscading 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)...

Chủ đề:
Lưu

Nội dung Text: ÔN TẬP VỀ STYLE SHEETS

  1. Bài giảng môn học ÔN TẬP VỀ STYLE SHEETS Khoa Công nghệ thông tin Trường Đại học Khoa học Tự nhiên Thiết kế & Lập trình WEB 2
  2. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets CSS CSS = Casscading 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) © 2007 Khoa CNTT – ĐH KHTN
  3. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Các loại CSS Gồm 3 loại CSS – Inline Style Sheet (Nhúng CSS vào tag HTML) – Embedding Style Sheet (Nhúng CSS vào trang web) – External Style Sheet (Liên kết CSS với trang web) © 2007 Khoa CNTT – ĐH KHTN
  4. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets 1. Inline Style Sheet Định nghĩa style trong thuộc tính style của từng tag HTML Cú pháp … Ví dụ: This is yellow © 2007 Khoa CNTT – ĐH KHTN
  5. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets 2. Embedding Style Sheet • Nhúng trong tag của trang HTML Định nghĩa style theo cú pháp © 2007 Khoa CNTT – ĐH KHTN
  6. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Embedding Style Sheet – Ví dụ This is green This is red, 12 pt. and Garamond. Embedded Style Sheet 6 © 2007 Khoa CNTT – ĐH KHTN
  7. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets 3. External Style Sheet Mọi style đều lưu trong file có phần mở rộng là *.CSS Tạo liên kết đến file CSS 1. Trong trang HTML: liên kết bằng tag link. Cú pháp: 2. Trong trang HTML: Liên kết bằng tag style với @import url. Cú pháp @import url(URL); © 2007 Khoa CNTT – ĐH KHTN
  8. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets External Style Sheet – Ví dụ Trong tập tin MyStyle.CSS Trong trang Web có sử dụng MyStyle.CSS H2 { FONT-WEIGHT: bold; FrontPage 98 - FONT-SIZE: 16pt; Cascading Style Sheets COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; This is an H2 } 8 © 2007 Khoa CNTT – ĐH KHTN
  9. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets So sánh, Đánh giá Inline Style Sheet Embedding Style Sheet External Style Sheet Khai báo Kiểu 1 Kiểu 2 Kiểu 2 Cú pháp Test Test Ưu điểm • Dễ dàng quản lý Style • Dễ dàng quản lý Style • Có thể thiết lập Style cho theo từng tag của tài liệu theo từng tài liệu web. nhiều tài liệu web. web. • Không cần tải thêm các • Thông tin các Style được • Có độ ưu tiên cao nhất trang thông tin khác cho trình duyệt cache lại style Khuyết điểm • Cần phải Khai báo lại • Cần phải khai báo lại • Tốn thời gian download thông tin style trong từng thông tin style cho các tài file *.css và làm chậm quá tài liệu Web và các tài liệu liệu khác trong mỗi lần sử trình biên dịch web ở trình khác một cách thủ công. dụng duyệt trong lần đầu sử • Khó cập nhật style dụng © 2007 Khoa CNTT – ĐH KHTN
  10. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Độ ưu tiên Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS (độ ưu tiên giảm dần) : 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet 4. Browser Default © 2007 Khoa CNTT – ĐH KHTN
  11. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets © 2007 Khoa CNTT – ĐH KHTN
  12. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Định nghĩa Style Kiểu 1 Kiểu 2 … propertyN:valueN;} ……… Ví dụ: Ví dụ: DHKHTN font-family: Verdana, sans-serif; } DHKHTN © 2007 Khoa CNTT – ĐH KHTN
  13. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector Là tên 1 style tương ứng với một thành phần được áp định dạng Ví dụ: .TieuDe1 { color: red; font-family: Verdana, sans-serif; } DHKHTN 13 © 2007 Khoa CNTT – ĐH KHTN
  14. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Các loại Selector Loại Mô tả phạm vi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tất cả h1 {color: red;} các tag Element trong tài liệu Web /* ND của thẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tất cả #test {color: green;} các tab có thuộc tính id trong tài /* ND của bất kỳ tag có thuộc tính id=test liệu Web đều bị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tất cả .note {color: yellow;} các tab có thuộc tính class trong /* ND của bất kỳ tag có thuộc tính tài liệu Web class=note đều bị định dạng màu chữ=vàng*/ element . class Định dạng áp dụng cho ND các h1.note {text-decoration: tag Element có thuộc tính class underline;} tương ứng /* ND của các thẻ có thuộc tính class=note đều bị định dạng gạch chân */ © 2007 Khoa CNTT – ĐH KHTN
  15. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Các loại Selector (tt) Loại Mô tả phạm vi ảnh hưởng Ví dụ Grouping Định dạng áp dụng cho ND một h1,h2,h3 {background-color: nhóm các tag trong tài liệu. orange;} /* ND của các thẻ đều bị định dạng màu nền = màu cam */ Contextual Định dạng áp dụng cho ND các p strong {color: purple;} thẻ được lồng trong một thẻ cha /* ND của các thẻ nằm trong thẻ nào đó đều bị định dạng màu chữ=màu tía */ Pseudo Class Định dạng được áp dụng dựa vào Pseudo trạng thái của các Element. element (Không xuất hiện trong mã lệnh HTML) © 2007 Khoa CNTT – ĐH KHTN
  16. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector - Element Có hiệu ứng trên tất cả element cùng loại tag Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  17. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector – ID rules Có hiệu ứng duy nhất trên một element có đúng id. Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  18. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector – Class rules Có hiệu ứng trên tất cả các loại tag có cùng giá trị thuộc tính class. Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  19. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector – Kết hợp Element và Class Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  20. Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector - Contextual Selection Định dạng được áp dụng cho nội dung trong chuổi tag theo đúng thứ tự Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
Đồng bộ tài khoản