CSS (Cascading Style 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 (919.03 KB, 18 trang )
Bài 3
CSS (Cascading Style Sheets)
•
Giới thiệu CSS
•
Tạo CSS
•
Quản lý CSS
•
Định nghĩa các CSS
•
Áp
dụng
CSS
GIỚI THIỆU CSS
•
CSS
(Cascading Style Sheets) là
sự
kếthợpmột
nhóm
định
dạng
tự
chọn. Định
nghĩamột
CSS là
đặtmộttên
CSS cho
một
nhóm
các
định
dạng. Sử
dụng
tên
CSS là
sử
dụng
nhóm
định
dạng
mà
nó
đạidiện
•
CSS
có
thểđính
kèm
trong
cùng
trang
HTML hay lưu
riêng
mộttậptin kiểu.CSS, phụcvụ
cho
nhiều
trang.
•
CSS
giúp
việcchỉnh
sửagiaodiện
trang
web trở
nên
linh
động, nhanh
chóng
& chính
xác.
•
Để
thuậntiện
cho
nhiềungười
Dreamweaver
CS4 tạomột
số
hộpthoại
CSS giúp
bạn
nhanh
chóng
tạo
đượcmột
CSS như
ý.
TẠO CSS
•
Vào
thựcFormat
CSS Styles New…
•
Hoặcmở
bảng
CSS: vào
thực
đơn
Window
CSS Styles, bấm
công
cụ
New CSS Rule
•
Hoặctạomớimộttập
tin CSS: File Blank Page CSS
•
Selecter
Tyle: Chọnkiểu
Seclector
•
Selector Name: Đặttêncho
selector
QUẢN LÝ CSS
• Add Property: Thêm
thuộctínhvàgiátrị
• Attach : gắntậptin CSS vàotậptin HTML
• New : TạomớiCSS
• Edit : Hiệuchỉnh
lạiCSS
• Delete : xóa
CSS
ĐỊNH NGHĨA CSS -
TYPE
CSS Style cho
text (tyle)
•
Font-family:
xác
định
kiểuchữ
vd:
font-family:"Times New
Roman",Georgia,Serif;
•
Font-size:
xác
định
kích
cỡ
cho
chữ.
•
Font-style:
xác
định
chữ
thường
(Normal)
hoặc
in nghiêng
(Italic).
•
Line-height:
định
chiềucaocủa
dòng
chữ.
•
Text-decoration:
thêm
hoặcxóađường
gạch
ngang
cho
chữ
vd:
a { text-decoration:none }
•
Font-weight:
chỉđịnh
độ
in đậmcủachữ.
•
Text-transform:
xác
định
chữ
in hoa
(uppercase) hay in thường
(lowercase).
•
Color:
xác
định
màu
sắcchochữ.
BACKGROUND
CSS Style cho
nền
(Background)
• Background Color: chỉđịnh
màu
nền.
•
Background Image: Nềncủa
đối
tượng
là
hình.
•
Background Repeat: xác
định
kiểulặp
hình
nền. (No Repeat), (Repeat),
(Repeat-x/ Repeat-y).
•
Background Attachment: chỉđịnh
hình
nền
ở
vị
trí
cốđịnh
(fixed), hoặccuộn
theo
nội
dung (scroll).
•
Background Position: xác
định
vị
trí
hình
nềnso với
đốitượng
hoặccửasổ
tài
liệu.
BLOCK
CSS Style cho
khối
(Block)
•
Word Spacing: Khoảng
cách
giữacác
từ
•
Letter Spacing: Khoảng
cách
giữacác
ký
tự
•
Vertical Align: canh
hàng
đốitượng
&
đượcápdụng
cho
thẻ
<img>.
• Text Align: canh
hàng
cho
vănbản.
•
Text Indent: khoảng
cách
thụt
đầu
dòng.
• Whites-pace: kiểm
soát
khoảng
trắng.
•
Display: ẩnhiện
đốitượng
& chỉđịnh
cách
hiểnthị
của
đốitượng, như
inline,
block,
BOX
CSS Style Box kiểmsoátbố
cục
các
đốitượng
• Width: Xác
định
chiềurộng
củaDiv
• Height: xác
định
chiềucaocủaDiv
•
Float: xác
định
vị
trí
tương
đốicủacác
đốitượng
như
vănbản, AP Divs, bảng
biểu, so với
đốitượng
đượcápdụng
thuộc
tính
float.
• Clear: dùng
để
đẩycácđốitượng
AP.
•
Padding: xác
định
khoảng
cách
từnội
dung & đường
biên
củaDiv
•
Margin: xác
định
khoảng
cách
giữacác
Div
BORDER
CSS Style cho
đường
viền
• Type: chỉđịnh
dạng
đường
viền.
• Width: xác
định
độ
dài
của
biên.
• Color: màu
củabiên
.
LIST
CSS Style cho
danh
sách
•
List style type: chỉđịnh
loại
gạch
đầu
dòng
(Bullet, Number).
•
List style image: chỉđường
dẫn
đếnhìnhảnh
ta
chọnlàmchấm
đầu
dòng.
•
List style position: xác
định
vị
trí
gạch
đầu
dòng.
POSITIONING
CSS Style cho
vị
trí
•
Position: Xác
định
vị
trí
của
đối
tượng:
•
Absolute: Vị
trí
chính
xác
tại
các
giá
trị
ta
nhập.
•
Relative: Vị
trí
tương
đốiso với
đối
tượng
khác.
•
Fixed: Vị
trí
cốđịnh
tạigiátrịđược
nhập& tương
quan
với
góc
trái
trên
củacửasổ
trình
duyệt.
• Static: Tùy
chọnmặc
định.
•
Visibility: Ẩnhiện
đốitượng. Các
giá
trị
là
kế
thừa(Inherit), hiện(Visible) &
ẩn
đốitượng
(Hidden).
POSITIONING tt
•
Z-Index: xác
định
lớp
đốitượng. Đốitượng
có
z-index lớnhơnsẽ
nằm
trên.
•
Overflow:
ẩnhiệnnội
dung vượt
quá
khung
chứacủa
div hay p.
•
Placement: chỉđịnh
vị
trí, kích
cỡ
của
khung
chứa. Giá
trị
mặc
định
là
pixel.
•
Clip: chỉđịnh
vùng
nhìn
củanội
dung.
EXTENSIONS
CSS Style mở
rộng
(Extensions)
• Page break before: ngắt
trang
trong
in ấn.
• Cursor: Thay
đổitrỏ
chuột.
• Filter: Áp
dụng
hiệu
ứng
cho
đốitượng, như
: blur, inversion.
DIV -
CSS
CấutrúcmộtDiv-CSS:
#tênDIV{
Định-dạng-1 : giá
trị 1;
Định-dạng-2 : giá
trị
2;
• Ví
dụ:
#main{
width: 780px;
margin: 0px auto;
background-color: #CCCC00;
float: left;
• áp
dụng:
<DIV id=“main”></DIV>
CLASS -
CSS
Cấutrúcmột
Class-CSS:
.tênCSS{
Định-dạng-1 : giá
trị 1;
Định-dạng-2 : giá
trị
2;
}
• Ví
dụ:
.nen{
width: 780px;
margin: 0px auto;
background-color: #CCCC00;
float: left;
• áp
dụng:
<DIV class=“nen”></DIV>
DECENDANT -
CSS
Định
dạng
theo
thứ
tự
cha con
•Ví
dụ:
.#menu_nav
ul
li
a{
Color: #ff0000;
text-decoration: none;
{
SCROLLBAR
Tạomàuthanhcuộn
