[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]
|