1. Định nghĩa CSS:
a. Định nghĩa trực tiếp
<head>
<style>
</style>
</head>
b. Định nghĩa gián tiếp
<link href="file.css" rel="stylesheet" type="text/css" />
c. Định nghĩa trên thẻ
<p style="color:red;"> Noi dung </p>
2. Sử dụng
a. Định nghĩa trên thẻ có sẵn
tên thẻ{
Đoạn CSS
}
Ví dụ
p{
color : red
}
b. Định nghĩa trên từng đối tượng
- Class
//Noi dung CSS
}
- ID
//Noi dung CSS
}
II. Một số thẻ và thuộc tính cơ bản
1. Div & span
Div là một khối dữ liệu vô hình, rơi tự do.
Span dùng để định vị cho từng đoạn text không định dạng khối
2. Font
- Font-family: Arial,Tahoma,... Dùng để định dạng kiểu chữ
- Font-size: px,pt,em,cm ; Kích thược chữ, đối với đơn vị em không nên xài nếu chưa hiểu,thường xài px
- Font-weight: 100-900, bold, bolden -> 100-900 sẽ bị lỗi banh chữ trong Firefox 4, nên xài bold
- Font-style: Italic : Chữ in nghiêng
- Color: #FEFEFE,blue ; Định dạng cho màu của chữ viết
- Text-align: left,right,center,justify ; Định dạng cho vị trí của chữ canh trái ,phải giữa...
- Text- decoration: none,underline(gạch dưới ),overline( gạch trên đầu),line-throuh (gạch ngang giữa).
- Letter - height: px,pt : Khoảng cách giữa 2 dòng.
- Text-transform: uppercase(viết hoa), lowercase(viết thường), capitalize: Viết hoa chữ đầu.
- a{// Khi đưa rê chuột vào liên kết}.
- a:active { //Khi click vào liên kết}.
- a: hover {//Khi đưa chuột vào liên kết}.
- a: visted {//Sau khi click }.
5. Border
- Border-style: solid (nét liên), dotted (......), dashed (----), double( nét gấp đôi).
- Border-width: px,pt.
- Border-color: #FFFFF hoặc white.
Có thể viết gọn lại border: 1px solid red;
Muốn viên bên trái màu đỏ border-left: 1px solid red;
6. Background
- Background-attachment : fixed(Đừng yên,nội dung lặp lại),
- Background-color: #FFFFF,white: màu nền
- Background-image:URL("file hình");
- Background-repeat : no repeat
: repeat -x
: repeat -y
- Background-position : top,botton, left,right,center
Viết gọn:
Background: red URL ('a.jpg') no-repeat fixed top center;
7. Danh sách
Sử dụng thẻ <ol> <ul> <li>
- List-style-type : none :không có gì
- List-style-image: URL ('a.jpg');
- List-style-position: --- inside : Định dạng theo toạ độ
8. Display: thường đi với danh sách
- Display : None : Ản cả nội dung mình cần
: Inline : Ngược lại block ---- tạo menu ngang
9. Padding: Là khoảng cách từ đường viền đến 1 đối tượng
Chú ý Padding trong ie sẽ khác với padding trong Firefox
10. Margin: Từ đối tượng đến 1 đối tượng
11. Float:
9. Padding: Là khoảng cách từ đường viền đến 1 đối tượng
Chú ý Padding trong ie sẽ khác với padding trong Firefox
10. Margin: Từ đối tượng đến 1 đối tượng
11. Float:
Không có nhận xét nào:
Đăng nhận xét