Cú pháp cơ bản của CSS

3.1 Quy tắc (Rules)

Các thành phần chính của CSS bao gồm quy tắc (rules), thuộc tính (properties) và giá trị (values). Hiểu được cú pháp cơ bản của CSS là chìa khóa để tạo ra các trang web hấp dẫn và có chức năng.

Các thành phần chính của CSS:

• Quy tắc (Rules)
• Bộ chọn (Selectors)
• Thuộc tính (Properties)
• Giá trị (Values)

Quy tắc (Rules)

Các quy tắc CSS bao gồm một bộ chọn và một khối khai báo. Bộ chọn chỉ định các phần tử HTML nào sẽ được áp dụng kiểu, và khối khai báo chứa một hoặc nhiều thuộc tính và giá trị của chúng. Thông thường, nó bao gồm một hoặc nhiều thuộc tính và giá trị được đặt trong dấu ngoặc nhọn {}.

Ví dụ:

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

Ví dụ cho tiêu đề:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

Trong ví dụ này, h1 là bộ chọn, color và font-size là các thuộc tính, còn blue và 24px là các giá trị của các thuộc tính đó.

3.2 Thuộc tính và giá trị

CSS cung cấp một bộ thuộc tính phong phú mà bạn có thể sử dụng để kiểm soát diện mạo của các phần tử. Mỗi thuộc tính có một hoặc nhiều giá trị xác định cách thuộc tính đó sẽ được áp dụng.

Các thuộc tính cơ bản và giá trị của chúng:

Màu sắc và nền:

• color: đặt màu văn bản
• background-color: đặt màu nền của phần tử

Ví dụ:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Font:

• font-family: xác định họ font
• font-size: đặt kích thước font
• font-weight: xác định độ dày của font

Ví dụ:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Văn bản:

• text-align: căn chỉnh văn bản bên trong phần tử
• text-decoration: thêm hiệu ứng cho văn bản, chẳng hạn như gạch chân

Ví dụ:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Khoảng cách và viền:

• margin: xác định khoảng cách bên ngoài xung quanh phần tử
• padding: xác định khoảng cách bên trong phần tử
• border: xác định viền của phần tử

Ví dụ:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Kích thước và vị trí:

• width và height: đặt chiều rộng và chiều cao của phần tử
• position: xác định cách tạo vị trí cho phần tử

Ví dụ:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Bạn cần làm:

• nhớ các thuộc tính tiêu chuẩn của phần tử
• nhớ các giá trị tiêu chuẩn của các thuộc tính đó
• nhớ các thuộc tính độc đáo của các phần tử khác nhau
• nhớ, cách mà các thuộc tính này hoạt động trong thực tế
• nhớ, cách mà các thuộc tính này ảnh hưởng lẫn nhau.

Tốt nhất là thực hành – viết nhiều CSS và xem nó hoạt động như thế nào.