CSS CƠ BẢN (Foundation)

1. CSS là gì? Nhúng CSS kiểu gì?

1.1 Định nghĩa

CSS (Cascading Style Sheets) là thứ biến một trang HTML “như tờ giấy trắng” thành “trang web đẹp trai”.
Nó điều khiển:

• Màu sắc
• Font chữ
• Layout
• Hiệu ứng
• Animation

Nói chung là: HTML là bộ xương, CSS là outfit, còn JavaScript là skill đặc biệt.

1.2 Cách nhúng CSS

Ba kiểu cơ bản:

a) Inline CSS

<h1 style="color: red;">Hello</h1>

b) Internal CSS

<style>
  h1 { color: blue; }
</style>

c) External CSS

<link rel="stylesheet" href="style.css">

2. Selector trong CSS

CSS Selector là cú pháp dùng để xác định phần tử HTML mà quy tắc CSS sẽ được áp dụng. Việc nắm vững các loại selector giúp kiểm soát giao diện một cách chính xác và hiệu quả.

2.1. Type Selector (Selector theo tên thẻ)

Chọn các phần tử dựa trên tên thẻ HTML.

p {
  color: red;
}

Tác động lên tất cả thẻ <p>

2.2 Class Selector

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

.box {
  background-color: #eee;
}

Áp dụng cho mọi phần tử có class="box".

2.3. ID Selector

Sử dụng dấu thăng # để chọn phần tử có ID xác định.

#header {
  padding: 20px;
}

Một ID chỉ nên được dùng cho một phần tử trên mỗi trang.

2.4. Universal Selector

* {
  margin: 0;
  padding: 0;
}

Thường dùng để thiết lập lại (reset) CSS.

2.5. Group Selector

Gộp nhiều selector vào một quy tắc CSS.

h1, h2, h3 {
  font-weight: 600;
}

2.6. Descendant Selector (Selector theo cấp, khoảng trắng)

ul li {
  color: blue;
}

2.7. Child Selector (>)

Chọn các phần tử con trực tiếp.

div > p {
  color: green;
}

2.8. Adjacent Sibling Selector (+)

Chọn phần tử đứng ngay sau phần tử khác (cùng cấp).

h2 + p {
  margin-top: 0;
}

2.9. General Sibling Selector (~)

Chọn tất cả phần tử cùng cấp đứng sau phần tử được chỉ định.

h2 ~ p {
  color: purple;
}

2.10. Attribute Selector

Chọn phần tử dựa trên giá trị thuộc tính.

input[type="text"] {
  border: 1px solid #333;
}

Một số dạng mở rộng:

a[href^="https"] {}   /* bắt đầu bằng https */
a[href$=".pdf"] {}     /* kết thúc bằng .pdf */
a[href*="login"] {}    /* chứa từ login */

2.11. Pseudo-class Selector

Chọn phần tử dựa trên trạng thái.

Ví dụ phổ biến:

a[href^="https"] {}   /* bắt đầu bằng https */
a[href$=".pdf"] {}     /* kết thúc bằng .pdf */
a[href*="login"] {}    /* chứa từ login */

Một số pseudo-class quan trọng:

• :hover
• :focus
• :active
• :first-child
• :last-child
• :nth-child(n)
• :checked
• :disabled

2.12. Pseudo-element Selector

Chọn và định dạng một phần cụ thể của phần tử.

p::first-line {
  font-weight: bold;
}

Một số pseudo-element phổ biến:

• ::before
• ::after
• ::first-letter
• ::selection

2.13. Negation Selector (:not())

Loại trừ các phần tử không mong muốn.

button:not(.primary) {
  background-color: #ccc;
}

2.14. Kết hợp Selector

Có thể kết hợp nhiều selector để tạo điều kiện chọn phức tạp.

ul.menu > li.active a:hover {
  color: red;
}

3. Độ ưu tiên của Selector (Specificity)

Mức độ ưu tiên (từ cao đến thấp):

• ID Selector
• Class/Attribute/Pseudo-class
• Type Selector/Pseudo-element

=== Bài tập ===

Bài 1 – Định dạng danh sách menu

Mục tiêu: Sử dụng type selector, class selector, descendant selector.

Yêu cầu:

Tô màu chữ cho toàn bộ menu điều hướng.

Mục nào có class active phải được làm đậm.

Các mục con (ul bên trong) phải có màu khác mục cha.

HTML gợi ý:

<ul class="menu">
  <li class="active"><a href="#">Home</a></li>
  <li>
    <a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Mobile App</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>

Bài 2 – Form đăng ký

Mục tiêu: Thực hành attribute selector, pseudo-class.

Yêu cầu:

Input text phải có border màu xanh.

Input password phải có border màu đỏ.

Khi input được focus, thay đổi màu nền.

Nút submit bị disabled thì phải đổi màu chữ.

<form>
  <input type="text" placeholder="Tên">
  <input type="password" placeholder="Mật khẩu">
  <input type="email" placeholder="Email">
  <button disabled>Đăng ký</button>
</form>

Bài 3 – Định dạng bài viết

Mục tiêu: Thực hành pseudo-element, child selector, nth-child.

Yêu cầu:

Đoạn văn đầu tiên trong article phải có chữ cái đầu lớn (::first-letter).

Dòng đầu tiên của đoạn văn thứ 2 phải in đậm (::first-line).

Chỉ áp dụng style cho <p> là con trực tiếp của <article> (không phải con lồng sâu).

<article>
  <p>Đoạn 1 nội dung...</p>
  <p>Đoạn 2 nội dung...</p>
  <div>
    <p>Đoạn 3 nằm trong div...</p>
  </div>
</article>

Bài 4 – Bảng dữ liệu sản phẩm

Mục tiêu: Sử dụng nth-child, group selector, pseudo-class.

Yêu cầu:

Dòng tiêu đề (thẻ th) phải có nền tối và chữ sáng.

Các dòng chẵn của bảng có màu nền khác dòng lẻ.

Khi hover vào từng dòng (tr:hover), màu nền phải thay đổi.

Giá sản phẩm nằm ở cột thứ 3 phải được làm đậm.

<table>
  <tr>
    <th>Tên</th>
    <th>Danh mục</th>
    <th>Giá</th>
  </tr>
  <tr>
    <td>Sản phẩm A</td>
    <td>Loại 1</td>
    <td>120.000₫</td>
  </tr>
  <tr>
    <td>Sản phẩm B</td>
    <td>Loại 2</td>
    <td>200.000₫</td>
  </tr>
</table>

Bài 5 – Hộp thông báo (Notification Box)

Mục tiêu: Kết hợp nhiều loại selector, sử dụng :not() và pseudo-class.

Yêu cầu:

Tất cả .alert phải có padding và border.

.alert.success có nền xanh nhạt, .alert.error có nền đỏ nhạt.

.alert:not(.success):not(.error) có nền vàng.

Dòng ngay sau .alert.title (+) phải có màu chữ khác.

Icon được thêm bằng ::before (tuỳ loại alert).

<div class="alert title">Thông báo quan trọng</div>
<p>Nội dung chi tiết...</p>

<div class="alert success">Thành công</div>
<div class="alert error">Thất bại</div>
<div class="alert">Cảnh báo chung</div>