[back]
[index]
Cascading Style Sheets
Tương tự trong
Word, bạn c� thể d�ng Style Sheets (CSS) trong HTML để định
dạng cho trang web. Thay v� phải viết đi viết lại một số TAGs,
bạn c� thể viết sẵn trong một đoạn code ở đầu trang hoặc trong
một .css file rồi import v�o trang web. CSS/CSS2
c� rất nhiều thuộc t�nh m� t�i kh�ng thể kể hết trong trang
n�y, xin giới thiệu với bạn ch�t �t về n� để bạn l�m quen v�
c� thể học th�m bằng c�ch xem trong HTML code của c�c trang
web hay. Xem trong đoạn code dưới bạn sẽ thấy r� hơn t�c dụng
của CSS.
<html>
<style type="text/css">
.button{
background-color: #7083c7;
color: #ffffff;
border-left: 1px solid #9dbcff;
border-right: 1px solid navy;
border-top: 1px solid #9dbcff;
border-bottom: 1px solid navy
}
.text{
font-family: arial, verdana;
font-color: red;
font-size: 12px;
}
body {
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #7083c7
}
</style>
<body>
<form>
<input type="button" value="send" class="button">
</form>
<div class="text">This is a
test</div>
</body>
</html> |
Trong v� dụ tr�n, bạn thấy d�ng chữ "This
is a test"
kh�ng nằm trong cặp TAG
<font>
v� </font>
m� nằm giữa
<div>
v� <div>.
TAG <div>
mang thuộc t�nh
class="text"
v� c� t�c dụng như:
<font face="arial,
verdana" color="red" size="2">.
V� cứ như vậy với những đoạn text kh�c trong cả trang. C�i lợi
ở đ�y l� khi muốn thay đổi giao diện cả trang, bạn kh�ng cần
sửa từng đoạn code m� chỉ cần thay đổi thuộc t�nh
.text
trong CSS.
|
Thuộc
t�nh của font |
- font-style:
normal
(thẳng) hay
italic /
oblique
(nghi�ng)
- font-variant:
normal (b�nh thường) hay small-caps (hoa nhưng nhỏ như c�c
chữ kh�c trong c�ng d�ng)
- font-weight:
normal
(b�nh thường),
bold,
bolder
(đậm) hay
light,
lighter
(gầy)
- font-size:
cỡ của chữ - giống như
<font size="">
- kiểu tuyệt
đối:
xx-small,
x-small,
small,
medium,
large,
x-large
hoặc
xx-large
- kiểu tương
đối:
smaller
hoặc
larger
- chiều rộng:
mm,
cm,
in
(inch),
pt
(point),
px
(pixel),
pc
(pica)...
- line-height:
khoảng c�ch giữa c�c d�ng chữ
- normal:
b�nh thường
- tuyệt đối:
d�ng số (1.5
/ 2 / 3....).
V� dụ: nếu chiều khổ chữ l�
10 pt
v�
line-height: 1.5
th� khoảng c�ch giữa c�c d�ng sẽ l�
10 x line-heigt
= 10 x
1.5 = 15 pt
- font-family:
cho ph�p định kiểu chữ (Arial, Verdana, sans-serif)
|
|
|
Thuộc t�nh của nền
v� m�u trong trang web |
-
background-attachment:
thuộc t�nh n�y cho ph�p chọn xem h�nh nền nằm cố định trong
trang web (fixed)
hay trượt theo phần bạn xem (scoll)
-
background-color:
c� thể chọn m�u (RGB:
255,255,255
/ color name:
white
/ Hex:
#ffffff)
hoặc
transparent
-
background-image:
cho ph�p bạn chọn một h�nh l�m nền cho trang web
-
background-position:
cho ph�p bạn chọn điểm bắt đầu của h�nh nền
-
background-repeat:
tự động nối tiếp (repeat)
/ tự động nối tiếp theo chiều ngang (repeat-x)
/ tự động nối tiếp theo chiều dọc (repeat-y)
/ khộng tự động nối tiếp (no-repeat)
V� dụ:
<style>
body{
background-image: url(images/bg.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: black;
} |
Muốn c� thanh cuộn m�u trong trang web, bạn chỉ cần d�ng
code sau:
<style>
body {
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #7083c7;
}
</style> |
|
|
[index]
|