Lưu ý: Bài học này đang ở trạng thái chưa hoàn tất.

CSS Cú Pháp

Đình Anh

Mã CSS được đặt trong thẻ <style> hay trong một tập tin thường bao gồm một hoặc nhiều luật CSS (CSS rule).

Luật CSS

Một luật CSS bao gồm một bộ chọn CSS theo sau là một hoặc nhiều khai báo CSS dùng để quy định hiện thị của các phần tử HTML trên trang ứng với bộ chọn.

Luật CSS

Ở ví dụ dưới đây chúng ta có một luật CSS và hai khai báo CSS:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
}

Trong đó body là bộ chọn CSS và theo sau là hai khai báo CSS được đặt trong cặp dấu ngoặc {}. Hai khai báo CSS này sẽ được áp dụng cho bộ chọn sử dụng trước đó hay phần tử body.

Mỗi một khai báo được kết thúc bởi dấu ; và bao gồm hai thành phần:

  • Thuộc tính CSS: quy định thuộc tính nào sẽ được áp dụng cho bộ chọn. Các thuộc tính này có thể là họ phông font-family, kích thước chữ font-size, màu sắc color...
  • Giá trị tương ứng của thuộc tính.

Bộ Chọn CSS

Bộ chọn CSS dùng để chọn ra phần tử HTML trên trang sẽ được áp dụng khai báo CSS đi kèm bộ chọn đó.

Chúng ta có nhiều loại bộ chọn CSS khác nhau:

  • Bộ chọn phần tử
  • Bộ chọn ID
  • Bộ chọn class

Bộ Chọn Phần Tử

Bộ chọn phần tử dùng để chọn ra danh sách các phần tử có tên thẻ ứng với tên bộ chọn.

Ở ví dụ dưới đây chúng ta có 2 bộ chọn phần tử dùng để chọn ra lần lượt các phần tử bodyh1:

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
}
h1 {
    font-size: 18px;
}

Lưu ý: Với bộ chọn phần tử khai báo CSS tương ứng sẽ áp dụng cho toàn bộ phần tử HTML trên trang với thẻ trùng với bộ chọn.

Bộ Chọn ID

Bộ chọn ID dùng để chọn ra các phần tử có giá trị của thuộc tính ID trùng với giá trị cho trước.

#welcome {
    text-align: center;
    background: red;
    color: #fff;
}

Luật CSS trên sẽ áp dụng cho một phần tử CSS có giá trị của thuộc tính ID là welcome:

<h1 id="welcome">Chào Mừng Bạn Đến Với Khoá Học CSS!</h1>

Bộ Chọn Class

Bộ chọn Class dùng để chọn ra các phần tử có giá trị của thuộc tính class trùng với giá trị cho trước.

.center {
    text-align: center;
}

Luật CSS trên sẽ áp dụng cho các phần tử CSS có giá trị của thuộc tính Class là center:

<p class="center">Chữ trong đoạn văn bản này sẽ được hiển thị canh giữa.</p>

Kết Hợp Các Bộ Chọn

Bạn có thể kết hợp hai hay nhiều bộ chọn với nhau.

Ví dụ dưới đây kết hợp giữa bộ chọn phần tử và bộ chọn class:

p.center {
    text-align: center;
}

Luật CSS trên đây sẽ chỉ áp dụng cho phần tử p có giá thuộc tính class là center:

<p class="center">Chữ trong đoạn văn bản này sẽ được hiển thị canh giữa.</p>

Tuy nhiên nó sẽ không được áp dụng cho những phần tử khác (phần tử với tên thẻ khác <p>) nhưng có cùng giá trị thuộc tính class là center:

<div class="center">Chữ trong đoạn văn bản này sẽ được hiển thị canh giữa.</div>

Ví dụ dưới đây kết hợp giữa bộ chọn phần tử và hai bộ chọn class:

p.center.red {
    text-align: center;
    color: red;
}

Luật CSS trên đây sẽ chỉ áp dụng cho phần tử p có giá thuộc tính class là centerred:

<p class="center red">Chữ trong đoạn văn bản này sẽ được hiển thị canh giữa với màu đỏ.</p>

Bạn cũng có thể kết hợp bộ chọn phần tử cùng với bộ chọn ID:

h1#welcome {
    text-align: center;
    background: red;
    color: #fff;
}

Tuy nhiên điều này là không cần thiết vì giá trị ID của các phần tử trên trang là duy nhất và không được trùng nhau.

Ngoài ra với một khai báo bạn có thể áp dụng cho nhiều bộ chọn khác nhau:

h1, h1, h3 {
    text-align: center;
    background: red;
    color: #fff;
}

Chú Thích

Chú thích CSS được sử dụng để giải thích về ý nghĩa của một đoạn code CSS.

/* đây là một đoạn chú thích ví dụ */

/* đây là một đoạn chú thích ví dụ khác
được đặt trên hai dòng */

Khi phân tích mã code CSS trên trang trình duyệt sẽ bỏ qua các đoạn chú thích CSS.

Thêm Phản Hồi