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

Soạn bài Cuốn sổ tay trang 118 - 119 SGK Tiếng Việt 3
Thuộc tính Font trong CSS
Tìm hiểu Link trong CSS, cú pháp và ví dụ
Cách mở nhiều cửa sổ VLC trên Windows 10
Cú pháp cơ bản của Java
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

  • Tìm hiểu Link trong CSS, cú pháp và ví dụ

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong

  • Học thuộc tính cursor trong CSS, có ví dụ

    Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính padding trong CSS. Bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính cursor trong

  • Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về các thuộc tính định dạng bảng trong CSS. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính border trong

  • Phân tích cảm hứng sử thi trong Rừng xà nu

    Rừng xà nu là truyện ngắn mang đậm cảm hứng sử thi của nhà văn Nguyễn Trung Thành. Để hiểu hơn về hiện thực đau khổ, tinh thần, ý chí chiến đấu mạnh mẽ của người dân Việt Nam trước áp bức, đô hộ, các em hãy cùng tham khảo bài văn mẫu Phân tích cảm hứng sử thi trong Rừng xà nu dưới đây của chúng tôi.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá