Cách ghi đè lớp css trong html

Trên thực tế, nếu bạn sử dụng quy tắc !important, quy tắc này sẽ ghi đè TẤT CẢ các quy tắc tạo kiểu trước đó cho thuộc tính cụ thể đó trên phần tử đó

Chúng ta hãy xem xét một ví dụ

Thí dụ

#myid {
  màu nền. xanh da trời;
}

.myclass {
  màu nền. màu xám;
}

p {
  màu nền. màu đỏ. quan trọng;
}

Tự mình thử »

Ví dụ giải thích

Trong ví dụ trên. cả ba đoạn văn sẽ có màu nền đỏ, mặc dù bộ chọn ID và bộ chọn lớp có độ đặc hiệu cao hơn. Quy tắc !important ghi đè thuộc tính background-color trong cả hai trường hợp

quan trọng về. quan trọng

Cách duy nhất để ghi đè một quy tắc !important là đưa một quy tắc !important khác vào một khai báo có cùng đặc điểm (hoặc cao hơn) trong mã nguồn - và vấn đề bắt đầu từ đây. Điều này làm cho mã CSS trở nên khó hiểu và việc gỡ lỗi sẽ khó khăn, đặc biệt nếu bạn có một biểu định kiểu lớn

Ở đây chúng tôi đã tạo một ví dụ đơn giản. Không rõ lắm, khi bạn xem mã nguồn CSS, màu nào được coi là quan trọng nhất

Thí dụ

#myid {
  màu nền. màu xanh da trời. quan trọng;
}

.myclass {
  màu nền. xám. quan trọng;
}

p {
  màu nền. màu đỏ. quan trọng;
}

Tự mình thử »

Mẹo. Thật tốt khi biết về quy tắc !important. Bạn có thể thấy nó trong một số mã nguồn CSS. Tuy nhiên, không sử dụng nó trừ khi bạn thực sự phải

Có thể một hoặc hai trường hợp sử dụng hợp lý. quan trọng

Một cách để sử dụng !important là nếu bạn phải ghi đè một kiểu không thể ghi đè theo bất kỳ cách nào khác. Điều này có thể xảy ra nếu bạn đang làm việc trên Hệ thống quản lý nội dung (CMS) và không thể chỉnh sửa mã CSS. Sau đó, bạn có thể đặt một số kiểu tùy chỉnh để ghi đè lên một số kiểu CMS

Một cách khác để sử dụng !important là. Giả sử bạn muốn có giao diện đặc biệt cho tất cả các nút trên một trang. Ở đây, các nút được tạo kiểu với màu nền xám, văn bản màu trắng và một số phần đệm và đường viền

Thí dụ

.button {
  màu nền. #8c8c8c;
  màu. màu trắng;
  phần đệm. 5px;
  đường viền. 1px đen đặc;
}

Tự mình thử »

Giao diện của một nút đôi khi có thể thay đổi nếu chúng ta đặt nó bên trong một phần tử khác có độ đặc hiệu cao hơn và các thuộc tính sẽ xung đột. Đây là một ví dụ về điều này

Thí dụ

.button {
  màu nền. #8c8c8c;
  màu. màu trắng;
  phần đệm. 5px;
  đường viền. 1px đen đặc;
}

#myDiv a {
  color. đỏ;
  màu nền. màu vàng;
}

Tự mình thử »

Để "buộc" tất cả các nút có giao diện giống nhau, bất kể là gì, chúng ta có thể thêm quy tắc !important vào các thuộc tính của nút, như thế này

Sử dụng CSS, người dùng có thể thêm các tính năng khác nhau vào trang web của họ. Khi người dùng sử dụng nhiều quy tắc CSS trong cùng một phần tử HTML, họ nên điều khiển trình duyệt bằng quy tắc ngón tay cái để biểu thị hướng dẫn tạo kiểu nào sẽ được ưu tiên

Tùy thuộc vào loại bộ chọn mà người dùng sử dụng để tạo kiểu cho phần tử HTML, các quy tắc này sẽ đặt hoặc xác định kiểu nào ghi đè kiểu khác. Đó là những gì bài viết sẽ thảo luận ngắn gọn với các tiêu chí khác nhau mà người dùng có thể sử dụng trong CSS.  

Ghi đè nghĩa là gì trong CSS?

Để ghi đè có nghĩa là sử dụng thuộc tính của một lớp CSS này trên một lớp CSS khác. Ghi đè trong CSS cho biết rằng người dùng sử dụng bất kỳ thuộc tính kiểu nào cho phần tử HTML được chỉ định mà họ đã cung cấp kiểu CSS

Ví dụ: nếu người dùng muốn thay đổi kiểu CSS mà họ đã sử dụng cho thành phần HTML bằng CSS bên ngoài, nhưng nếu họ không tìm thấy nơi họ đã viết dòng mã, thì họ chỉ có thể ghi đè kiểu CSS khác bằng cách sử dụng CSS nội tuyến . Ngoài ra, họ có thể sử dụng hoặc. chỉ thị quan trọng ghi đè lớp CSS lên lớp khác

Thứ tự của phong cách nội tuyến ưu tiên như sau

biểu định kiểu nội tuyến (cao nhất) >>  thẻ >>  biểu định kiểu bên ngoài (thấp nhất)

Vì vậy, khi xuất hiện xung đột giữa hai hoặc nhiều kiểu CSS trong cùng một phần tử HTML, kiểu cuối cùng mà người dùng sẽ sử dụng sẽ được ưu tiên

