CSS Cơ Bản và Các Mẫu Layout Hiệu Quả

Giới thiệu CSS

CSS (Cascading Style Sheets) ra đời nhằm tách biệt rõ ràng giữa cấu trúc nội dung (HTML) và giao diện trình bày. Nhờ đó, HTML chỉ tập trung vào semantic và nội dung, còn CSS đảm nhận hoàn toàn việc định dạng trực quan — giúp mã nguồn gọn gàng, dễ bảo trì và tái sử dụng.

Cú pháp cơ bản và cách nhúng CSS

CSS được viết theo mẫu:

tên_bộ_chọn { thuộc_tính: giá_trị; /* ... */ }

Ví dụ:

div {
    width: 100px;
    height: 100px;
    color: red;
}

Có 3 cách nhúng CSS vào trang web:

Ngoại liên kết (external) qua thẻ <link>: diversity và dễ quản lý.
Nội tuyến (embedded) trong thẻ <style> bên trong <head>.
Inline (nội dung trực tiếp) qua thuộc tính style của phần tử HTML.

Thiết lập văn bản

Thuộc tính	Mô tả
`color`	Màu chữ (ví dụ: `color: #f00`)
`font-size`	Kích cỡ chữ (ví dụ: `16px`)
`font-weight`	Độ đậm (normal, bold, 700)
`font-style`	In nghiêng (normal, italic)
`line-height`	Khoảng cách dòng
`text-align`	Căn lề (left, center, right)
`text-indent`	Thụt đầu dòng
`font`	Viết gọn (theo thứ tự: weight size/line-height family)
`text-decoration`	Trang trí văn bản (underline, none)

Mã màu trong CSS

Tên màu: red, slategray
RGB: rgb(255,0,0)
Hexadecimal: #ff0000 hoặc rút gọn #f00

Bộ chọn CSS

• Bộ chọn thẻ: Áp dụng cho toàn bộ phần tử cùng tên: div { color: #000; }
• Bộ chọn ID: Độc quyền cho 1 phần tử: #header { margin: 0; }
• Bộ chọn class: Linh hoạt & tái sử dụng cao: .highlight { background: yellow; }
• Bộ chọn tổ hợp: .box span { color: red; } — chọn <span> nằm trong .box
• Nhóm bộ chọn: .btn1, .btn2 { border: 1px solid #ccc; }
•pseudo-class & pseudo-element: :hover, ::before, ::after (lưu ý: dùng :: cho pseudo-element chuẩn)

Mô hình hộp (Box Model)

Mỗi phần tử HTML được xem là một "cái hộp" gồm:

Width / Height: kích thước vùng nội dung (padding và border không tính vào đây).
Border: viền — có thể viết riêng từng cạnh (border-top) hoặcigon border.
Padding: khoảng cách nội dung → viền.
Margin: khoảng cách giữa các hộp (margin giữa các box không gộp nếu dùng float/position).

Công thức kích thước thực tế của hộp:

Chiều rộng thực = width + padding-left + padding-right + border-left + border-right  
Chiều cao thực = height + padding-top + padding-bottom + border-top + border-bottom

Kỹ thuật xử lý margin

Canh giữa theo chiều ngang: margin: 0 auto;
Margin âm giúp vị trí kéo lùi (sử dụng trong layout grid).
Hiện tượng margin collapse xảy ra khi 2 margin dọc chạm nhau — giải pháp:
- Áp dụng border hoặc padding cho container cha
- Dùng overflow: hidden cho phần tử cha
- Sử dụng clearfix bằng pseudo-element:
```
.clearfix::before {
    content: "";
    display: table;
}
```

Xử lý nội dung tràn ra (overflow)

visible: hiển thị nguyên trạng (mặc định)
hidden: cắt bỏ phần vượt quá
scroll: xuất hiện thanh cuộn luôn
auto: chỉ hiện scrollbar khi thực sự cần

Các loại phần tử trong CSS

Kiểu	Đặc điểm	Ví dụ
Block	Cbản occupy cả dòng; hỗ trợ toàn bộ thuộc tính CSS	`<div>`, `<p>`, `<h1>`
Inline	Nằm trên cùng dòng; không nhận width/height/margin-top/bottom	`<span>`, `<a>`
Inline-block	Kết hợp: nằm dòng + nhận full style	`display: inline-block;`, `<img>`, `<input>`

Chuyển đổi kiểu phần tử qua display:

display: none: ẩn khỏi layout (loại bỏ không gian)
display: block
display: inline
display: inline-block

Thuộc tính float

Các tính chất nổi bật của float:

Gây giải phóng phần tử khỏi dòng bình thường
Cho phép các khối xếp ngang
Giúp inline/inline-block bị ức chế giãn cách do xuống dòng (khi font-size ≠ 0)
Tạo hiệu ứng chữ quanh ảnh (text wrap)

Một số mẹo xử lý:

Tự động chuyển nội dung trong float thành inline-block
Khi cha không có chiều cao rõ, cần clear浮动 để đảm bảo layout ổn định.

Tham khảo .clearfix:

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

Thuộc tính position

Chi phối cách phần tử nằm trong "luồng (flow)":

static: vị trí mặc định — không can thiệp
relative: định vị tương đối so với vị trí ban đầu, giữ chỗ trong flow
absolute: định vị tuyệt đối — tách khỏi flow, phụ thuộc vào cha gần nhất có position ≠ static
fixed: cố định trên viewport trình duyệt

Điều chỉnh vị trí dùng các thuộc tínhOffset: left, right, top, bottom.

Ví dụ:

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Mô phỏng z-index cho tầng chồng:

.z-high {
    position: absolute;
    z-index: 100;
}

Thuộc tính background

Make background gọn hơn bằng khai báo tổng hợp:

background: url('bg.jpg') center/cover no-repeat fixed #eee;

Giải thích các thành phần:

color: màu nền
url('img.jpg'): ảnh nền
repeat: repeat-x, repeat-y, no-repeat
position: left top, center, hoặc giá trị pixel ( âm/dương)
attachment: scroll, fixed

Hiệu ứng sprite (雪碧图) dùng background-position điều chỉnh tọa độ:

.icon-edit::before {
    background: url('sprite.png') -24px -48px no-repeat;
    width: 24px;
    height: 24px;
}

Ứng dụng layouts đặc trưng

Navigation.Bar: khối menu ngang kết hợp float, flex, hoặc grid
Image.Grid: khung hiển thị ảnh dạng tile
News.List: phần tử列表 dọc Xen kẽ margin và padding
Pagination: điều khiển страницы liên kết dạng inline-block/các nút số

Ví dụ pagination đơn giản:

<nav class="pagination">
  <a href="#" aria-label="Previous">&laquo;</a>
  <a href="#">1</a>
  <a href="#" class="active">2</a>
  <a href="#">3</a>
  <a href="#" aria-label="Next">&raquo;</a>
</nav>

Thẻ: box-model css-position css-float css-selector overflow-handler

Đăng vào ngày 4 tháng 6 lúc 16:09

Thành phố Cuồng loạn