Các bộ chọn cơ bản

4.1 Bộ chọn theo loại

Selectors trong CSS được sử dụng để xác định các phần tử mà style sẽ được áp dụng. Các bộ chọn cơ bản bao gồm bộ chọn theo loại, lớp, ID và bộ chọn toàn cầu. Mỗi loại selector có các đặc điểm và ứng dụng riêng của nó.

Bộ chọn theo loại (Type Selectors)

Bộ chọn theo loại áp dụng style cho tất cả các phần tử thuộc một loại nhất định. Ví dụ, có thể áp dụng style cho tất cả đoạn văn (<p>), tiêu đề (<h1>, <h2> và v.v.) hoặc các thẻ HTML khác.

    
      tagname {
        thuộc tính: giá trị;
        thuộc tính: giá trị;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Bộ chọn này sẽ áp dụng style cho tất cả các phần tử <p> trong tài liệu.

Đặc điểm:

• Áp dụng cho tất cả các phần tử có loại được chỉ định
• Hữu ích cho style chung, cần áp dụng cho tất cả các phần tử của một loại nhất định

4.2 Bộ chọn theo lớp

Bộ chọn theo lớp cho phép áp dụng style cho một hoặc nhiều phần tử có một lớp nhất định. Các lớp được xác định bằng thuộc tính class trong HTML và được biểu thị bằng dấu chấm (.) trong CSS.

Cú pháp:

    
      .classname {
        thuộc tính: giá trị;
        thuộc tính: giá trị;
      }
    
  

Ví dụ:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Bộ chọn này sẽ áp dụng style cho tất cả các phần tử có lớp button.

Đặc điểm:

• Có thể sử dụng cùng một lớp cho nhiều phần tử
• Cho phép dễ dàng áp dụng style giống nhau cho các phần tử khác nhau

4.3 Bộ chọn theo ID

Bộ chọn theo ID áp dụng style cho phần tử có định danh duy nhất. Định danh được xác định bằng thuộc tính id trong HTML và biểu thị bằng ký hiệu dấu thăng (#) trong CSS.

Cú pháp:

    
      #uniq-id {
        thuộc tính: giá trị;
        thuộc tính: giá trị;
      }
    
  

Ví dụ:

Bộ chọn này sẽ áp dụng style cho phần tử có định danh main.

    
      /* Chọn phần tử có định danh #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Phần tử này sẽ có chiều rộng 800px.</div>
      <div>Phần tử này sẽ không được gán style.</div>
    
  

Đặc điểm:

• Định danh phải là duy nhất trên trang
• Sử dụng cho các phần tử độc nhất cần được style, như tiêu đề hoặc nội dung chính

4.4 Bộ chọn nhóm

Bộ chọn nhóm cho phép áp dụng cùng một quy tắc cho nhiều phần tử. Chúng giúp giảm số lượng mã và đơn giản hóa việc quản lý style.

Cú pháp:

    
      selector, selector, … {
        thuộc tính: giá trị;
        thuộc tính: giá trị;
      }
    
  

Ví dụ:

    
      /* Chọn tất cả các phần tử h1, h2 và h3 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Tiêu đề 1</h1>
      <h2>Tiêu đề 2</h2>
      <h3>Tiêu đề 3</h3>
      <p>Văn bản này sẽ không được áp dụng style bởi quy tắc này.</p>
    
  

4.5 Bộ chọn toàn cầu

Bộ chọn toàn cầu áp dụng style cho tất cả phần tử trên trang. Chúng được biểu thị bằng dấu sao (*) và có thể hữu ích cho việc reset style hoặc áp dụng style chung cho tất cả các phần tử.

Cú pháp:

    
      * {
        thuộc tính: giá trị;
        thuộc tính: giá trị;
      }
    
  

Ví dụ:

Bộ chọn này sẽ áp dụng style cho tất cả các phần tử trên trang, reset margin và thiết lập mô hình hộp.

    
      <div>Đoạn 1</div>
      <div>Đoạn 2</div>
    
  

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

Đặc điểm:

• Áp dụng cho tất cả các phần tử trên trang
• Hữu ích cho reset toàn bộ style hoặc áp dụng style cơ bản cho tất cả các phần tử