Có bao nhiều loại CSS

Với Cascading Style Sheets – CSS giúp chúng ta có thể định kiểu cho bất kỳ phần tử HTML nào trên trang web. Một phần tử trên trang có thể sử dụng các bộ chọn khác nhau như bộ chọn class, bộ chọn id hoặc bộ chọn thẻ. Cũng có nhiều cách nhúng CSS:

• Inline [nhúng trực tiếp vào phần tử HTML bằng việc sử dụng thuộc tính style của phần tử
• Internal [tạo các bộ chọn trực tiếp trên trang bằng cách đặt trong thẻ
• External [tạo file css nằm riêng và nhúng vào trang sử dụng thẻ để nhúng vào trang

Vấn đề xảy ra khi một phần tử HTML chịu tác động của nhiều bộ chọn với nhiều giá trị giống nhau ví dụ như định kiểu màu sắc cho chữ, thì nó sẽ ưu tiên giá trị nào để thiết lập định kiểu cho thẻ.

Và với một website làm sao để có thể tối ưu việc thiết kế để có thể tái sử dụng lại CSS, làm cho giữa các trang web được đồng nhất về giao diện và rất nhiều khía cạnh khác như tối ưu tốc độ load trang, bảo hành, bảo trì được dễ dàng và hiệu quả.

Hôm nay Tìm ở đây sẽ tổng hợp cách sử dụng CSS căn bản, thứ tự ưu tiên trong CSS và tư vấn để những bạn thiết kế web có thể tối ưu trong việc thiết kế WebSite của mình.

Nội dung

I. NHẮC LẠI CSS:

Có 3 cách sử dụng CSS để định kiểu cho các thẻ trên trang HTML:

1. Inline

Định dạng CSS được đặt trực tiếp vào bên trong mỗi phần tử HTML thông qua thuộc tính style.

2. Internal

Định dạng CSS đặt trong thẻ  và nằm bên trong trang HTML. Các định dạng CSS này sẽ được đưa vào các đối tượng thông qua 3 dạng rule:

a. Rule dạng THẺ: Được định nghĩa bằng tên_thẻ {…}, sẽ tác động lên tất cả các thẻ trên trang đó. Như ví dụ bên dưới, tất các các thẻ

phần nội dung sẽ có màu chữ là đỏ

b. Rule dạng CLASS: Định nghĩa dạng .tên_lớp {…}, tác động lên các thẻ có thuộc tính class=”tên_lớp”

c. Rule dạng ID: định nghĩa bằng #tên_định_danh {…}  và tác động lên thẻ có thuộc tính id=”tên_định_danh” [Trong một trang .html thuộc tính id nên đặt là duy nhất]

3. External

Cũng có 3 dạng [thẻ, class, id] như Internal nhưng các rule không được đặt trong một trang .html [Chỉ dùng cho duy nhất trang .html này] mà được đặt trong file .css riêng và có thể gọi từ một hoặc nhiều trang .html

Tóm lại: có thể xem như có 4 dạng rule trong CSS: inline, thẻ, class, id.

• Thứ tự ưu tiên của CSS từ cao đến thấp như sau: inline -> id -> class -> thẻ.
• Phạm vi tác động giảm dần: inline tag]

  2. Dạng chồng chéo 2

  Chồng chéo do nhiều rule của cùng một loại nào đó.
  Nhận xét: Khi có sự chồng chéo của các rule cùng một loại thì các thuộc tính trong cùng rule sẽ lấy thuộc tính sau cùng, các thuộc tính khác nhau thì sẽ hợp lại.

  Ví dụ 2.1

  
  Trong khai báo trên thì cả 2 rule đều là dạng class và cùng tên p1. Hai rule này có thuộc tính color chồng nhau.
  Trình duyệt xử lý mã [html,css,javascript] theo thứ tự từ trái qua phải, từ trên xuống dưới nên trong trường hợp này rule nào nằm sau sẽ ưu tiên hơn rule nằm trước. Do đó, màu sẽ là blue

  Ví dụ 2.2

  Trong ví dụ trên thì đối tượng đều chịu tác động bởi 2 rule dạng class .p1 và .p2. Vì .p2 nằm sau .p1 nên màu sẽ theo rule .p2

  Ví dụ 2.3

  Một rule thiết lập ở dạng Internal [tức trong thẻ ] ví dụ .p2 {color:blue} và một rule thiết lập ở dạng External [file mystyle.css rồi nhúng vào trang html] ví dụ là .p1 { color: red }.