›

Bài giảng Thiết kế và lập trình Web 2 - Ôn tập về Style Sheets

pdf 23 trang huongle 4940
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và lập trình Web 2 - Ôn tập về Style Sheets", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_thiet_ke_va_lap_trinh_web_2_on_tap_ve_style_sheets.pdf

Nội dung text: Bài giảng Thiết kế và lập trình Web 2 - Ôn tập về Style Sheets

  1. Bài giảng môn học ÔNÔN TTẬẬPP VVỀỀ STYLESTYLE SHEETSSHEETS Khoa Công nghệ thông tin Trường ĐạihọcKhoahọcTự nhiên ThiThiếếtt kkếế && LLậậpp trtrììnhnh WEBWEB 22
  2. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets CSSCSS ƒ CSS = Casscading Style Sheets ƒ Dùng để mô tả cách hiểnthị các thành phầntrê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 đổithuộctínhtừng trang hoặccả site nhanh chóng (cascading) © 2007 Khoa CNTT – ĐH KHTN
  3. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets CCáácc loloạạii CSSCSS ƒ Gồm 3 loạiCSS – 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ếtCSS với trang web) © 2007 Khoa CNTT – ĐH KHTN
  4. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets 1. Inline Style Sheet ƒ Định nghĩa style trong thuộc tính style củatừng tag HTML ƒ Cú pháp ƒ Ví dụ: This is yellow © 2007 Khoa CNTT – ĐH KHTN
  5. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets 2. Embedding Style Sheet • Nhúng trong tag củatrangHTML ƒ Định nghĩa style theo cú pháp © 2007 Khoa CNTT – ĐH KHTN
  6. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề 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ếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets 3. External Style Sheet ƒ Mọistyle đềulưu trong file có phầnmở rộng là *.CSS ƒ Tạo liên kết đếnfile CSS 1. Trong trang HTML: liên kếtbằng tag link. Cú pháp: 2. Trong trang HTML: Liên kếtbằng tag style với @import url. Cú pháp @import url(URL); © 2007 Khoa CNTT – ĐH KHTN
  8. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề 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ếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SoSo ssáánhnh,, ĐĐáánhnh gigiáá Inline Style Sheet Embedding Style Sheet External Style Sheet Khai báo Kiểu1 Kiểu2 Kiểu2 Cú pháp Test Test Ưu điểm • Dễ dàng quảnlýStyle • Dễ dàng quảnlýStyle • Có thể thiếtlập Style cho theo từng tag của tài liệu theo từng tài liệuweb. nhiềutàiliệuweb. web. • Không cầntảithêmcác • Thông tin các Style được • Có độ ưutiêncaonhất trang thông tin khác cho trình duyệt cache lại style Khuyết điểm • CầnphảiKhaibáolại • Cầnphảikhaibáolại • Tốnthờ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ậmquá tài liệu Web và các tài liệu liệukháctrongmỗilầnsử 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 đầusử • Khó cậpnhậtstyle dụng © 2007 Khoa CNTT – ĐH KHTN
  10. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets ĐĐộộ ưưuu tiêntiên ƒ Thứ tựưutiênápdụng định dạng khi sử dụng các loại CSS (độ ưutiêngiảmdần) : 1. Inline Style Sheet 2. Embedding Style Sheet 3. External Style Sheet 4. Browser Default © 2007 Khoa CNTT – ĐH KHTN
  11. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN
  12. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets Định nghĩaStyle Kiểu1 Kiểu2 propertyN:valueN;} Ví dụ: Ví dụ: DHKHTN font-family: Verdana, sans-serif; } DHKHTN © 2007 Khoa CNTT – ĐH KHTN
  13. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets Selector ƒ Là tên 1 style tương ứng vớimộtthà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ếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets CCáácc loloạạii SelectorSelector Loại Mô tả phạmvi ảnh hưởng Ví dụ element Định dạng áp dụng cho ND tấtcả h1 {color: red;} các tag Element trong tài liệuWeb /* ND củathẻ bị định dạng màu chữ=đỏ */ #id Định dạng áp dụng cho ND tấtcả #test {color: green;} các tab có thuộctínhid trong tài /* ND củabấtkỳ tag có thuộc tính id=test liệuWeb đềubị định dạng màu chữ=xanh lá */ .class Định dạng áp dụng cho ND tấtcả .note {color: yellow;} các tab có thuộctínhclass trong /* ND củabấtkỳ tag có thuộctính tài liệuWeb class=note đềubị đị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ộctínhclass underline;} tương ứng /* ND của các thẻ có thuộctính class=note đềubị định dạng gạch chân */ © 2007 Khoa CNTT – ĐH KHTN
  15. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets CCáácc loloạạii SelectorSelector ((tttt)) Loại Mô tả phạmvi ả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ẻ đềubị định dạng màu nền= màucam */ Contextual Định dạng áp dụng cho ND các p strong {color: purple;} thẻ đượclồng trong mộtthẻ cha /* ND của các thẻ nằm trong thẻ nào đó đềubị định dạng màu chữ=màu tía */ Pseudo Class Định dạng đượcápdụng dựa vào Pseudo trạng thái của các Element. element (Không xuấthiện trong mã lệnh HTML) © 2007 Khoa CNTT – ĐH KHTN
  16. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector ElementElement ƒ Có hiệu ứng trên tấtcả element cùng loạitag ƒ Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  17. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector –– IDID rulesrules ƒ Có hiệu ứng duy nhấttrênmột element có đúng id. ƒ Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  18. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector –– ClassClass rulesrules ƒ Có hiệu ứng trên tấtcả các loại tag có cùng giá trị thuộctínhclass. ƒ Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  19. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector –– KKếếtt hhợợpp ElementElement vvàà ClassClass ƒ Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  20. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector ContextualContextual SelectionSelection ƒ Định dạng đượcápdụng cho nội dung trong chuổi tag theo đúng thứ tự ƒ Ví dụ : © 2007 Khoa CNTT – ĐH KHTN
  21. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector –– PseudoPseudo ClassClass ƒ Định dạng dựavàotrạng thái củaliênkết, sự kiện chuột. ƒ Có thể kếthợpvới Selector khác. © 2007 Khoa CNTT – ĐH KHTN
  22. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector –– PseudoPseudo ElementElement ƒ Định dạng dựavàovị trí đầutiên củakýtự, của dòng vănbản ƒ :first-letter, :first-line ƒ Có thể kếthợpvới Selector khác. © 2007 Khoa CNTT – ĐH KHTN
  23. Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets SelectorSelector –– PseudoPseudo ElementElement © 2007 Khoa CNTT – ĐH KHTN