WebCourse bai04 CSS CasscadingStyle Sheets

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 (1001.12 KB, 29 trang )

Thiếtkế và Lập trình Web 1
Khoa
Khoa
CNTT
CNTT
–
–
ĐH
ĐH
.KHTN
.KHTN
Bài 4
CSS
CSS
–
–
Casscading
Casscading
Style Sheets
Style Sheets
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
N
N
ộ
ộ
i
i
dung
dung
 GiớithiệuCSS

 Định nghĩaStyle
 Sử dụng và Phân loạiCSS
 Selector trong CSS và phạmvi ảnh hưởng
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
N
N
ộ
ộ
i
i
dung
dung
 GiớithiệuCSS
 Định nghĩaStyle
 Sử dụng và Phân loạiCSS
 Selector trong CSS và phạmvi ảnh hưởng
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Gi
Gi
ớ
ớ
i
i
thi
thi
ệ
ệ
u

u
v
v
ề
ề
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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
N
N
ộ
ộ
i
i
dung
dung
 GiớithiệuCSS
 Định nghĩaStyle
 Sử dụng và Phân loạiCSS
 Selector trong CSS và phạmvi ảnh hưởng
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Đ
Đ
ị

ị
nh
nh
ngh
ngh
ĩ
ĩ
a
a
Style
Style
–
–
Ghi
Ghi
ch
ch
ú
ú
 Giống Ghi chú trong C++
 Sử dung /*Ghi chú*/
 Ví dụ :
 SelectorName {
property1:value1; /*Ghi chu 1*/
property2:value2; /*Ghi chu 2*/
………
propertyN:valueN;}
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
N

N
ộ
ộ
i
i
dung
dung
 GiớithiệuCSS
 Định nghĩaStyle
 Sử dụng và Phân loạiCSS
 Selector trong CSS và phạmvi ảnh hưởng
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
C
C
á
á
c
c
lo
lo
ạ
ạ
i
i
CSS
CSS
 Gồm 3 loại CSS
1. Inline Style Sheet
2. Embedding Style Sheet

3. External Style Sheet
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
1. Inline Style Sheet
 Định nghĩa style trong thuộc tính style củatừng
tag HTML
 Theo cú pháp kiểu1
<tag style = “property1:value1;…propertyN:valueN;”>
…
</tag>
 Ví dụ:
<H1 STYLE="color: yellow">This is yellow</H1>
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
2. Embedding Style Sheet
• Nhúng trong tag <style> củatrangHTML
 Định nghĩa style theo cú pháp kiểu2
<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 1 – Bài 4: CSS – Casscading Style Sheet

© 2007 Khoa CNTT – ĐH KHTN
12
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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
3. External Style Sheet
 Mọistyle đềulưu trong file có phầnmở rộng là *.CSS
 Định nghĩa style theo cú pháp kiểu2
 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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
14
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;
font-color: white
}
Trong trang Web có sử dụng
MyStyle.CSS
<html>
<head>
<title>FrontPage 98 -
Cascading Style Sheets</title>

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 1 – Bài 4: CSS – Casscading Style Sheet
© 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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
N
N
ộ
ộ
i
i
dung
dung
 GiớithiệuCSS
 Định nghĩaStyle
 Sử dụng và Phân loạiCSS
 Selector trong CSS và phạmvi ảnh hưởng
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
19
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 1 – Bài 4: CSS – Casscading Style Sheet

© 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à
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à 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 1 – Bài 4: CSS – Casscading Style Sheet
© 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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Selector

Selector
trong
trong
CSS
CSS
-
-
Element
Element
 Có hiệu ứng trên tấtcả element cùng loạitag
 Ví dụ :
Thiếtkế & Lập trình WEB 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
trong
trong
CSS
CSS
–
–
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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
trong

trong
CSS
CSS
–
–
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 1 – Bài 4: CSS – Casscading Style Sheet
© 2007 Khoa CNTT – ĐH KHTN
Selector
Selector
trong
trong
CSS
CSS
–
–
K
K
ế
ế
t
t
h
h
ợ
ợ

p
p
Element
Element
v
v
à
à
Class
Class
 Ví dụ :

WebCourse bai04 CSS CasscadingStyle Sheets

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về