Mức độ ưu tiên khi áp dụng nhiều CSS

Chia sẻ kiến thức 01/01/2022

Bạn đã bao giờ viết code CSS cho trang web cho dự án của công ty nhưng sau khi chạy xong, CSS không nhận được chưa? Lúc này bạn mới nhận ra nguyên nhân là ai đó đã viết code CSS bằng cách sử dụng #id, inline style hoặc !important trước đó. Đó cũng chính là lý do tại sao mức độ ưu tiên trong CSS là rất quan trọng. Hãy cùng FUNiX tìm hiểu chi tiết về mức độ ưu tiên khi áp dụng nhiều CSS trong bài viết dưới đây nhé!

>> Học HTML và CSS ở đâu mang lại hiệu quả tốt?

1. Tìm hiểu chung về CSS

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

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

Khi một phần tử HTML bị ảnh hưởng bởi nhiều bộ chọn có cùng giá trị, sẽ có vấn đề xảy ra, chẳng hạn như kiểu màu của văn bản, nó sẽ ưu tiên giá trị nào để thiết lập định kiểu cho thẻ.

Đối với một website, lập trình viên cần tìm cách thiết kế tối ưu để có thể sử dụng lại CSS, giúp giao diện giữa các website được thống nhất, tối ưu tốc độ tải trang, bảo trì, vận hành, bảo trì và nhiều khía cạnh khác dễ dàng và hiệu quả. 

Trong phần tiếp theo của bài viết, FUNiX sẽ tổng hợp cách sử dụng CSS cơ bản, mức độ ưu tiên khi áp dụng nhiều CSS và những gợi ý để các nhà lập trình web có thể tối ưu hóa thiết kế website của mình.

mức độ ưu tiên khi áp dụng nhiều CSS
Mức độ ưu tiên khi áp dụng nhiều CSS

2. 3 cách sử dụng CSS để định kiểu cho thẻ

2.1. Inline

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

Mức độ ưu tiên khi áp dụng nhiều CSS

2.2. Internal

Định dạng CSS được đặt bên trong thẻ <style> </style> và bên trong trang HTML. Các định dạng CSS này sẽ được đưa vào đối tượng thông qua ba loại quy tắc:

Rule dạng thẻ: Câu lệnh có cú pháp tên_thẻ {…}, sẽ ảnh hưởng đến tất cả các thẻ trên trang này. Như được hiển thị trong ví dụ bên dưới, tất cả các thẻ nội dung <p> sẽ có màu văn bản màu đỏ.

Mức độ ưu tiên khi áp dụng nhiều CSS

 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”

Mức độ ưu tiên khi áp dụng nhiều CSS

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”.

Mức độ ưu tiên khi áp dụng nhiều CSS

2.3. External

Giống như Internal, External cũng có 3 loại (thẻ, class, id), nhưng các quy tắc không được đặt trong trang .html mà trong một tệp .css riêng biệt và có thể được chọn từ một trang.html trở lên.

Mức độ ưu tiên khi áp dụng nhiều CSS

Tóm lại: có bốn loại rule trong CSS: inline, thẻ, class, id.

  • Mức độ ưu tiên khi áp dụng nhiều CSS từ cao xuống thấp là: thẻ -> inline -> id -> class.
  • Mức độ phù hợp theo thứ tự giảm dần: thẻ <- id <- class <- inline, nghĩa là, đối với loại bộ chọn CSS, bộ chọn thẻ có ảnh hưởng rộng rãi nhất trên toàn bộ trang có thẻ, tiếp theo là id, class và inline.

3. Mức độ ưu tiên khi áp dụng nhiều CSS và ví dụ cụ thể

Khi các đối tượng chịu tác động của nhiều rule khác nhau thì xảy ra hiện tượng chồng chéo.

Khi chồng chéo xảy ra, thứ tự ưu tiên sẽ xác định định dạng của đối tượng.

3.1. Dạng chồng chéo giữa các rule khác nhau

Thứ tự ưu tiên của bốn dạng rule như bảng dưới đây:

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

Theo bảng tổng hợp trên, có thể rút ra quy luật chung là: mức độ ưu tiên tỷ lệ nghịch với phạm vi ảnh hưởng. Phạm vi của rule càng lớn thì mức độ ưu tiên càng thấp và ngược lại.

