CSS – Sử dụng class

CSS – Sử dụng class

Trong CSS, bộ chọn “class” giúp định dạng các phần tử có thuộc tính lớp cụ thể.

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

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. Để làm điều này, hãy bắt đầu với tên phần tử, sau đó viết ký tự dấu chấm (.), Theo sau là tên của lớp (xem ví dụ 1 bên dưới).

Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một lớp (xem ví dụ 2 bên dưới)

Cú pháp CSS

.class {
style properties;
}

Version: CSS1

Ngoài ra chúng ta có thể viết CSS sử dụng cú pháp chọn theo thuộc tính:

[class~=class_name] { style properties }

Ví dụ

Ví dụ 1

Định dạng lại cho tất cả các phần tử <p> với class="tieu_de":

p.tieu_de {
background-color: yellow;
}

Để sử dụng định CSS này trong trang HTML, ta viết như sau:

<p class="tieu_de">Hướng dẫn sử dụng CSS</p>

Định dạng cho các phần tử <div> với class="tieu_de":

CSS:
div.tieu_de {
	background-color: yellow;
}
HTML:
<div class="tieu_de">Đoạn văn bản này tham chiếu đến lớp tieu_de dành riêng cho thẻ div</div>

Khi định dạng như trên thì chỉ có phần tử <P> hoặc phần tử <DIV> ảnh hưởng. Nếu không có tagname phía trước dấu chấm (.) thì bất cứ phần tử nào tham chiếu đến lớp tieu_de cũng đều ảnh hưởng

CSS:
.tieu_de {
	background-color: yellow;
}
HTML:
<div class="tieu_de">Đoạn văn bản này chịu ảnh hưởng của lớp tieu_de</div>
<p class="tieu_de">Đoạn văn bản này cũng chịu ảnh hưởng của lớp tieu_de</p>
<p>Đoạn văn bản bình thường</p>

Ví dụ 2

Phần tử <p> này sẽ được tạo kiểu định dạng theo class="center"class="large":

<p class="center large">Đoạn văn bản này tham chiếu đến hai lớp.</p>

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,