Cú pháp của CSS (CSS Syntax and Selectors)

Cú pháp của các thẻ CSS

dinh-dang-css

Một cấu trúc của thẻ CSS:

H1 {color:blue; font-size:12px;}

dinh-dang-css

Trong đó:

Thẻ chọn (H1) là thẻ HTML mà bạn muốn định dạng

Khai báo 1, khai báo 2 là những khai báo thẻ định dạng cho thẻ HTML H1

Mỗi một khai báo bao gồm 2 phẩn: thuộc tính:giá trị và mỗi khai báo cách nhau dấu “;” và khoảng trắng

Ví dụ: đây là ví dụ thẻ <p> sẽ căn chữ ở giữa và có màu đỏ:

p {

    color: red;

    text-align: center;

}

Các thẻ chọn CSS

Các thẻ chọn CSS được sử dụng định dạng tìm kiếm các thẻ HTML như: tên của thẻ, id, class (lớp), attribute (thuộc tính),…

Thẻ chọn sử dụng tên để CSS:

Các yếu tố thẻ chọn về căn bản chính là tên của các thẻ HTML

Bạn có thể chọn định dạng tất cả các thẻ <p> trên trang web của mình với định dạng chữ màu đỏ và được căn giữa như sau:

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

Thẻ chọn sử dụng ID để CSS:

Sử dụng ID để CSS một vài thẻ đặc biệt hoặc vị trị đặc biệt, ID sẽ là duy nhất trên trang do vậy CSS theo ID sẽ là duy nhất, sử dụng khi bạn chỉ muốn áp dụng CSS tại một vị trí nhất định trên trang chứ không phải toàn trang.

Để sử dụng CSS với ID thì bạn thêm dấu “#” ở trước và theo sau đó là ID của thẻ.

Ví dụ dưới đây sẽ CSS cho thẻ HTML với ID=”para1″:

01. Ở File HTML bạn khai báo ID cho thẻ HTML:

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

02. Ở File CSS bạn khai báo:

#para1 {
    text-align: center;
    color: red;
}

Như vậy thì <p> “Hello World!” sẽ được căn giữa và được tô màu đỏ.

chú ý: tên của ID trong HTML không được bắt đầu bằng số

Thẻ chọn sử dụng Class để CSS:

– Thẻ chọn Class được sử dụng trong trường hợp sử dụng CSS các thuộc tính đặc biệt.

Để sử dụng CSS Class bạn thêm dấu “.” vào trước và theo sau đó là tên của Class

Ví dụ dưới đây sẽ CSS tất cả các thẻ HTML có Class=”center” và được tô màu đỏ cộng với căn giữa:

01. Bạn khai báo vào File HTML:

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>

02. Bạn khai báo vào File CSS:

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

– Bạn cũng có thể chỉ chọn một vài thẻ HTML đặc biệt trong Class. Tức là trong Class=”center” phía trên có 2 thẻ <h1> và <p> thì mình chỉ muốn CSS cho thẻ <p> thôi.

Ví dụ dưới đây chỉ thẻ <p> với Class=”center” sẽ được căn giữa:

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

– Thẻ HTML cũng có thể được CSS bởi hơn 1 Class.

Ở ví dụ dưới đây thẻ <p> sẽ được CSS theo 2 Class=”center” và Class=”large”

01. Khai báo trong HTML:

<p class="center large">This paragraph refers to two classes.</p>

02. Khai báo trong file CSS:

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

p.large {
font-size: 300%;
}

Chú ý: không bắt đầu class với một số

Nhóm các thẻ CSS

Nếu bạn có nhiều thẻ HTML với cùng thuộc tính CSS như nhau như:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

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

Sẽ tốt hơn khi bạn nhóm thuộc tính các thẻ lại với nhau giúp giảm số lượng code. Để nhóm chúng lại với nhau bạn liệt kê tên các thẻ HTML và cách nhau bằng dấu “,”.

Ví dụ dưới đây sẽ giúp bạn nhóm toàn bộ CSS bên trên thành 1:

h1, h2, p {
    text-align: center;
    color: red;
}

Ghi chú trong File CSS

Các ghi chú trong File CSS giúp giải thích đoạn Code CSS mình viết, nó giúp đỡ bạn rất nhiều trong quá trình chỉnh sửa Code CSS sau này.

Các ghi chú này sẽ được trình duyệt bỏ qua

Một ghi chú sẽ bắt đầu bằng /* và kết thúc bằng */ và nó có thể được viết trên nhiều dòng

Ví dụ:

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

Ghi chú: bạn sử dụng CSS theo ID trong trường hợp ít thẻ cần CSS và các thẻ khác nhau về thuộc tính CSS. Còn trong trường hợp nhiều bạn muốn CSS theo các thuộc tính thì sử dụng CSS theo Class. Nếu CSS theo Class mà có nhiều thẻ HTML cùng 1 thuộc tính thì hãy sử dụng Nhóm thẻ lại.

Trên đây bạn đã học được các cú pháp cơ bản của thẻ CSS bạn hãy mở Notepad++ ra và làm theo hướng dẫn trên một cách thành thục.

Hẹn bạn tiếp tục kiến thức ở bài sau trong Seri tự học CSS. Nếu có bất cứ thắc mắc nào hãy để lại dưới Comment!