Học căn bản Css

Hiểu đơn giản css là 1 công cụ trang trí,
hay đơn giản là thêm màu sắc, kiểu chữ,
bố cục 1 trang wap/web. Nếu biết sử
dụng bạn có thể bắt chước hoặc sáng
tạo bất cứ style nào cho trang wap/web
của bạn( Nếu css hỗ trợ )
Font chữ
background: ( màu nền )
background: url("http://..."); ( nền = hình
ảnh )
font-family: arial,verdana,sans-serif;
( kiểu font chữ )
font-style: ( kiểu chữ. Thường = normal,
ngiêng = italic...)
VD: font-style: italic;
font-variant: small-caps ( khá hay
thay thế toàn bộ font thường thành font
in HOA kích thước nhỏ)
font-weight: ( cái này chỉnh chữ in đậm
hay thường bold = đậm, normal =
thường )
VD: font-weight: bold;
font-size: ( chỉnh cỡ chữ theo px. Cỡ
bình thường là 12 đến 14 )
VD: font-size: 12px;
...
Nói tóm lại về font hiểu nôm na là thế. ví
dụ ta có 1 đoạn css như thế này
body {
font-style: italic;
font-variant:small-caps;
font-weight: bold;
font-size: 35px;
font-family: arial,verdana,sans-serif;
}
ta có thể viết tắt như thế này:
body {
font: italic bold 35px
arial,verdana,sans-serif;
}
Ok tạm xong font chữ
Các thuộc tính khác:
- width: ( chiều rộng px )
- height: ( chiều cao px )
- color: ( màu sắc. có thể dùng chữ hoặc
số vd: #ff0000 )
- padding: ( khoảng cách bên trong px.
Có thể viết theo kiểu padding-
left:,padding-bottom:,padding-
top:,padding-bottom: )
VD: padding-left: 10px; ( cách 10px ở
trong bên trái )
- margin: ( khoảng cách bên ngoài, như
padding )
- border: ( là khung viên. có các loại
khung viền: solid = nét thẳng, dashed =
gạch ngang đứt, dotted = chấm đứt,
double = nét liền 2 đường, groove = 1
nét đậm, ridge, inset, outset )
VD: border-left: 1px dashed #d0d0d0;
( nếu muốn làm khung thì xoá -left )
...
Thôi tới đây là đủ dùng bạn nào thích có
thể hỏi thêm
THỰC HÀNH
các class trong css thường bắt đầu bằng
.tenclass{
Thuộc tính;
}
Ví dụ tạo 1 class sau:
.abc{
background: #fff;
border-top: 1px dashed #008000;
border-bottom: 1px dashed #008000;
border-left: 1px solid #008000;
border-right: 1px solid #008000;
margin-top: 2px;
padding: 5px;
}
như class trên thì ta có 1 khung có nền
trắng(#fff) đóng khung, đường trên
(top), dưới(bottom) nét gạch ngang
màu xanh, 2 bên trái phải nét liền thẳng
khoảng cách bên trong là 5px bên
ngoài trên là 2px...
>> đại loại thế này
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _|
khi đã tạo xong 1 class nào đó thì ta sử
dụng như sau:
<div class="abc">Nội dung</div>
nếu ta có nhiều class bọc quanh 1 nội
dung thì ta làm như sau:
<div class="abc xyz">Nội dung</div>
2,
Có 1 loạt các hình ảnh kích thước lung
tung, nhìn siêu vẹo... nhìn ngứa mắt....
thì các bạn thường sửa kiểu:
<img src="http://link ảnh" width="x"
height="y" alt="??"/>
Nếu làm thế thì rất dài và lâu, mà không
có cái alt="" thì link ảnh die nó sẽ hiện
chữ "hình ảnh" rất khó chịu, có alt="?" thì
khi link die nó sẽ hiện nội dung trong 2
dấu "" nói chung vẫn không ổn. trong
trường hợp này ta có thể sử dụng css
tạo 1 class tên tuỳ ý
.abc img{
width: 16px;
height: 16px;
}
rồi bọc các hình ảnh bằng class abc thì
toàn bộ hình ảnh trong class này sẽ đc
chỉnh kích thước 16x16, Nếu link die thì nó
sẽ không hiện gì đỡ phản cảm
Đến đây thôi có gì có thể hỏi thêm hoặc
sẽ hd tiếp trong bài sau :cool:
╔══╗
╚╗╔╝
╔╝ (¯`v´¯)
╚══`.¸. VL48