2.1 Các Chọn Lọc Cơ Bản

Chọn lọc theo thẻ, lớp, hoặc ID là những phương pháp cơ bản nhất để áp dụng CSS.

2.1.1 Chọn Lọc Theo Thẻ

Áp dụng trực tiếp cho tất cả các thẻ HTML cùng tên.

div {
    background-color: #f0f0f0;
}

2.1.2 Chọn Lọc Theo Lớp

Sử dụng dấu chấm để áp dụng cho các phần tử có class cụ thể.

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

2.1.3 Chọn Lọc Theo ID

Áp dụng cho một phần tử duy nhất với ID cụ thể.

#main-header {
    padding: 20px;
    text-align: center;
}

2.2 Chọn Lọc Phức Tạp

2.2.1 Chọn Lọc Theo Cấp Con

Áp dụng cho các phần tử con trực tiếp.

section > article {
    margin-bottom: 15px;
}

2.2.2 Chọn Lọc Theo Anh Em Kề Nhau

Áp dụng cho phần tử ngay sau một phần tử cụ thể.

.active + p {
    color: #333;
    margin-top: 5px;
}

3. Tính Năng Mới Trong CSS3

3.1 Tính Năng Cụm Chữ (Pseudo-elements)

Cung cấp khả năng tạo ra các phần tử ảo mà không cần thêm HTML.

.feature-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s;
    display: none;
}

.feature-box:hover::before {
    display: block;
}

3.2 Tính Năng Chọn Lọc Theo Cấu Trúc

Chọn các phần tử dựa trên vị trí trong cây DOM.

ul li:nth-child(odd) {
    background-color: #f5f5f5;
}

ul li:nth-child(even) {
    background-color: #fff;
}

4. Mô Hình Hộp (Box Model)

Định nghĩa cách tính toán kích thước của các phần tử trên trang web.

4.1 Cấu Trúc Mô Hình Hộp

Mô hình hộp bao gồm: margin, border, padding, và nội dung.

.box {
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    margin: 10px;
}

4.2 Tính Năng border-radius

Tạo các cạnh tròn cho các phần tử.

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #3498db;
}

5. Định Vị (Positioning)

5.1 Định Vị Tương Đối (Relative)

Di chuyển phần tử dựa trên vị trí gốc của nó.

.relative-item {
    position: relative;
    top: 10px;
    left: 15px;
}

5.2 Định Vị Tuyệt Đối (Absolute)

Di chuyển phần tử dựa trên vị trí gần nhất có định vị.

.parent {
    position: relative;
    width: 500px;
    height: 300px;
}

.absolute-item {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
}

5.3 Định Vị Cố Định (Fixed)

Định vị phần tử dựa trên khung nhìn của trình duyệt.

.fixed-footer {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 50px;
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 50px;
}

6. Chuyển Động (Transitions)

Tạo hiệu ứng chuyển tiếp mượt mà cho các thuộc tính CSS.

.button {
    background: #3498db;
    color: white;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.button:hover {
    background: #2c80b9;
    transform: scale(1.05);
}

7. Biến Hình 2D (2D Transforms)

7.1 Di Chuyển (Translate)

Di chuyển phần tử theo trục X và Y.

.element {
    transform: translateX(20px) translateY(10px);
}

7.2 Xoay (Rotate)

Xoay phần tử theo một góc nhất định.

.rotate-element {
    transform: rotate(45deg);
}

7.3 Thu Phóng (Scale)

Thay đổi kích thước của phần tử.

.scale-element {
    transform: scale(1.2);
}

8. Responsive Design

8.1 Media Queries

Áp dụng các quy tắc CSS dựa trên kích thước màn hình.

@media screen and (max-width: 768px) {
    .container {
        width: 90%;
    }
    
    .sidebar {
        display: none;
    }
}

@media screen and (min-width: 769px) {
    .container {
        width: 80%;
    }
}

8.2 Flexbox Layout

Phương pháp bố cục linh hoạt cho các phần tử con.

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item {
    flex: 1;
    margin: 10px;
}

9. Công Cụ Hỗ Trợ

9.1 CSS Preprocessors

Các công cụ như Sass và Less giúp viết CSS hiệu quả hơn.

9.2 CSS Reset

Chuẩn hóa các thuộc tính CSS giữa các trình duyệt.

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}