Định dạng bằng CSS potx
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 (570.67 KB, 31 trang )
Đ
Đ
ị
ị
nh
nh
d
d
ạ
ạ
ng
ng
b
b
ằ
ằ
ng
ng
CSS
CSS
Nguy
Nguy
ễ
ễ
n
n
Duy
Duy
H
H
ả
ả
i
i
Khoa
Khoa
CNTT
CNTT
-
-
ĐHSP
ĐHSP
H
H
à
à
N
N
ộ
ộ
i
i
CSS
CSS
9 CSS=Cascading Style Sheet: Mẫuquy
định cách thứcthể hiệncácthẻ HTML
9 Style được đưa vào HTML 4.0 để giải
quyếtmộtsố vấn đề.
9 Giúp tiếtkiệm đượcrất nhiềuthờigianvà
công sứcchoviệcthiếtkế web.
9 Có thểđịnh nghĩa nhiềustyle vàomộtthẻ
HTML (Cascading)
C
C
á
á
c
c
lo
lo
ạ
ạ
i
i
style
style
9 Có 4 loại style:
– Inline Style (Style đượcqui định trong 1 thẻ
HTML cụ thể)
– Internal Style (Style đượcqui định trong phần
<HEAD> của 1 trang HTML )
– External Style (style đượcqui định trong file
.CSS ngoài)
– Browser Default (thiếtlậpmặc định củatrình
duyệt)
9 Thứ tựưutiên: Mức ưutiêngiảmdầntừ
trên xuống
C
C
á
á
ch
ch
ch
ch
è
è
n
n
CSS
CSS
9 Đặt trong <head>…</head>
9 VớiInternal style:
<style type=“text/css”>
<!
Nội dung định nghĩa style
>
</style>
C
C
á
á
ch
ch
ch
ch
è
è
n
n
CSS (
CSS (
tt
tt
)
)
9 Với External style:
– Định nghĩa style trong file riêng (thường có
đuôi .CSS)
– Nhúng file CSS đã định nghĩa vào trang web:
<link href=“địachỉ file"
rel="stylesheet" type="text/css">
9 Với Inline style:
<tên_thẻ style=“tt1:gt1;tt2:gt2;…”>
Khai
Khai
b
b
á
á
o
o
v
v
à
à
s
s
ử
ử
d
d
ụ
ụ
ng
ng
style
style
Ch
Ch
ú
ú
ý
ý
khi
khi
vi
vi
ế
ế
t
t
style
style
9 Style phân biệtchữ hoa, chữ thường
9 Để ghi chú trong style sử dụng:
/*
Đoạn ghi chú
*/
Khai
Khai
b
b
á
á
o
o
style
style
selector {
selector {
Property1: Value1;
Property1: Value1;
Property2: Value2;
Property2: Value2;
}
}
Style
Style
á
á
p
p
d
d
ụ
ụ
ng
ng
cho
cho
th
th
ẻ
ẻ
c
c
ụ
ụ
th
th
ể
ể
9 Trường hợp1 thẻ: Đặt selector là tên_thẻ
p {
color: red;
}
9 Khai báo đồng thời nhiềuthẻ: Viếtdanh
sách tên thẻ phân cách bởidấuphảy
h1,h2,h3,h4,h5,h6{
font-family:arial;
}
T
T
ạ
ạ
o
o
l
l
ớ
ớ
p
p
9 Gắnvớithẻ cụ thể: Đặt selector là
tên_thẻ.tên_lớp
p.loai1{
color:red;
}
p.loai2{
color:blue;
}
9 Không gắnvớithẻ cụ thể: bỏ phần tên_thẻ đi,
giữ lạidấuchấm:
.loai3{
color:green;
}
S
S
ử
ử
d
d
ụ
ụ
ng
ng
l
l
ớ
ớ
p
p
9 Đặtthuộctínhclass củathẻ=“tên_lớp”:
<tên_thẻ class=“tên_lớp”>
9 Ví dụ:
<p class=“loai1”>Đoạn này màu đỏ</p>
<h1 class=“loai2”>Style không có hiệu
lực</h1>
<h2 class=“loai3”>Tiêu đề màu xanh</h3>
Đ
Đ
ị
ị
nh
nh
danh
danh
9 Tương tự như class. Thay dấuchấm(.) thànhdấu
thăng (#).
9 Cho thẻ cụ thể: tên_thẻ#định_danh{…}
9 Tổng quát: #định_danh{…}
9 Ví dụ:
p#doan1{
color:red;
}
#loai2{
color:blue;
}
S
S
ử
ử
d
d
ụ
ụ
ng
ng
đ
đ
ị
ị
nh
nh
danh
danh
9 Mỗi định danh là duy nhấttrêntrang
9 Đặtthuộctínhid củathẻ = định_danh
<tên_thẻ id=“định_danh”>
9 Ví dụ:
<p id=“doan1”>Đoạnnàymàuđỏ</p>
<h1 id=“loai2”>Tiêu đề xanh</h1>
M
M
ộ
ộ
t
t
s
s
ố
ố
trư
trư
ờ
ờ
ng
ng
h
h
ợ
ợ
p
p
c
c
ụ
ụ
th
th
ể
ể
CSS Basic
CSS Basic
1. CSS Background
2. CSS Text
3. CSS Font
4. CSS Border
5. CSS Margin
6. CSS Padding
7. CSS List
CSS Advanced
CSS Advanced
1. CSS Dimension
2. CSS Classification
3. CSS Positioning
4. CSS Pseudo-class
5. CSS Pseudo-element
6. CSS Media Types
CSS
CSS
cho
cho
n
n
ề
ề
n
n
CSS
CSS
cho
cho
n
n
ề
ề
n
n
(
(
tt
tt
)
)
CSS
CSS
v
v
à
à
cho
cho
b
b
ả
ả
n
n
CSS
CSS
v
v
à
à
cho
cho
b
b
ả
ả
n
n
(
(
tt
tt
)
)
CSS
CSS
v
v
à
à
font
font
CSS
CSS
v
v
à
à
font (
font (
tt
tt
)
)
CSS
CSS
v
v
à
à
font (
font (
tt
tt
)
)
CSS
CSS
v
v
à
à
font (
font (
tt
tt
)
)
CSS
CSS
v
v
à
à
đư
đư
ờ
ờ
ng
ng
vi
vi
ề
ề
n
n
