1. Trang chủ
  2. Công Nghệ Thông Tin

Tài liệu ÔN TẬP VỀ STYLE SHEETS ppt

23 470 0
Tài liệu ÔN TẬP VỀ STYLE SHEETS ppt

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

Bài giảng môn học Thi Thi ế ế t t k k ế ế & & L L ậ ậ p p tr tr ì ì nh nh WEB 2 WEB 2 ÔN T ÔN T Ậ Ậ P V P V Ề Ề STYLE SHEETS STYLE SHEETS Khoa Công nghệ thông tin Trường ĐạihọcKhoahọcTự nhiên Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN CSS CSS  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) Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN C C á á c c lo lo ạ ạ i i CSS CSS  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) Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN 1. Inline Style Sheet  Định nghĩa style trong thuộc tính style củatừng tag HTML  Cú pháp <tag style = “property1:value1;…propertyN:valueN;”> … </tag>  Ví dụ: <H1 STYLE="color: yellow">This is yellow</H1> Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN 2. Embedding Style Sheet • Nhúng trong tag <style> củatrangHTML  Định nghĩa style theo cú pháp <head> <style type=“text/css” media="all | print | screen" > <! SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} … > </style> </head> Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN 6 Embedding Style Sheet – Ví dụ <HTML> <HEAD> <TITLE> Embedded Style Sheet </TITLE> <STYLE TYPE="text/css"> <! P { color: red; font-size: 12pt; font-family: Arial;} H2 { color: green;} > </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H2>This is green</H2> <P>This is red, 12 pt. and Garamond.</P> </BODY> </HTML> Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN 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: <head> <link rel=“stylesheet” href=“URL” type="text/css"> </head> 2. Trong trang HTML: Liên kếtbằng tag style với @import url. Cú pháp <head> <style type=“text/css” media="all | print | screen" > @import url(URL); </style> </head> Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN 8 External Style Sheet – Ví dụ Trong tập tin MyStyle.CSS H2 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; BACKGROUND-COLOR: red; } Trong trang Web có sử dụng MyStyle.CSS <html> <head> <title>FrontPage 98 - Cascading Style Sheets</title> <link HREF="MyStyle.css" REL="stylesheet" > </head> <body> <h2>This is an H2 </h2> </body> </html> Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN So So s s á á nh nh , , Đ Đ á á nh nh gi gi á á Inline Style Sheet Embedding Style Sheet External Style Sheet Khai báo Kiểu1 Kiểu2 Kiểu2 Cú pháp <p style=“color:red;”> Test </p> <style type=“text/css”> .TieuDe1{color: red;} </style> <p class=“TieuDe1”> Test </p> <link rel=“stylesheet “ href=“main.css”/> <p class=“TieuDe1”> Test </p> Ưu điểm • Dễ dàng quảnlýStyle theo từng tag của tài liệu web. • Có độ ưutiêncaonhất • Dễ dàng quảnlýStyle theo từng tài liệuweb. • Không cầntảithêmcác trang thông tin khác cho style • Có thể thiếtlập Style cho nhiềutàiliệuweb. • Thông tin các Style được trình duyệt cache lại Khuyết điểm • CầnphảiKhaibáolại thông tin style trong từng tài liệu Web và các tài liệu khác một cách thủ công. • Khó cậpnhậtstyle • Cầnphảikhaibáolại thông tin style cho các tài liệukháctrongmỗilầnsử dụng • Tốnthời gian download file *.css và làm chậmquá trình biên dịch web ở trình duyệt trong lần đầusử dụng Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets © 2007 Khoa CNTT – ĐH KHTN Đ Đ ộ ộ ưu ưu tiên tiê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 [...]... – ĐH KHTN 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 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 Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets Selector - Contextual Selection Định...Thiết kế & Lập trình WEB 2 – Ôn tập về Style Sheets © 2007 Khoa CNTT – ĐH KHTN 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 … SelectorName { property1:value1; property2:value2; ……… propertyN:valueN;} ……… Ví dụ: Ví dụ: . CầnphảiKhaibáolại thông tin style trong từng tài liệu Web và các tài liệu khác một cách thủ công. • Khó cậpnhậtstyle • Cầnphảikhaibáolại thông tin style cho các tài liệukháctrongmỗilầnsử dụng •. quảnl Style theo từng tài liệuweb. • Không cầntảithêmcác trang thông tin khác cho style • Có thể thiếtlập Style cho nhiềutàiliệuweb. • Thông tin các Style

Ngày đăng: 20/01/2014, 04:20

Xem thêm: Tài liệu ÔN TẬP VỀ STYLE SHEETS ppt, Tài liệu ÔN TẬP VỀ STYLE SHEETS ppt

Từ khóa liên quan

Mục lục

  • ÔN TẬP VỀ STYLE SHEETS

  • CSS

  • Các loại CSS

  • 1. Inline Style Sheet

  • 2. Embedding Style Sheet

  • Embedding Style Sheet – Ví dụ

  • 3. External Style Sheet

  • External Style Sheet – Ví dụ

  • So sánh, Đánh giá

  • Độ ưu tiên

  • Định nghĩa Style

  • Selector

  • Các loại Selector

  • Selector - Element

  • Selector – ID rules

  • Selector – Class rules

  • Selector – Kết hợp Element và Class

  • Selector - Contextual Selection

  • Selector – Pseudo Class

  • Selector – Pseudo Element

Tài liệu cùng người dùng

Tài liệu liên quan