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