Hai quy tắc dưới đây sẽ làm cho người dùng rõ ràng về khái niệm

• Người dùng phải đặt các kiểu nội tuyến bên trong thẻ HTML của tài liệu HTML. Mặc dù họ phải đặt các biểu định kiểu nhúng bên trong thẻ HTML của tài liệu HTML để trình duyệt sử dụng các kiểu nội tuyến làm kiểu được sử dụng cuối cùng và được ưu tiên
• Trong tài liệu HTML, biểu định kiểu bên trong có mức độ ưu tiên cao hơn biểu định kiểu bên ngoài. Đó chỉ là do trình duyệt sẽ luôn coi các biểu định kiểu bên ngoài hoặc biểu định kiểu được liên kết xuất hiện trước các biểu định kiểu bên trong hoặc biểu định dạng nhúng, ngay cả khi người dùng sử dụng chúng hoặc đặt chúng sau

Chúng ta hãy xem các kiểu ghi đè khác nhau trong CSS

Phương pháp 1. Ghi đè kiểu CSS bằng bộ chọn ID

	

      It is an example of CSS class overriding where we are using an ID selector to override.
    

đầu ra

Chạy đoạn mã

Giải trình

Trong đoạn mã trên, chúng ta có thể thấy rằng ID được ưu tiên khi chúng ta đặt lớp sau ID. Chúng tôi chỉ có thể sử dụng điều này khi chúng tôi đặt ID và lớp CSS trong cùng một phần tử HTML

Phương pháp 2 Ghi đè kiểu CSS bằng bộ chọn Lớp

	

      
        It is an example of CSS class overriding where we use an CSS selector to override...
      
    

đầu ra

Chạy đoạn mã

Giải trình

Như chúng ta đã thảo luận, khi chúng ta sử dụng bộ chọn Lớp và bộ chọn ID trong cùng một phần tử HTML, bộ chọn ID sẽ được ưu tiên. Nhưng trong ví dụ mã trên, cuối cùng chúng tôi đã sử dụng bộ chọn Lớp;

Phương pháp 3. Tạo lớp CSS với thuộc tính khác nhau

Có các kỹ thuật khác để ghi đè kiểu CSS. Người dùng có thể áp dụng bằng cách sử dụng một lớp CSS hơn một lớp CSS khác. Hãy để chúng tôi tìm hiểu cách người dùng có thể sử dụng CSS để ghi đè lớp CSS này lên lớp CSS khác bằng cách sử dụng các đoạn mã

Đoạn mã

	

    Overwriting by redeclaring second Class with different property
    

đầu ra

Chạy đoạn mã

Giải trình

Người dùng có thể sử dụng toán tử dấu chấm để chỉ định tên lớp CSS, tôi. e. ,. tên lớp {}. Ở đây, trong ví dụ này, chúng tôi đã sử dụng hai lớp CSS, đó là bg-maroon và bg-orange. Ở lớp thứ hai, tôi. e. , bên trong lớp CSS bg-orange, chúng tôi đã xác định màu nền và phần đệm của văn bản với giá trị là màu cam và 60 px. Văn bản bên trong HTML

thẻ sẽ đề cập đến lớp thứ hai

Ghi chú. Người dùng cũng có thể thay đổi thuộc tính của

thẻ bằng cách thay đổi kiểu trong chính lớp CSS

Phương pháp 4. Sử dụng CSS nội tuyến

Như chúng ta biết CSS nội tuyến là trọng số cao nhất nên nó sẽ ghi đè lên tất cả các lớp CSS khác

cú pháp

Using inline CSS

Mã số

	
Using inline CSS

đầu ra

Chạy đoạn mã

Ghi chú. Không được đề xuất, Không được hỗ trợ trong các trang AMP

Phương pháp 5. sử dụng. chỉ thị quan trọng

Phương pháp cuối cùng liên quan đến một trong những kỹ thuật quan trọng nhất trong CSS để ghi đè kiểu là. chỉ thị quan trọng. Để khai báo một lớp với. Chỉ thị quan trọng là một cách tuyệt vời để ghi đè các kiểu người dùng muốn

Khi người dùng sử dụng bất kỳ quy tắc thiết yếu nào trong khai báo kiểu CSS, khai báo này sẽ ghi đè lên các kiểu CSS khác

Hãy để chúng tôi xem làm thế nào. công việc chỉ đạo quan trọng

Đoạn mã

	
!important directive

đầu ra

Chạy đoạn mã

Ghi chú. Không được đề xuất, Không được hỗ trợ trong các trang AMP

Giải trình

Lệnh ưu tiên thuộc tính kiểu CSS mà người dùng sẽ thêm ". quan trọng. " Nó cho biết kiểu dáng là quan trọng và có thể ghi đè kiểu dáng nội tuyến. Trong các dòng mã, chúng tôi đã thêm ". quan trọng" ở cuối dòng hướng dẫn tạo kiểu

Sự kết luận

Khi người dùng sử dụng kiểu CSS bên trong phần tử HTML, họ có thể thay đổi thuộc tính của nó bằng cách thay đổi hoặc thêm thuộc tính mới trong lớp đó. Cũng thế; . Ghi đè một lớp CSS dễ dàng, hiệu quả và có thể tiết kiệm thời gian. Chúng tôi hy vọng tất cả các kỹ thuật trên trong bài viết này sẽ giúp bạn ghi đè kiểu CSS

Làm cách nào để ghi đè CSS lớp?

Làm cách nào để ghi đè các kiểu CSS trong HTML?

Làm cách nào để ghi đè CSS id bằng CSS lớp?