Có an toàn khi sử dụng quan trọng trong CSS không?
Các. cờ quan trọng được dành cho khách truy cập trang web để dễ dàng ghi đè CSS thông qua “bảng định kiểu người dùng. ” Show
Ví dụ: bạn có thể tạo một trình chặn quảng cáo thô bằng cách thêm phần này vào biểu định kiểu người dùng của mình. 04Với tư cách là người dùng, bạn biết rằng mình không muốn xem quảng cáo đó và. cờ quan trọng đảm bảo rằng bạn sẽ không Nhưng các nhà phát triển web đã bắt đầu sử dụng. quan trọng theo những cách nó không bao giờ được dự định sử dụng Nếu gấu trúc có thể viết mãCác. cờ quan trọng, đó là một cách làm không tốt vì nó khiến mọi thứ trở nên khó ghi đè một cách không cần thiết trong tương lai và chỉ nên được bảo lưu như là phương sách cuối cùng Hầu như luôn có một cách tốt hơn để ghi đè các quy tắc CSS khi bạn cần Làm cho các quy tắc CSS cụ thể hơn một chútTrong hầu hết các trường hợp, sử dụng một. cờ quan trọng giống như bẻ đai ốc bằng búa tạ. Để ghi đè quy tắc CSS, tất cả những gì bạn cần là kiểu cụ thể hơn một chút Ví dụ: giả sử các phần tử 05 của bạn làm cho văn bản hơi lớn với CSS sau
Bạn có thể bị cám dỗ để trượt một. Quan trọng trước dấu chấm phẩy và gọi nó là một ngày, nhưng CSS tùy chỉnh sau sẽ có hiệu quả như nhau
Vì mọi trang web có lẽ đều có thẻ, nên đây là một cách khá phổ biến để làm cho CSS trở nên cụ thể hơn Tuy nhiên, có một vài trường hợp hiếm khi sử dụng được. quan trọng Ghi đè lên một cái khác (không được khuyên?). quan trọngTôi biết bạn đã không thêm cái này. quan trọng. Nhưng người khác đã làm. Có thể thông qua plugin hoặc tiện ích của bên thứ ba hoặc thứ gì đó Một số nhà phát triển plugin sẽ sử dụng nó để đảm bảo bất cứ điều gì họ đang cố gắng hiển thị trên giao diện người dùng, chẳng hạn như một biểu mẫu, không bị chủ đề che khuất Và tôi thậm chí không đánh gục các nhà phát triển plugin vì đã làm điều đó Xem xét có bao nhiêu chủ đề rác ngoài đó, việc nhà phát triển plugin đảm bảo sản phẩm của họ hiển thị như dự định là hoàn toàn hợp lý. Chủ đề thùng rác có thể tiếp tục trở nên rác rưởi, người dùng có một khoảnh khắc hạnh phúc thoáng qua và nhà phát triển plugin đã hạn chế một email hỗ trợ tức giận Nếu việc vô hiệu hóa plugin CSS là không khả thi và/hoặc bạn không muốn “vứt đứa bé ra ngoài bằng nước tắm”, bạn có thể sử dụng một. cờ quan trọng để ghi đè Ghi đè các kiểu nội tuyến do JavaScript tạo raTôi biết bạn đang tránh các kiểu nội tuyến nhiều nhất có thể, nhưng trong một số trường hợp, điều đó là không thể tránh khỏi Ví dụ: Masonry, sẽ tự động áp dụng định vị tuyệt đối và chuyển đổi kiểu cho các khối bị ảnh hưởng Nếu bạn muốn đặt lại vị trí hoặc ngăn chúng nhảy xung quanh bằng các biến hình, bạn cần sử dụng một. cờ quan trọng để ngăn chặn nó Bởi vì nó không cụ thể hơn các kiểu nội tuyến, bạn có thể sử dụng một. cờ quan trọng để ghi đè lớp học tiện íchChris Coyier có một số ý tưởng về những Hãy nhớ rằng, bài báo đã được xuất bản hơn năm năm trước, nhưng các trường hợp sử dụng vẫn còn đúng cho đến ngày nay Ví dụ: nếu văn bản màu xanh lá cây được rải khắp trang web là một thành phần thương hiệu quan trọng, thì có thể nên sử dụng những điều sau đây. 06Trang web có văn bản màu xanh lá cây sẽ biến mất nếu không có. lá cờ quan trọng? . Nhưng hãy nhớ rằng, đó là một thành phần thương hiệu quan trọng, vì vậy bạn có thể sử dụng. quan trọng để được an toàn hơn là xin lỗi Bài đăng cũng bao gồm việc sử dụng. quan trọng để đảm bảo các nút có phong cách nhất quán Đối với một dự án một lần, điều này sẽ hợp lý. Đối với một chủ đề WordPress được phát hành công khai, người dùng của nó không thể tùy chỉnh các kiểu nút nếu không sử dụng thêm. cờ quan trọng Khá sớm thôi, đó là một cuộc chạy đua vũ trang. Và đó là điều bạn muốn tránh khi phát hành chủ đề ra công chúng 6 trong CSS là một ký hiệu đặc biệt mà chúng ta có thể áp dụng cho một khai báo CSS để ghi đè các quy tắc xung đột khác cho bộ chọn phù hợp Khi chúng tôi làm việc trên các dự án web, điều tự nhiên là chúng tôi có một số khai báo kiểu mà các kiểu khác sẽ ghi đè Đây không phải là vấn đề đối với nhà phát triển có kinh nghiệm, người hiểu cơ chế cốt lõi của CSS. Tuy nhiên, người mới bắt đầu có thể khó hiểu tại sao các khai báo kiểu mà họ mong đợi không được trình duyệt áp dụng Vì vậy, thay vì họ tập trung vào giải quyết vấn đề một cách tự nhiên, họ có xu hướng khắc phục nhanh bằng cách thêm khai báo 6 để thực thi phong cách mà họ mong đợi. Mặc dù cách tiếp cận này có thể hiệu quả vào thời điểm đó, nhưng nó cũng có thể gây ra một vấn đề phức tạp khác Trong hướng dẫn này, chúng tôi sẽ xem xét những điều sau đây, bao gồm cách sử dụng 6 và khi nào chúng tôi nên sử dụng nó
Nói đủ rồi - hãy đi sâu vào Cơ chế lõi CSSViệc hiểu các nguyên tắc cốt lõi của CSS sẽ giúp chúng ta biết rõ ràng khi nào nên sử dụng khai báo 6. Trong phần này, chúng ta sẽ đi qua một số cơ chế này Hãy xem xét mã HTML và CSS bên dưới, bạn nghĩ văn bản tiêu đề sẽ có màu gì? Đầu tiên, HTML
Sau đó, CSS 0Văn bản sẽ hiển thị màu xanh lá cây. Đây là CSS cơ bản cơ bản. Với thuật toán xếp tầng CSS, thứ tự của các quy tắc CSS rất quan trọng. Trong trường hợp này, khai báo nào xuất hiện cuối cùng trong mã nguồn sẽ thắng Thông thường, điều này là hợp lý. Đầu tiên, chúng ta không nên lặp lại bộ chọn giống như chúng ta đã làm ở trên. CSS không muốn lặp lại nên sử dụng quy tắc khai báo cuối cùng Tuy nhiên, có những trường hợp chúng ta tạo các kiểu chung cho các phần tử gốc, chẳng hạn như .mytitle { color: blue; } h2 { color: green; }4, sau đó thêm các lớp để tạo kiểu cho các phần tử cụ thể. Hãy xem xét cả ví dụ sau, bắt đầu với HTML
Sau đó, hãy xem CSS .mytitle { color: blue; } h2 { color: green; } Trong đoạn mã trên, phần tử .mytitle { color: blue; } h2 { color: green; }4 đầu tiên không có lớp nào được áp dụng, vì vậy rõ ràng là nó có màu xanh lục của bộ chọn .mytitle { color: blue; } h2 { color: green; }4 Tuy nhiên, phần tử .mytitle { color: blue; } h2 { color: green; }4 thứ hai sử dụng quy tắc cho bộ chọn lớp, .mytitle { color: blue; } h2 { color: green; }8, ngay cả khi quy tắc bộ chọn phần tử xuất hiện cuối cùng trong mã CSS. Lý do cho điều đó là bộ chọn lớp có tính đặc hiệu cao hơn khi so sánh với bộ chọn phần tử Nói cách khác, trọng số được áp dụng cho khai báo trong bộ chọn lớp lớn hơn trọng số của bộ chọn phần tử Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơnTìm hiểu thêm →Tương tự, phần khai báo trong bộ chọn ID nhiều hơn phần khai báo trong bộ chọn lớp. Trong trường hợp này, màu đỏ trong mã bên dưới được ưu tiên 8Tiếp theo là CSS 9Hơn nữa, thuộc tính .mytitle { color: blue; } h2 { color: green; }9 nội tuyến được ưu tiên hơn bộ chọn ID, bắt đầu bằng HTML 1 Sau đó, tiếp theo là CSS 2 Đây là luồng ưu tiên lý tưởng trong CSS và phải được duy trì để tránh bất thường. Tuyên bố 6 hầu hết xảy ra khi chúng ta không biết các quy tắc cơ bản này Thuộc tính kiểu nội tuyến và mỗi bộ chọn có các giá trị mà trình duyệt gán cho chúng. Bằng cách đó, nó biết cái nào có mức độ ưu tiên cao hơn hoặc thấp hơn. Hãy coi giá trị này là một số có bốn chữ số đơn với thuộc tính .mytitle { color: blue; } h2 { color: green; }9 được gán giá trị trọng số mạnh nhất là 82Điều này theo sau ID có giá trị là 83, sau đó là lớp có 84 và cuối cùng là bộ chọn phần tử có giá trị là 85Đôi khi, chúng tôi có thể kết hợp các bộ chọn nhắm mục tiêu các phần tử cụ thể, như đã thấy trong ví dụ bên dưới 8Tiếp theo là CSS 0 Tính đặc hiệu của bộ chọn 86 trong CSS ở trên là sự bổ sung của .mytitle { color: blue; } h2 { color: green; }4 và .mytitle { color: blue; } h2 { color: green; }8. Đó là, 89. Tuy nhiên, tổng giá trị này nhỏ hơn giá trị của ID 90 là 83Các bài viết hay khác từ LogRocket
Vì vậy, trình duyệt sử dụng khai báo trong bộ chọn ID để ghi đè các quy tắc xung đột khác. Trong trường hợp trọng lượng bằng nhau, tuyên bố quy tắc cuối cùng sẽ thắng Bây giờ chúng ta đã biết quy tắc nào có liên quan nhất và lý do tại sao trình duyệt áp dụng chúng, việc sử dụng khai báo 6 này sẽ trở nên rõ ràng một cách tự nhiên Hiểu khai báo |