! Lực lượng quan trọng thay đổi trong Cascade
Một trong những cách tốt nhất để tìm hiểu cách mã hóa trang web là xem mã nguồn của các trang web khác. Thực tế này là có bao nhiêu chuyên gia web đã học nghề của họ, đặc biệt là trong những ngày trước khi có rất nhiều lựa chọn cho các khóa học thiết kế web , sách và các trang đào tạo trực tuyến.
Nếu bạn thử thực hành này và xem xét các trang định kiểu xếp tầng của trang (CSS), một điều bạn có thể thấy trong mã đó là một dòng có nội dung quan trọng.
Điều đó có ý nghĩa gì và, cũng quan trọng, làm thế nào để bạn sử dụng đúng cách khai báo đó trong các bảng định kiểu của bạn?
Cascade của CSS
Trước hết, điều quan trọng là phải hiểu rằng các bảng định kiểu xếp tầng thực sự xếp tầng , nghĩa là chúng được đặt theo một thứ tự cụ thể. Nói chung, điều này có nghĩa là các kiểu được áp dụng theo thứ tự chúng được trình duyệt đọc. Kiểu đầu tiên được áp dụng và sau đó là thứ hai và vân vân.
Kết quả là, nếu một kiểu xuất hiện ở đầu trang mẫu và sau đó được thay đổi thấp hơn trong tài liệu, ví dụ thứ hai của kiểu đó là kiểu được áp dụng trong các phiên bản tiếp theo, không phải là kiểu đầu tiên. Về cơ bản, nếu hai kiểu đang nói cùng một thứ (có nghĩa là chúng có cùng mức độ cụ thể), thì kiểu cuối cùng được liệt kê sẽ được sử dụng.
Ví dụ, hãy tưởng tượng rằng các kiểu sau được chứa trong một bảng định kiểu. Văn bản đoạn văn sẽ được hiển thị bằng màu đen, mặc dù thuộc tính kiểu đầu tiên được áp dụng là màu đỏ.
Điều này là do giá trị "đen" được liệt kê thứ hai. Vì CSS được đọc từ trên xuống dưới, kiểu cuối cùng là "đen" và do đó, kiểu đó sẽ thắng.
p {color: đỏ; }
p {màu: đen; }
Thay đổi quan trọng ưu tiên
Bây giờ bạn đã hiểu cách các quy tắc gần như giống hệt này được xử lý bởi CSS, chúng ta có thể xem xét cách chỉ thị quan trọng thay đổi mọi thứ một chút.
Chỉ thị quan trọng ảnh hưởng đến cách thức mà CSS của bạn xếp vào trong khi tuân theo các quy tắc mà bạn cảm thấy là quan trọng nhất và nên được áp dụng. Một quy tắc có chỉ thị quan trọng luôn được áp dụng bất kể quy tắc đó xuất hiện trong tài liệu CSS.
Để làm cho văn bản đoạn văn luôn màu đỏ, từ ví dụ trên, bạn sẽ sử dụng:
p {color: red! quan trọng; }
p {màu: đen; }
Bây giờ tất cả văn bản sẽ xuất hiện bằng màu đỏ, mặc dù giá trị "đen" được liệt kê thứ hai. Chỉ thị quan trọng ghi đè các quy tắc bình thường của tầng và nó mang lại cho phong cách đặc trưng rất cao.
Nếu bạn hoàn toàn cần các đoạn văn để xuất hiện màu đỏ, phong cách này sẽ làm điều đó, nhưng điều đó không có nghĩa rằng đây là một thực hành tốt. Hãy xem xét tiếp theo khi nào bạn có thể muốn sử dụng! Quan trọng và khi nào không thích hợp.
Khi nào sử dụng!
Chỉ thị quan trọng là rất hữu ích khi bạn đang thử nghiệm và gỡ lỗi một trang web. Nếu bạn không chắc chắn tại sao một phong cách không được áp dụng và cho rằng đó có thể là vấn đề cụ thể, bạn có thể thêm tuyên bố quan trọng vào phong cách của mình để xem liệu kiểu đó có khắc phục được không.
Nếu bổ sung, điều quan trọng thực sự khắc phục được vấn đề về kiểu dáng, bạn vừa xác định rằng đó là vấn đề cụ thể. Tuy nhiên, bạn không muốn để lại điều đó! Mã quan trọng tại chỗ, nó chỉ được đặt ở đó cho mục đích thử nghiệm.
Kể từ khi thử nghiệm được thực hiện, bây giờ bạn nên loại bỏ chỉ thị đó và điều chỉnh bộ chọn của bạn để đạt được tính đặc hiệu mà bạn cần để làm cho phong cách của bạn hoạt động. quan trọng không nên thực hiện theo cách của nó vào các trang web sản xuất của bạn, một phần vì nó thay đổi như thế nào bình thường thác.
Nếu bạn nạc quá nhiều vào việc khai báo quan trọng để đạt được phong cách mong muốn của bạn, cuối cùng bạn sẽ có một tờ phong cách rải rác với các phong cách quan trọng. Bạn sẽ thay đổi về cơ bản cách CSS của trang được xử lý. Đó là một thực hành lười biếng không tốt từ quan điểm quản lý lâu dài.
Sử dụng! Quan trọng để thử nghiệm hoặc, trong một số trường hợp, khi bạn hoàn toàn phải ghi đè kiểu nội tuyến là một phần của khung công tác chủ đề hoặc khuôn mẫu.
Ngay cả trong những trường hợp đó, hãy sử dụng phương pháp này càng ít càng tốt và thay vào đó hãy cố gắng viết các tờ kiểu sạch sẽ hiểu được dòng thác.
Bảng kiểu người dùng
Có một lưu ý cuối cùng về chỉ thị quan trọng cần thiết để hiểu. Chỉ thị này cũng được đưa ra để giúp người dùng trang web đối phó với các tờ định kiểu khiến các trang khó sử dụng hoặc đọc.
Thông thường, nếu người dùng xác định một biểu định kiểu để xem các trang web, bảng định kiểu đó bị loại bỏ bởi biểu định kiểu của tác giả trang web. Nếu người dùng đánh dấu một phong cách là quan trọng, thì kiểu đó sẽ ghi đè biểu định kiểu của tác giả trang web, ngay cả khi tác giả đánh dấu một quy tắc là quan trọng.
Điều này hữu ích cho những người dùng cần đặt kiểu theo một cách nhất định. Ví dụ: ai đó có thể cần phải tăng kích thước phông chữ mặc định trên tất cả các trang web mà họ sử dụng. Bằng cách sử dụng chỉ thị quan trọng của bạn một cách tiết kiệm trong các trang bạn xây dựng, bạn đáp ứng mọi nhu cầu đặc biệt mà người dùng của bạn có thể có.
Biên tập bởi Jeremy Girard