Tài liệu ÔN TẬP VỀ STYLE SHEETS ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (961.11 KB, 23 trang )
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
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Định nghĩaStyle
Kiểu1
<tag style =
“property1:value1;
property2:value2;
………
propertyN:valueN;”>…</tag>
Kiểu2
SelectorName {
property1:value1;
property2:value2;
………
propertyN:valueN;}
<tag class = “SelectorName”>
………
</tag>
Ví dụ:
<h1 style=“
color : blue;
font-family : Arial;” > DHKHTN </h1>
Ví dụ:
.TieuDe1 {
color: red;
font-family: Verdana, sans-serif; }
<h1 class=“TieuDe1”> DHKHTN </h1>
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
13
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; }
<h1 class=“TieuDe1”> DHKHTN </h1>
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
Selector
Selector
Loại Mô tả phạmvi ảnh hưởng Ví dụ
element
Định dạng áp dụng cho ND tấtcả
các tag Element trong tài liệuWeb
h1 {color: red;}
/* ND củathẻ <h1> bị định dạng màu
chữ=đỏ */
#id
Định dạng áp dụng cho ND tấtcả
các tab có thuộctínhid trong tài
liệuWeb
#test {color: green;}
/* ND củabấtkỳ tag có thuộc tính id=test
đềubị định dạng màu chữ=xanh lá */
.class
Định dạng áp dụng cho ND tấtcả
các tab có thuộctínhclass trong
tài liệuWeb
.note {color: yellow;}
/* ND củabấtkỳ tag có thuộctính
class=note đềubị định dạng màu
chữ=vàng*/
element . class
Định dạng áp dụng cho ND các
tag Element có thuộctínhclass
tương ứng
h1.note {text-decoration:
underline;}
/* ND của các thẻ <h1> có thuộctính
class=note đềubị định dạng gạch chân */
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Loại Mô tả phạmvi ảnh hưởng Ví dụ
Grouping
Định dạng áp dụng cho ND một
nhóm các tag trong tài liệu.
h1,h2,h3 {background-color:
orange;}
/* ND của các thẻ <h1> <h2> <h3> đềubị
định dạng màu nền= màucam */
Contextual
Định dạng áp dụng cho ND các
thẻ đượclồng trong mộtthẻ cha
nào đó
p strong {color: purple;}
/* ND của các thẻ <strong> nằm trong thẻ
<p> đềubị định dạng màu chữ=màu tía */
Pseudo Class
Pseudo
element
Định dạng đượcápdụng dựa vào
trạng thái của các Element.
(Không xuấthiện trong mã lệnh
HTML)
C
C
á
á
c
c
lo
lo
ạ
ạ
i
i
Selector (
Selector (
tt
tt
)
)
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
-
-
Element
Element
Có hiệu ứng trên tấtcả element cùng loạitag
Ví dụ :
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
–
–
ID rules
ID rules
Có hiệu ứng duy nhấttrênmột element có đúng id.
Ví dụ :
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
–
–
Class rules
Class rules
Có hiệu ứng trên tấtcả các loại tag có cùng giá trị
thuộctínhclass.
Ví dụ :
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
–
–
K
K
ế
ế
t
t
h
h
ợ
ợ
p
p
Element
Element
v
v
à
à
Class
Class
Ví dụ :
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style 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ụ :
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
–
–
Pseudo Class
Pseudo Class
Đị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.
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
–
–
Pseudo Element
Pseudo Element
Đị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.
Thiếtkế & Lập trình WEB 2 – Ôn tậpvề Style Sheets
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
–
–
Pseudo Element
Pseudo Element
