CSS Classes and IDs
I. Bộ lọc CSS
+. Gán nội dung cho một thẻ trong nhiều thẻ.
- Có bao nhiêu thẻ bên ngoài cái thẻ mà mình muốn gán thì viết bấy nhiêu thẻ.
- Ví dụ: <div>
<div>
<p>Luxubu</p>
+. Một mã lệnh gán nội dung cho tất cả.
- Dùng mã lệnh * để gán nội dung cho cả trang.
- Ví dụ: * {
border: 2px solid black;
}
+. Đu từ thẻ này qua thẻ khác.
- Khác với cách trên là thẻ ở đây có thể khác kiểu.
- Dùng ký hiệu ">" để hướng từ thẻ này đến thẻ khác.
- Ví dụ: ul > li > p { }
+. Classes.
- Classes rất hữu dụng trong CSS bởi vì nó có thể nhóm tất cả các thẻ chứa class lại để khi mình viết CSS thì nó sẽ thay đổi toàn bộ các thẻ mà mình đã thêm class.
- Mã lệnh của class là dấu chấm : "."
- Ví dụ: Ở Tab HTML: <div class="square"></div>
<img class="square"/>
<td class="square"></td>
Ở Tab CSS: .square {
<img class="square"/>
<td class="square"></td>
Ở Tab CSS: .square {
height: 100px;
width: 100px;
}
(Tất cả các thẻ div và img sẽ có chiều cao và chiều rộng là 100px)
+. IDs.
- IDs có thể nhóm nhiều thẻ cùng loại chứa id lại để khi mình viết CSS thì nó sẽ thay đổi toàn bộ các thẻ mà mình đã thêm id.
- Mã lệnh của id là dấu thăng: "#"
- Ví dụ: Ở Tab HTML: <div id="first"></div>
<div id="second"></div>
<p id="intro"></p>
Ở Tab CSS: #first {
height: 50px;
}
#second {
height: 100px;
}
#intro {
color: #FF0000;
}
+. Liên kết.
- Có ba CSS liên kết thường được sử dụng đó là:
+ a:link là liên kết chưa ai ghé đến.
+ a:visited là liên kết bình thường.
+ a:hover là liên kết lướt qua.
+. Gán giá trị cho một thẻ trong nhiều thẻ cùng loại bằng pseudo-class.
- Mã lệnh:
+ selector:first-child{} (cho thẻ đầu tiên)
+ selector:nth-child(số) {} (cho một trong các thẻ tiếp theo).
+. Chọn bạn mà chơi.
Sử dụng kiến thức đã học từ thẻ <div>, đường viền, hex color để làm phần này.
CSS ELEMENT POSITIONING
+. Vị trí.
Ở phần này, ta sẽ học cách căn chỉnh từng thành phần của trang web sao cho hợp lý và vừa ý người dùng.
+. Sắp xếp trong CSS.
- Có bốn cách sắp xếp trong CSS, đó là:
+ block: Sắp xếp tất cả các hộp theo một hàng dọc và không có hộp nào cạnh bên.
+ inline: Sắp xết tất cả các hộp vào một hàng nhưng đè lên nhau giống như một cái hố vuông.
+ inline-block: Sắp xếp tất cả các hộp thành hàng ngang, dọc tùy ý người dùng.
+ none: Tất cả các hộp biến mất.
+. Đường lề, viền và độ rộng các thành phần.
- Đường lề là khoảng cách giữa hai phần trong một trang web, như là khoảng cách giữa phần tiêu đề và phần bài viết vậy.
+ Mã lệnh: margin:(auto, center, right, left) để điều chỉnh vị trí; margin-(top, bottom, right, left): (số)px; để chỉnh khoảng cách lề.
+ Ví dụ: margin:auto; margin-top: 10px;
- Đường viền là phần viền, phần rìa mép của thành phần trong trang web.
+ Mã lệnh: border-(dashed, radius): (số)px; để chỉnh kiểu viền vuông tròn, border: (số)px solid (màu); để chỉnh độ dày viền và màu viền.
+ Ví dụ: border-radius: 5px; border: 2px solid black.
- Độ rộng của thành phần là chiều cao, chiều rộng của một thành phần trong trang web.
+ Mã lệnh: padding: (số)px;
+ Ví dụ: padding:40px;
+. Hai bên cánh web.
- Trước tiên là phải có thẻ <div> chứa thông số chiều cao, dài và rộng của thành phần.
- Mã lệnh: float:(right, left); để điều chỉnh trái phải.
+. Đưa về đúng vị trí.
- Dùng lệnh clear để đưa từng thành phần về vị trí của nó.
- Mã lệnh: element {
clear:(right, left hoặc both)
}
+. Absolute, relative và fixed positioning.
- Absolute là vị trí giữ nguyên.
+ Mã lệnh :position:absolute;
- Relative là vị trí bên ngoài bìa trang.
+ Mã lệnh: position:relative;
- Fixed là vị trí giữ nguyên kể cả khi mình lăn cuộn trỏ chuột.
+ Mã lệnh: position:fixed;
Comments
Post a Comment