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ụ: . 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. Sheets © 2007 Khoa CNTT – ĐH KHTN Selector Selector - - Contextual Selection Contextual Selection Định dạng đượcápdụng cho nội dung trong chuổi tag theo đúng thứ tự Ví dụ : . 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ế