Bộ chọn CSS – bộ chọn trong css là gì

Bạn đang xem : bộ chọn trong css

CSS

Bộ chọn

Bộ chọn CSS chọn (các) phần tử HTML mà bạn
muốn tạo kiểu.

Bộ chọn CSS

Bộ chọn CSS được sử dụng để “tìm” (hoặc chọn) các phần tử HTML mà bạn
muốn tạo kiểu.

Chúng tôi có thể chia các bộ chọn CSS thành năm loại:

  • Bộ chọn đơn giản (chọn các phần tử dựa trên tên, id, lớp)
  • Bộ chọn bộ kết hợp (chọn
    các yếu tố dựa trên mối quan hệ cụ thể giữa chúng)
  • Bộ chọn lớp giả (chọn các phần tử dựa trên một trạng thái nhất định)
  • Bộ chọn phần tử giả (chọn
    và tạo kiểu cho một phần của phần tử)
  • Bộ chọn thuộc tính (chọn các phần tử dựa trên
    một thuộc tính hoặc giá trị thuộc tính)

Trang này sẽ giải thích các bộ chọn CSS cơ bản nhất.

Bộ chọn phần tử CSS

Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tử.

Ví dụ

Tại đây, tất cả & lt; p & gt; các phần tử trên trang sẽ là
căn giữa, với màu văn bản đỏ:

P
{
text-align: center;
màu: đỏ;
}

Hãy tự mình thử »

Bộ chọn id CSS

Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể.

Id của một phần tử là duy nhất trong một trang, do đó, bộ chọn id là
đã từng
chọn một phần tử duy nhất!

