Thứ tự ưu tiên và tối ưu 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ẻ <style></style>
- External (tạo file css nằm riêng và nhúng vào trang sử dụng thẻ <link> để 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.
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ẻ <style></style> 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ẻ <p> 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 <- id <- class <- thẻ, tức là với các loại bộ chọn CSS, bộ chọn thẻ có phạm vi tác động rộng nhất là trên toàn bộ trang mà có thẻ đó, sau đó mới đến thẻ có thuộc tính class, v.v.
II. CHỒNG CHÉO CSS VÀ THỨ TỰ ƯU TIÊN.
– Sự chồng chéo xảy ra khi một đối tượng chịu tác động bởi nhiều rule khác nhau.
– Khi sự chồng chéo xảy ra thì thứ tự ưu tiên sẽ quyết định định dạng của đối tượng.
1. Dạng chồng chéo 1
Chồng chéo giữa các rule khác loại.
Thứ tự ưu tiên của 4 dạng rule như sau:
| Các dạng rule | Thứ tự ưu tiên | Phạm vi tác động |
| inline | 1 | 4 |
| id | 2 | 3 |
| class | 3 | 2 |
| tag | 4 | 1 |
Nhận xét: Thứ tự ưu tiên tỉ lệ nghịch với phạm vi tác động. Dạng rule có phạm vi tác động càng cao thì ưu tiên càng thấp, ngược lại dạng rule có phạm vi tác động càng thấp thì ưu tiên càng cao.
Ví dụ 1.1
Đoạn văn “Chào mừng bạn đến với khoá học CSS!” chịu tác động bởi 4 rule thuộc 4 dạng khác nhau (inline, thẻ p, class .p1, id #p2). 4 rule này quy định 4 màu chữ (color) khác nhau.
Kết quả: Theo bảng thứ tự ưu tiên thì màu của chữ “Chào mừng bạn đến với khoá học CSS” sẽ theo màu ưu tiên của rule inline (màu black)
Ví dụ 1.2
Bây giờ nếu ta bỏ đi style=”color:black” (rule dạng inline) thì theo bạn kết quả sẽ như thế nào?
Chạy trực tiếp ví dụ 1.1 bằng cách xoá dòng style=”color:black” rồi kích nút Run để xem kết quả.
Kết quả dòng chữ “Chào mừng bạn đến với khoá học CSS!” sẽ có màu theo quy định của rule dạng id #p2 (màu blue)
Ví dụ 1.3
Nếu ta tiếp tục bỏ đi thuộc tính id (rule dạng id)
Kết quả chữ “Chào mừng bạn đến với khoá học CSS!” sẽ có màu theo quy định của rule dạng class .p1 (màu green)
Ví dụ 1.4
Ta có thể sử dụng !important để tăng mức độ ưu tiên.
- Với việc thêm !important vào sau giá trị màu red thì rule dạng tag, lúc này css của thẻ này có mức độ ưu tiên cao nhất.
Ví dụ 1.5
Nhưng nếu các dạng rule đều có !important thì thứ tự ưu tiên lại theo bảng ưu tiên ở trên (inline > id > class > 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ẻ <style></style>) 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 }.
Code html:
<p class="p1 p2">Chào mừng các bạn đến với khoá học CSS!</p>
Bạn hãy đưa ra đánh giá kết quả?
III. TỐI ƯU CSS TRONG THIẾT KẾ WEB
Qua các ví dụ phân tích ở trên, để tạo một website chuyên nghiệp như:
- Định kiểu đồng nhất trên tất cả các trang
- Tối ưu cho việc load trang, cache cho trang web
- Tối ưu cho việc bảo trì, tái sử dụng lại CSS, v.v.
Tìm ở đây đưa ra một số khuyến nghị:
- Nên sử dụng CSS dạng External
- Hạn chế tối đa việc định kiểu CSS dạng Inline
- Dựa theo phạm vi hoạt động của CSS dạng thẻ, id, class, inline để thiết lập các CSS cho phù hợp
- Khi public website lên Internet, cần sử dụng các công cụ nén CSS để tối ưu việc load trang
