1.ID
-Hay viết tắt của "index" dùng để xác định một đối tượng duy nhất trong văn bản HTML, mỗi đối tượng trong HTML chỉ được phép có một id, nếu không thì văn bản sẽ lỗi.
-Sử dụng ID cho những đối tượng có tính chất duy nhất trong trang web (menu chính,...).
-Cách dùng: thêm "#" đằng trước đối tượng mà ta đặt tên id.
2.Class
-Dùng để xác định một 'lớp' các đối tượng có thuộc tính giống nhau, có thể kế thừa nhau. Một trang web html có thể có rất nhiều các đối tượng chung thuộc tính, và chúng ta sẽ sử dụng class rất nhiều.
-Cách dùng: thêm ". "đằng trước đối tượng mà ta đặt tên class.
II.Selector( Bộ chọn).
-Là mẫu chọn dùng để chọn các thành phần muốn định dạng.
+tag : chọn các thành phần có cùng loại
VD: p{
color:red;
}
---> Tất cả các <p> đều in ra màu đỏ.
+tag1 tag2 : chọn tất cả các thành phần tag2 được chứa trong tag1.
VD: div p{
color: Yellow;
}
---> Tất cả các <p> bên trong <div></div> đều được in ra màu vàng.
+.class: chọn tất cả thành phần được đặt chung tên class
VD: .classBurn
+#id: chọn tất cả các thành phần chung tên ID
VD: #idWorld
+tag1 > tag 2: chọn tất cả thành phần tag2 là con của tag1.
+:link: định dạng cho liên kết chưa được click vào
+:visited: định dạng cho các thành phần đã được click.
+:hover: định dạng cho các thành phần, liên kết được di trỏ chuột tới.
+first-child: định dạng cho thành phần 'con' đầu tiên của một thành phần 'cha mẹ'.
VD ; p:first-child{
font-family: cursive;
}
----><p> đầu tiên sẽ được in ra font chữ 'cursive'.
+nth-child(n): định dạng cho thành phần 'con' thứ n(thay giá trị cần vào ngoặc)
VD: p:nth-child(2){
font-family: Tahoma;
}
p:nth-child(3){
color:#cc0000;
}
p:nth-child(4){
background-color:#00ff00;
}
p:nth-child(5){
font-size: 22px;
}
---> lần lượt các p số 2,3,4,5 sẽ được in ra theo mỗi code đã được cho sẵn.
III.Element Positioning.
-Nôm na là định dạng cho các thuộc tính điều khiền nội dung của văn bản HTML.
1.Display: xác định loại hiển thị của thành phần. Gồm một số giá trị sau:
+block: Thành phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó.
+inline: Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt dòng), đây là dạng mặc định.
+inline-block: Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến.
+none: Thành phần không hiển thị.
2.Margins, Borders, Padding.
+margin: thuộc tính canh lề cho thành phần, đơn vị bao gồm px, em, %,...
.)margin-top : canh lề trên.
.)margin-bottom: canh lề dưới.
.)margin-right: canh lề phải.
.)margin-canh lề trái.
+border: thuộc tính dùng để định dạng đường viền.
.)solid: đường viền là thẳng nét.
.)dashed: đường viền là gạch ngang.
.)dotted: đường viền là dấu chấm.
.)none: không hiển thị đường viền.
+padding: thêm vào khoảng không cho thành phần, đơn vị bao gồm px, em, %,...
.)padding-top: thêm khoảng bên trên.
.)padding-bottom: bên dưới.
.)padding-right: bên phải.
.)padding-left: bên trái.
3.Float, Clear.
+float: xác định có hay không một thành phận được trôi nổi.
.)float: left; Thành phần được trôi qua bên trái
.)float: right; Thành phần được trôi qua bên phải..)float: none; Thành phần không được trôi qua bên trái hay phải. Đây là giá trị mặc định
.)float: inherit: Xác định thừa hưởng thuộc tính từ thành phần bao ngoài.
+clear: xác định khoảng 2 bên của phần tử, và phần float không được cho phép ở đó.
.)clear: left; Bên trái của thành phần không được float
.)clear: right; Bên phải của thành phần không được float.)clear: both; Bên phải và trái của thành phần đều không được float
.)clear: none; Bên phải và trái của thành phần đều được float
.)clear: inherit; Xác định thừa hưởng thuộc tính của thành phần bao ngoài.
4.Position.
+position: là thuộc tính dùng định dạng loại phương pháp định vị cho thành phần, thường dùng kèm với top, bottom, left, right.
.)static: dạng mặc định, dạng này thì thành phần sẽ nằm theo thứ tự.
.)absolute: định vị thành phần tuyệt đối theo thành phần bao bên ngoài.
.)relative: định vị thành phần tuyệt đối.
.)fixed: định vị thành phần tương đối theo cửa sổ trình duyệt,
IV.Bài tập.
Không có nhận xét nào:
Đăng nhận xét