Ghi đè css với kiểu nội tuyến

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách ghi đè kiểu nội tuyến bằng tệp CSS bên ngoài

Các kiểu nội tuyến css có ưu tiên hàng đầu trong việc áp dụng các kiểu cho các thành phần html để chúng tôi không thể ghi đè các kiểu nội tuyến bằng các quy tắc css thông thường

<div class="container" style="color:green;">
   <h1>This is green colorh1>
div>

.container{
    color: black;  /* this rule will never apply */
}

Trong ví dụ trên, chúng ta đã thêm thuộc tính style và lớp container vào phần tử div nhưng vẫn sẽ thấy màu green

Để ghi đè các kiểu nội tuyến, chúng tôi cần sử dụng quy tắc !important trong tệp css bên ngoài của mình

Thí dụ

<div class="container" style="color:green">
   <h1>This is black colorh1>
div>

.container{
    color: black !important; /* this rule will override inline-style */
}

Ghi chú. Quy tắc !important không chỉ ghi đè các kiểu nội tuyến mà còn ghi đè các kiểu khác được áp dụng cho phần tử đó

Một trong những khía cạnh khó chịu nhất khi làm việc với mã cũ là kiểu dáng nội tuyến không thể ghi đè bằng CSS. Thông thường, điều này có nghĩa là dành một lượng thời gian đáng kể để xem qua mã cũ (hy vọng không phải là không có tổ chức) để xóa kiểu dáng nội tuyến theo cách thủ công, trong khi nhà phát triển đang tự nghĩ rằng phải có một cách khác. Hóa ra, thực sự có một cách khác. Bằng cách sử dụng tham số [kiểu] với bộ chọn trong biểu định kiểu CSS, bạn hoàn toàn có thể ghi đè bất kỳ kiểu nội tuyến nào có thể có trong HTML của mình

Giả sử bạn có kiểu nội tuyến này trên div

< Xem văn bản thuần túy >

HTML


  1. < div class= " myDiv " style="border: 1px solid #000"> /div >

Nếu bạn đã cố ghi đè điều này trong CSS của mình bằng cách chỉ viết một kiểu mới cho nó như bên dưới, thì nó có thể sẽ không hoạt động, ngay cả khi bạn đã sử dụng kiểu đôi khi cau mày. quan trọng

Ghi đè css với kiểu nội tuyến

< Xem văn bản thuần túy >

css


  1. .myDiv{

  2. đường viền. không;

  3. }

Tuy nhiên, nếu bạn ghép nối. bộ chọn myDiv với dấu ngoặc [kiểu] và sử dụng. giá trị quan trọng, bạn có thể ghi đè kiểu dáng nội tuyến khó chịu đó khá dễ dàng

< Xem văn bản thuần túy >

css


  1. .myDiv[ kiểu ]{

  2. đường viền. không có . quan trọng ;

  3. }

Mặc dù đây có thể không được coi là cách thực hành tốt nhất, nhưng có nhiều trường hợp đây sẽ là cách dễ nhất và nhanh nhất để loại bỏ kiểu dáng nội tuyến không mong muốn và với tư cách là nhà phát triển, nó chắc chắn đáng để tận dụng

Trong khi nghiên cứu CSS, bạn thường tin rằng các kiểu nội tuyến là hình thức tạo kiểu mạnh nhất, không thể bị ghi đè bởi css đơn giản

Chà, thực ra có một mẹo khá đơn giản để đánh bại quy tắc này

Giả sử chúng ta muốn thay đổi màu của văn bản cho div này

Điều này có thể được thực hiện bằng cú pháp sau

Và Voila

Không còn màu đỏ nữa Nhưng đợi đã, điều gì sẽ xảy ra nếu kiểu nội tuyến sử dụng quan trọng. ?

Tôi lại đỏ. . (

Thực ra, cũng có một mẹo không thông thường cho điều đó

Sử dụng một hình ảnh động dường như tạo ra một số kết quả bất thường. Có vẻ như các trình duyệt ưu tiên kết quả của các khung hoạt hình hơn các kiểu nội tuyến và thậm chí thông qua các định dạng khó. quy tắc quan trọng

Haha, tôi lại xanh rồi

Rõ ràng là sử dụng kiểu nội tuyến và. quan trọng không được khuyến nghị, nhưng đôi khi chúng tôi sử dụng các công cụ của bên thứ 3 mà chúng tôi không phải lúc nào cũng kiểm soát được. Những thủ thuật này là giải pháp cho những tình huống khó khăn như vậy

CSS có ghi đè kiểu nội tuyến không?

Nó hoạt động theo kiểu phản trực giác, vì vậy tôi chỉ giải thích thêm. kiểu nội tuyến ghi đè CSS nội bộ và CSS nội bộ ghi đè tệp CSS bên ngoài và tệp CSS bên ngoài ghi đè giá trị mặc định của trình duyệt. Một cách để nghĩ về nó giống như các lớp. Phong cách càng “gần” với phần tử thì nó càng có mức độ ưu tiên cao hơn.

Kiểu HTML có ghi đè CSS không?

Sử dụng Mã HTML theo cách này sẽ tạo một biểu định kiểu bên trong (trên trang) ghi đè bất kỳ CSS có cùng độ đặc hiệu nào được xác định trong biểu định kiểu bên ngoài của chủ đề và mô-đun của bạn . Điều này rất hữu ích khi bạn muốn kiểm tra các thay đổi của mô-đun hiện có và kiểu chủ đề giao diện người dùng mà không cần phải biên dịch lại.

Tại sao CSS nội tuyến không được khuyến nghị?

Một trong những lý do chính khiến kiểu dáng nội tuyến không phải là lựa chọn tốt cho ứng dụng của bạn là vì kiểu dáng nội tuyến không hỗ trợ (hoặc hỗ trợ thực sự kém) cho các tính năng CSS. Every application nowadays might have to end up using some selectors such as :hover , :active , :focused , etc.