Ví dụ: Đoạn code “Chào mừng bạn đến với khóa học CSS!” dưới đây bị ảnh hưởng bởi 4 rule thuộc 4 loại khác nhau (inline, thẻ p, class .p1, id #p2). 4 quy tắc này chỉ định 4 màu chữ khác nhau:

Mức độ ưu tiên khi áp dụng nhiều CSS

Kết quả: Theo thứ tự ưu tiên, màu của “Chào mừng bạn đến với Khóa học CSS” sẽ tuân theo màu ưu tiên (đen) của rule inline.

3.2. Dạng chồng chéo giữa nhiều rule cùng loại

Khi các rule cùng loại chồng chéo nhau, các thuộc tính trong cùng một quy tắc sẽ là thuộc tính cuối cùng và các thuộc tính khác nhau sẽ được hợp nhất. Bạn có thể tham khảo ví dụ sau để hiểu rõ hơn.

Mức độ ưu tiên khi áp dụng nhiều CSS

Trong phần khai báo ở đoạn code trên, cả hai rule đều là dạng class và cùng tên p1. Hai rule này có thuộc tính màu sắc chồng lên nhau.

Trình duyệt xử lý mã (html, css, javascript) theo thứ tự từ trái sang phải và trên xuống dưới, vì vậy trong trường hợp này, các rule sau được ưu tiên hơn các rule được viết trước. Vì vậy, màu sắc của dòng chữ “Chào mừng bạn đến với Khóa học CSS” sẽ là màu xanh lam.

4. Tối ưu hóa CSS trong thiết kế web

Thông qua những phân tích trên, có những cách sau để tối ưu hóa CSS trong quá trình thiết kế website:

  • Định kiểu đồng nhất cho tất cả các trang.
  • Tối ưu hóa việc load trang, cache.
  • Tối ưu  hóa việc bảo trì, tái sử dụng lại CSS,…
  • Nên sử dụng CSS dạng External để dễ dàng kiểm soát việc chồng chéo rule hơn.
  • Giảm thiểu các CSS dạng Inline.
  • Đặt CSS phù hợp theo phạm vi của thẻ, id, class, inline.
  • Khi xuất bản một trang web trực tuyến, bạn cần sử dụng các công cụ nén CSS để tối ưu hóa việc load trang.

Mong rằng qua ví dụ và các giải thích chi tiết trong bài viết trên, bạn đọc sẽ hiểu rõ hơn về mức độ ưu tiên khi áp dụng nhiều CSS. Điều này rất quan trọng, vì vậy bạn nên chú ý nó trong quá trình học lập trình web và vận dụng vào thực hành thực tế. FUNiX hy vọng bài viết hữu ích với các bạn và chúc các bạn học tốt!

Phạm Thị Thanh Ngọc

Bình luận (
0
)

Bài liên quan

Đầu tư vào NFT: Rủi ro tiềm ẩn cần xem xét?

Mặc dù tiềm năng kinh doanh của các NFT là không thể phủ nhận, nhưng các doanh nghiệp phải cẩn thận với các khoản đầu tư cho nó. Các thương hiệu đầu tư NFT phải tiến hành nghiên cứu sâu...

3 cách học giúp sinh viên vượt ải học online, nắm chắc cơ hội việc làm

Với mục tiêu nắm chắc cơ hội việc làm ngay sau khi tốt nghiệp đại học, nhiều sinh viên lựa chọn học online để chuẩn bị cho chính mình.

6 cách khai thác NFT hiệu quả cho mục đích thương mại và kinh doanh

Mặc dù là một công nghệ mới nổi, NFT (non-fungible token) đã trở thành một chủ đề nóng và thu hút sự quan tâm của tất cả những ai muốn tìm kiếm cơ hội và lợi nhuận từ nó. Trong phần...

Lợi ích của việc khai thác NFT cho doanh nghiệp

Khai thác NFT trong kinh doanh đã trở thành một chủ đề nóng và thu hút sự quan tâm của tất cả những ai muốn tìm kiếm cơ hội và lợi nhuận từ nó. Chuỗi bài viết này giải thích...

4 lý do phổ biến chọn học công nghệ thông tin ở FUNiX

Có những lý do phổ biến khiến một xTer chọn học công nghệ thông tin ở FUNiX. Hãy cùng xem, những lý do phổ biến nhất là gì, và với mỗi lý do thì thách thức và thuận lợi khi...

Bài liên quan

  • Tầng 0, tòa nhà FPT, 17 Duy Tân, Q. Cầu Giấy, Hà Nội
  • info@funix.edu.vn
  • 0782313602 (Zalo, Viber)        

yêu cầu gọi lại