Để chọn một phần tử có một id cụ thể, hãy viết một ký tự băm (#), sau đó là
id của phần tử.

Ví dụ

Quy tắc CSS bên dưới sẽ được áp dụng cho phần tử HTML có id = “para1”:

#Đoạn 1
{
text-align: center;
màu: đỏ;
}

Hãy tự mình thử »

Lưu ý: Tên id không được bắt đầu bằng số!

Bộ chọn lớp CSS

Bộ chọn lớp chọn các phần tử HTML có thuộc tính lớp cụ thể.

Xem Thêm  Thủ tục được lưu trữ trong SQL: Lợi ích và cách tạo nó - cách sử dụng thủ tục được lưu trữ trong sql

Để chọn các phần tử với một lớp cụ thể, hãy viết một ký tự dấu chấm (.), theo sau là
tên lớp.

Ví dụ

Trong ví dụ này, tất cả các phần tử HTML có class = “center” sẽ có màu đỏ và được căn giữa:

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

Hãy tự mình thử »

Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp.

Ví dụ

Trong ví dụ này chỉ & lt; p & gt; các phần tử có class = “center” sẽ là
màu đỏ và căn giữa:

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

Hãy tự mình thử »

Các phần tử HTML
cũng có thể đề cập đến nhiều hơn một lớp.

Ví dụ

Trong ví dụ này, thẻ & lt; p & gt; phần tử sẽ được tạo kiểu theo class = “center”
và đến class = “large”:

& lt; p class = “center large” & gt; Đoạn này đề cập đến hai lớp. & lt; / p & gt;

Hãy tự mình thử »

Lưu ý: Tên lớp không được bắt đầu bằng một số!

Công cụ chọn phổ quát CSS

Công cụ chọn phổ quát (*) chọn tất cả HTML
trên trang.

Ví dụ

Quy tắc CSS bên dưới sẽ ảnh hưởng đến mọi phần tử HTML trên trang:

*
{
text-align: center;
màu: xanh lam;
}

Hãy tự mình thử »

Công cụ chọn nhóm CSS

Bộ chọn nhóm chọn tất cả các phần tử HTML có cùng kiểu
định nghĩa.

Xem mã CSS sau (các phần tử h1, h2 và p có cùng
định nghĩa phong cách):

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

h2
{

text-align: center;
color: red;
}

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

Sẽ tốt hơn nếu nhóm các bộ chọn để giảm thiểu mã.

Để nhóm các bộ chọn, hãy phân tách từng bộ chọn bằng dấu phẩy.

Ví dụ

Trong ví dụ này, chúng tôi đã nhóm các bộ chọn từ đoạn mã trên:

Xem Thêm  Mô-đun datetime trong Python - datetime trong python 3

h1, h2, p
{

text-align: center;
color: red;
}

Hãy tự mình thử »

Tự kiểm tra bằng các bài tập

Bài tập:

Đặt màu của tất cả & lt; p & gt; các yếu tố sang màu đỏ.

& lt; phong cách & gt;
 {
   màu đỏ;
}
& lt; / style & gt;

Bắt đầu bài tập

Tất cả các bộ chọn đơn giản CSS

Bộ chọn
Thí dụ
Mô tả ví dụ

#
#họ
Chọn phần tử có id = “firstname”

.
.intro
Chọn tất cả các phần tử có class = “intro”

element.class
p.intro
Chỉ chọn & lt; p & gt; phần tử có class = “intro”

*
*
Chọn tất cả các yếu tố

P
Chọn tất cả & lt; p & gt; các yếu tố

div, p
Chọn tất cả & lt; div & gt; phần tử và tất cả & lt; p & gt; các yếu tố


Xem thêm những thông tin liên quan đến chủ đề bộ chọn trong css là gì

jQuery: Thực hành sử dụng bộ chọn Selectors và css trong jQuery

  • Tác giả: Thành Đỗ
  • Ngày đăng: 2017-04-17
  • Đánh giá: 4 ⭐ ( 9394 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tham khảo: http://dothanhspyb.com/ban_tin/Lap-trinh/2-Thuc-hanh-su-dung-bo-chon-Selectors-va-css-trong-jQuery-5838.html
    Trong bài giảng này, chúng tôi sẽ hướng dẫn các bạn thực hành sử dụng một số bộ chọn (selectors) quan trọng trong jQuery. Đây là một nội dung quan trọng khi chúng ta sử dụng jQuery để thiết kế website.
    Kênh đào tạo Tin học trực tuyến theo chuẩn kiến thức, kĩ năng CNTT về Tin học văn phòng, đồ họa, âm thanh, video; lập trình từ A-Z về xây dựng website và phần mềm với các ngôn ngữ PHP, C,… Đăng tải các thông tin Giải trí, các hoạt động của tôi khi tham gia trong quá trình công tác. Mọi chi tiết xin liên hệ:
    Website Đào tạo Tin học: http://dothanhspyb.com
    Fanpage: https://www.facebook.com/daotaotinhoc2017
    Công nghệ Thông tin: http://dothanhspyb.com/cntt
    Blog: http://dothanhyb.violet.vn
    Facebook: https://www.facebook.com/thanh.dotrung
    Email: dothanhspyb@gmail.com
Xem Thêm  Cách đọc tệp văn bản bằng Python (Python mở) • datagy - mở một tệp văn bản bằng python

Bộ chọn Class trong CSS

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 3518 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong CSS, Class được sử dụng để định kiểu cho phần tử với class được chỉ định.

CSS là gì? Cách viết CSS trong ngôn ngữ HTML chi tiết

  • Tác giả: www.brandinfo.biz
  • Đánh giá: 3 ⭐ ( 2712 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS là gì? CSS là tên viết tắt của Cascading Style Sheets nó mô tả cách hiển thị của các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong các phương ti

Bộ chọn CSS (CSS Selector)

  • Tác giả: viettuts.vn
  • Đánh giá: 3 ⭐ ( 2559 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ chọn CSS (CSS Selector) được sử dụng để chọn nội dung bạn muốn tạo kiểu. Bộ chọn CSS chọn các phần tử HTML theo id, class, type, thuộc tính…

Vùng chọn trong CSS (CSS Selector)

  • Tác giả: lamvt.vn
  • Đánh giá: 5 ⭐ ( 1611 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: CSS Selector có vai trò rất quan trọng khi các bạn thiết kế website, tuy nhiên trong CSS có rất nhiều loại selector nên trong bài này mình chỉ nêu một số các selector chính và hay dùng nhất để các bạn tiện theo dõi nhất

CSS Selector (bộ chọn) là gì và cách sử dụng? | DAMMIO

  • Tác giả: sentayho.com.vn
  • Đánh giá: 3 ⭐ ( 5412 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bộ chọn trong CSS (CSS Selector)

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 3 ⭐ ( 6861 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bộ chọn trong CSS (CSS Selector) là gì ?, Bộ chọn phần tử trong CSS, Bộ chọn id trong CSS, Bộ chọn class trong CSS, Bộ chọn chung trong CSS, Bộ chọn theo nhóm trong CSS

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình