Tìm hiểu cú pháp và Selector trong CSS

Chỉ cần có một chút kiến thức và hiểu biết về CSS cũng hỗ trợ chúng ta rất nhiều trong công việc. Để bắt đầu, trong bài học CSS dưới đây bạn đọc cùng Taimienphi.vn tìm hiểu về cú pháp và Selector trong CSS nhé.

Trong bài viết dưới đây Taimienphi.vn sẽ giới thiệu cho bạn các cú pháp cơ bản và Selector trong CSS. Ngoài ra nếu mới làm quen với CSS, bạn đọc có thể tham khảo thêm một số bài học CSS đã có trên Taimienphi.vn để tìm hiểu thêm thông tin chi tiết nhé.

Tim hieu cu phap va Selector trong CSS

Tìm hiểu cú pháp và Selector trong CSS

1. Cú pháp CSS

CSS Style Rules bao gồm selector, thuộc tính (property) và giá trị (value) của nó. Trong đó selector trỏ đến phần phần tử HTML, nơi áp dụng CSS Style. Thuộc tính CSS được phân tách bằng dấu chấm phẩy.

tim hieu cu phap va selector trong css

Cú pháp CSS có dạng như dưới đây:

selector {

// thuoc tinh CSS

}

Ví dụ:

Dưới đây là ví dụ minh họa cú pháp CSS:

tim hieu cu phap va selector trong css 2

Kết quả đầu ra có dạng: Taimienphi.vn.

2. Selector trong CSS

CSS Selector được sử dụng để chọn các phần tử HTML (HTML element) dựa trên tên phần tử (element name), id, thuộc tính, ... . Selector có thể chọn đồng thời một hoặc nhiều phần tử khác nhau.

tim hieu cu phap va selector trong css 3

3. Element selector

Element selector trong CSS được sử dụng để chọn các phần tử HTML được yêu cầu tạo kiểu. Trong khai báo selector bao gồm tên của phần tử HTML và các thuộc tính CSS được áp dụng cho phần tử đó và được đặt trong dấu {}.

- Cú pháp Element selector:

Cú pháp Element selector có dạng như dưới đây:

ten phan tu {

// thuoc tinh CSS

}

- Ví dụ:

tim hieu cu phap va selector trong css 4

Kết quả đầu ra có dạng: Taimienphi.vn.

id selector

id selector được sử dụng để thiết lập kiểu cho id đã cho. Thuộc tính id là định danh duy nhất trong tài liệu HTML. id selector được sử dụng cùng ký tự #.

- Cú pháp id selector:

#id_name {

// thuoc tinh CSS

}

- Ví dụ:

tim hieu cu phap va selector trong css 5

Kết quả đầu ra có dạng: Taimienphi.vn.

4. Class selector

Class selector được sử dụng để chọn tất cả các phần tử trong thuộc tính lớp cụ thể. Để chọn các phần tử trong một lớp cụ thể, chúng ta sử dụng ký tự (.) cùng tên đầy đủ của một lớp (class name). Tên đầy đủ của lớp được sử dụng để thiết lập thuộc tính CSS cho lớp đã cho.

- Cú pháp Class selector:

.ten lop {

// thuoc tinh CSS

}

- Ví dụ:

Dưới đây là ví dụ về Class selector:

tim hieu cu phap va selector trong css 6

Kết quả đầu ra có dạng: Taimienphi.vn.

Bài viết trên đây bạn đọc đã cùng Taimienphi.vn tìm hiểu về cú pháp và Selector trong CSS. Ngoài ra nếu có bất kỳ thắc mắc hoặc câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận bên dưới bài viết.

https://thuthuat.taimienphi.vn/tim-hieu-cu-phap-va-selector-trong-css-48840n.aspx
Trong các bài học CSS tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn cách nhúng CSS vào HTML nhé.

Tác giả: Hoàng Bách     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Hướng dẫn lập sổ quỹ tiền mặt theo Thông tư 200
Top 4 trình quản lý cửa sổ ứng dụng tốt nhất cho Mac
Thuộc tính Font trong CSS
Tìm hiểu Link trong CSS, cú pháp và ví dụ
Soạn bài Cuốn sổ tay trang 118 - 119 SGK Tiếng Việt 3
Từ khoá liên quan:

Tìm hiểu cú pháp và Selector trong CSS

, CSS, học CSS,

SOFT LIÊN QUAN
  • Sổ tay lập trình

    Tự học code trên máy tính

    Sổ tay lập trình là một cuốn sách điện tử hay giúp những ai đam mê lập trình có thể tìm hiểu và học tập lập trình một cách tốt nhất để phục vụ cho công việc mơ ước trong tương lai của mình.

Tin Mới