CSS – Bộ chọn (Selectors) và cách sử dụng

CSS – Bộ chọn (Selectors) và cách sử dụng

Có các loại: các bộ chọn đơn (basic selectors), các bộ chọn phức hợp (combinators), các lớp giả (pseudo-classes)

Bộ chọn đơn – Simple selectors

Chọn theo loại:

Bộ chọn CSS khớp với các phần tử theo loại thẻ (tagname). Nói cách khác, nó chọn tất cả các phần tử của kiểu đã cho trong một tài liệu HTML.

Cú pháp

element { style properties }

Ví dụ:

CSS
/* Tất cả các phần tử <a>. */
a {
color: red;
}
/* Tất cả các phần tử <span>. */
span {
background-color: skyblue;
}
HTML
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span><br />
<a href="#">Đây là nội dung thẻ a</a>

Chọn theo lớp:

Bộ chọn CSS chọn các phần tử dựa vào thuộc tính class.

Cú pháp

.class_name { style properties }

Lưu ý rằng bạn cũng có thể viết theo cú pháp chọn thuộc tính

[class~=class_name] { style properties }

Ví dụ:

CSS
.lop_1 { background-color: skyblue; }
HTML
<div class="lop_1">Div này được gắn một lớp đặc biệt lên nó!</div>
<div>Thẻ div này là một div thông thường.</div>
<div class="foo lop_1 bar">Các phần tử có thể có nhiều lớp và trình chọn lớp vẫn hoạt động!</div>

Chọn theo ID:

Trong một tài liệu HTML, bộ chọn theo ID khớp với một phần tử dựa trên giá trị của thuộc tính ID của nó. Thuộc tính ID của phần tử đã chọn phải khớp chính xác với giá trị đã cho trong bộ chọn.

Cú pháp

#id_value { style properties }

Lưu ý rằng bạn cũng có thể viết theo cú pháp chọn thuộc tính

[id=id_value] { style properties }

Ví dụ:

CSS
#noi_dung { background-color: skyblue; }
#tieu_de {font-weight: bold; color: yellow}
HTML
<div id="tieu_de">Đây là thẻ div có id=tieu_de.</div>
<div id="noi_dung">Thẻ div này là thẻ div có id=noi_dung!</div>
<div>Thẻ div này là một div thông thường.</div>

Chọn theo thuộc tính:

Bộ chọn CSS theo thuộc tính khớp với các phần tử dựa trên sự hiện diện hoặc giá trị của một thuộc tính đã cho. Bộ chọn được viết với một tên loại phía trước nó

Cú pháp

element[attr] { style properties }
Đại diện cho một phần tử có một thuộc tính là attr.

element[attr=value] { style properties }
Đại diện cho một phần tử có thuộc tính attr với giá trị chính xác là value.

element[attr~=value] { style properties }
Đại diện cho một phần tử có thuộc tính attr có nhiều hơn một giá trị, các giá trị phân cách nhau bởi khoảng trắng, và trong các giá trị đó có một giá trị đúng bằng value.

element[attr^=value] { style properties }
Đại diện cho một phần tử có thuộc tính attr có giá trị được bắt đầu bằng value.

Tham khảo thêm các cách chọn qua bài viết: Bảng đối chiếu các CSS Selector

Ví dụ:

CSS
a {
color: blue;
}
/* Liên kết nội bộ, bắt đầu với "#" */
a[href^="#"] {
color: red;
}
/* Liên kết với thuộc tính target là "_blank" */
a[target$="_blank"] {
font-weight: bold
}
/* Liên kết với "example" xuất hiện bất cứ đâu trong URL */
a[href*="example"] {
background-color: silver
}
/* Liên kết kết thúc với ".org" */
a[href$=".org"] {
font-style:italic
}
HTML
<ul>
<li>Văn bản thường</li>
<li><a href="">Thẻ A thuộc tính href rỗng</a></li>
<li><a href="#internal">Liên kết nội bộ bắt đầu với dấu #</a></li>
<li><a href="#internal" target="_blank">Liên kết nội bộ với bắt đầu với dấu # và thuộc tính target _blank</a></li>
<li><a href="http://example.com">Liên kết với “example” xuất hiện bất cứ đâu trong URL</a></li>
<li><a href="http://www.example.org">Liên kết kết thúc với .ORG và “example” xuất hiện bất cứ đâu trong URL</a></li>
</ul>

Kết quả:

Tham khảo:

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin
trang web có chức năng quản trị dễ sử dụng nhất, chèn từ khóa vào trang web,