Menu
GIỚI THIỆU
  • Bài này chúng ta học tìm hiểu selector là gì? Tìm hiểu CSS Selector căn bản, học css selector căn bản miễn phí tại, học khái niệm selector là gì?

Bài 03: Tìm hiểu selector là gì? CSS Selector là gì?

Đôi khi bạn muốn áp dụng một vài đặc tính nào đó cho cho một phần tử duy nhất hoặc nhiều phần tử trong một nhóm mà không ảnh hưởng các phần tử HTML còn lại trên trang. Trong bài học này bạn sẽ được biết cách sử dụng CSS cho các trường hợp như trên. Chúng ta sẽ mổ xẻ cách áp dụng các đặc tính CSS cho các nhóm phần tử được gọi là  class hay một phần tử cá biệt và duy nhất, định danh là id.

Làm thế nào để bạn có thể chỉ định một màu sắc cho một tiêu đề riêng biệt nào đó khác với các tiêu đề còn lại trên trang web của bạn. Làm thế nào để chia các liên kết theo từng nhóm và mỗi nhóm có các kiểu giá trị CSS  khác nhau? Chúng ta sẽ nhận được tất cả các câu trả lời bên dưới.

Nhóm các phần tử bằng class

Giả sử bạn có 2 nhóm sản phẩm bao gồm nhóm rượu vang trắng và nhóm rượu vang đỏ, HTML code sẽ như bên dưới:

<p>Tài Liệu Marketing</p>
<ul>
<li><a href="/seo/">SEO</a></li>
<li><a href="/marketing-online/">Marketing Online</a></li>
<li><a href="/chia-se/">Chia Sẻ</a></li>
</ul>
 
<p>Tài Liệu Lập Trình</p>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">PHP Cơ Bản</a></li>
<li><a href="#">HTML Cơ Bản</a></li>
</ul>	

Bây giờ chúng ta muốn các liên kết thuộc nhóm rượu vang trắng có màu vàng và nhóm liên kết của rượu vàng đỏ có màu đỏ, các liên kết còn lại trên trang vẫn giữ màu xanh mặc định.

Đê thực hiện điều này, chúng ta chia ra nhóm và gán mỗi nhóm vào mỗi class.

Chúng ta sẽ sử dụng ví dụ trên để thực hành:

<p>Tài Liệu Marketing</p>
<ul>
<li><a href="/seo/" class="whitewine">SEO</a></li>
<li><a href="/marketing-online/" class="whitewine">Marketing Online</a></li>
<li><a href="/chia-se/" class="whitewine">Chia Sẻ</a></li>
</ul>
 
<p>Tài Liệu Lập Trình</p>
<ul>
<li><a href="#" class="redwine">PHP</a></li>
<li><a href="#" class="redwine">PHP Cơ Bản</a></li>
<li><a href="#" class="redwine">HTML Cơ Bản</a></li>
</ul>	

Tiếp theo chúng ta xác định giá trị CSS cho 2 class whitewine và redwinen

a{
  color: blue;
}
a.whitewine {
  color: #FFBB00;
}
a.redwine {
  color: #800000;
}

Như ví dụ vừa xem, bạn đã có thể gán các đặc tính (giá trị CSS) cho từng nhóm các phần tử riêng biệt dựa vào .classname  [ class="class name" ]trong tập tin CSS.

Xác định phần tử bằng id

Ngoài cách xác định các nhóm, chúng ta cũng có thể gán thuộc tính vào một phần tử duy nhất bằng cách sử dụng thuộc tính id.

Có gì đặc biệt trong thuộc tính id ? đó là một sự cá biệt và duy nhất, không thể có một id cùng tên thứ hai trong cùng một tài liệu HTML. Nếu đó không phải là thuộc tính duy nhất, bạn đã có thể sử dụng thuộc tính class để thay thế. Nào, bây giờ chúng ta cùng xem một vài ví dụ cụ thể về id:

<h1>Chapter 1</h1>
	...
   <h2>Chapter 1.1</h2>
	...
   <h2>Chapter 1.2</h2>
	...
<h1>Chapter 2</h1>
	...
   <h2>Chapter 2.1</h2>
	...
   <h3>Chapter 2.1.2</h3>
	...

Vị dụ trên thường thấy ở các tài liệu được chia thành từng chương. Chúng ta có thể gán id cho từng chương như sau:

<h1 id="c1">Chapter 1</h1>
	...
<h2 id="c1-1">Chapter 1.1</h2>
	...
<h2 id="c1-2">Chapter 1.2</h2>
	...
<h1 id="c2">Chapter 2</h1>
	...
<h2 id="c2-1">Chapter 2.1</h2>
	...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
	...

Giả sử bạn muốn tiêu đề chương 1.2 có màu đỏ, điều này có thực hiện với đoạn CSS sau:

#c1-2 {color: red;}

Như ví dụ trên bạn có thể gán đặc tính vào một phần tử cá biệt bằng cách sử dụng #id trong tập tin CSS.

Chú ý! .class có tên chữ  INHOA và chữ in thường đều như nhau, #ID có phân biệt chữ IN HOA và chữ thường, ví dụ #wrap và #Wrap là 2 ID khác nhau.

Tóm lược bài học

Trong bài học này bạn đã được biết qua cách sử dụng selectors  cùng class và id, bạn cũng có thể xác định đặc tính nhóm các phần tử hoặc duy nhất một phần tử trong tài liệu HTML.

Còn các selector nâng cao nhưng mình nghĩ sẽ giới thiệu ở một bài khác vì nếu đưa vào đây luôn thì sẽ hơi rối cho những bạn mới học, khi nao chúng ta nhuần nhuyễn rồi thì học tiếp cũng chưa muộn. Nhưng chung quy lại nếu bạn thuộc các selector căn bản trên là có thể cắt HTMl được rồi đó. Hy vọng qua bài này bạn sẽ hiểu được selector là gì. Bài tiếp theo Tạo màu nền với CSS background làm đẹp nền website.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 03: Tìm hiểu selector là gì? CSS Selector là gì?

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha