Làm cách nào để ghi đè thuộc tính css gốc?

Đôi khi chúng ta gặp khó khăn trong việc áp dụng một kiểu cụ thể cho một phần tử cụ thể, nhưng đơn giản là chúng không hoạt động chủ yếu vì phần tử đó kế thừa các thuộc tính CSS có mức độ ưu tiên cao hơn mã bạn đang viết. Vì vậy, bạn có thể cần phải hiểu các kỹ thuật ghi đè để có thể làm điều đó

Các nhà phát triển thường sử dụng nhất. điều quan trọng là ghi đè bất kỳ loại thuộc tính CSS nào để tiết kiệm thời gian. Nhưng sử dụng. quan trọng là cách hoàn toàn sai để làm bất cứ điều gì. Nó có thể tạo ra nhiều sự cố trên toàn trang nếu được sử dụng trong CSS toàn cầu. Vì vậy, sử dụng. quan trọng như phương sách cuối cùng tuyệt đối của bạn. Có nhiều cách khác để bạn có thể kế thừa hoặc ghi đè các thuộc tính CSS

Kế thừa CSS

Trước khi chúng ta nói về ghi đè, hãy hiểu một chút về cách thức hoạt động của tính kế thừa CSS

Đối với bất kỳ phần tử nào, Nếu áp dụng bộ quy tắc cho kiểu, Bộ quy tắc tương tự sẽ được áp dụng cho tất cả các phần tử con của chúng. Có một cách đơn giản để thừa kế bất kỳ tài sản nào. Hầu hết thời gian, chúng tôi không chỉ định từ kế thừa vì đó là từ mặc định. Chúng ta có thể ghi đè css hoặc thay đổi nó nếu muốn bằng cách sử dụng thuộc tính ban đầu. Ngoài ra còn có thuộc tính Unset hoạt động như được kế thừa. Bạn xem thêm bài viết khác của mình để hiểu chi tiết về cách thức hoạt động của tính kế thừa CSS

Dưới đây là một ví dụ thể hiện sự kế thừa giữa quan hệ cha-con

html,body{font-family: Arial, Helvetica, sans-serif; color:blue;}

.parent1{color:brown;}

.parent2{color:tomato;}

.clild1-initial,.clild2-initial{ color: initial;}

.clild1-inherit,.clild2-inherit{ color: inherit;}

.clild1-unset,.clild2-unset{ color:unset;}

Không có sự khác biệt đáng chú ý giữa inherit và unset. Nhưng thuộc tính ban đầu sẽ đặt lại thuộc tính về giai đoạn mặc định. Trong trường hợp màu, nó được đặt thành màu đen. Đã nói rằng, Hãy xem điều gì quan trọng khi chúng ta muốn ghi đè các thuộc tính CSS

Cách ghi đè CSS kế thừa

Các thuộc tính khác nhau có thể được kế thừa trên một phần tử tùy thuộc vào thứ tự Xếp tầng và loại CSS được sử dụng. Để ghi đè các giá trị thuộc tính CSS kế thừa này, chúng ta có thể sử dụng một trong hai phương pháp này

từ khóa quan trọng trong CSS, ghi đè tất cả các giá trị theo thứ tự xếp tầng. Nhưng chúng ta cũng có thể ghi đè. các giá trị quan trọng với độ đặc hiệu cao hơn. giá trị quan trọng. Vì vậy, tôi luôn luôn sử dụng. quan trọng như là phương sách cuối cùng nếu không nó có thể tạo ra sự nhầm lẫn

thứ tự xếp tầng

CSS được gọi là Cascading Stylesheets chủ yếu là do tính chất xếp tầng (thứ tự phân cấp) của nó. Điều này có nghĩa là nếu một phần tử có hai quy tắc có cùng mức độ ưu tiên, thì quy tắc được xác định cuối cùng sẽ được ưu tiên

Hãy hiểu điều này bằng một ví dụ thực tế, bên dưới là các kiểu được sắp xếp theo mức độ ưu tiên của chúng từ thấp hơn đến cao nhất

1. Mặc định trình duyệt

Mỗi trình duyệt sử dụng một số bộ quy tắc mặc định để tạo kiểu cho nội dung ngay cả khi không có kiểu nào được xác định. Ví dụ: Nếu chúng tôi tạo một đánh dấu đơn giản chỉ bằng HTML và không có CSS, các trình duyệt khác nhau sẽ hiển thị trang đó với kiểu mặc định của trình duyệt. Điều này có thể được hiển thị trong công cụ kiểm tra chrome hoặc công cụ phát triển firefox. mọi trình duyệt đều có một số tập hợp thuộc tính có thể thay đổi

Kiểu Trình duyệt mặc định sẽ trông giống như ví dụ bên dưới

Chrome có các cài đặt để thay đổi Font Face và Kích thước phông chữ Tối thiểu-Tối đa

Trong Firefox, Bạn có thể thay đổi Màu liên kết, nền, v.v.

Cách ghi đè CSS mặc định của trình duyệt

Chỉ cần xác định thuộc tính cho thẻ HTML sẽ ghi đè kiểu CSS của trình duyệt. Bạn phải làm điều này cho từng phần tử HTML mà bạn sẽ sử dụng trong dự án của mình

Trong ví dụ bên dưới, CSS mặc định của trình duyệt cho html và thẻ body bị ghi đè bởi quy tắc được xác định bên dưới, quy tắc body được ghi đè thêm bởi quy tắc body bên dưới vì nó nằm cuối cùng trong định nghĩa CSS. Đây là cách cascading hoạt động

html,body{

margin:0;

Padding:0;

font-family: Arial, Helvetica;

font-size:100%;

color:red;

}

body{

color:blue;

}

Một cách tốt hơn để làm điều đó. sử dụng thiết lập lại. css (một CSS đặt lại do meyerweb tạo) để ghi đè và đặt lại các kiểu mặc định của trình duyệt

Kiểu trình duyệt mặc định sẽ bị ghi đè bằng cách đặt lại. css như ví dụ

2. Biểu định kiểu bên ngoài. Đã liên kết/Đã nhập

Mặc định của trình duyệt là dễ ghi đè nhất, nhưng mặc định của trình duyệt hầu như được đặt lại hầu hết thời gian và CSS bên ngoài hoặc được nhập sẽ diễn ra theo kiểu mặc định. CSS bên ngoài chỉ là một phương pháp thêm CSS vào các tệp HTML, do đó, nó tuân theo cùng một hành vi xếp tầng. CSS được liên kết hoặc nhập lần cuối sẽ được ưu tiên. Và các quy tắc được xác định cuối cùng trong tệp CSS sẽ có mức độ ưu tiên cao hơn. Một ví dụ nhỏ để giải thích cách thứ tự xếp tầng hoạt động và cách bộ chọn CSS được ưu tiên

Trong ví dụ trên, style3. css sẽ ghi đè tất cả các thuộc tính trong các quy tắc xung đột

Cả 3 stylesheet đều có định nghĩa style cho phần thân, sau đó định nghĩa của tệp CSS cuối cùng sẽ đảm nhận

3. Bảng định kiểu nội bộ. nhúng

Kiểu nội bộ được thêm vào phần đầu của tệp HTML. Vì vậy, nó được ưu tiên cao hơn so với bên ngoài. Nhưng tùy thuộc vào thứ tự bao gồm, mức độ ưu tiên thay đổi

Hãy xem xét trường hợp chúng ta sử dụng cả CSS bên trong và bên ngoài cùng nhau. Về mặt kỹ thuật, CSS nội bộ có mức độ ưu tiên cao hơn, nhưng do tính chất xếp tầng của nó, nếu chúng ta liên kết hoặc nhập CSS bên ngoài sau CSS nội bộ, thì CSS bên ngoài sẽ tiếp quản ngay cả CSS nội bộ có mức độ ưu tiên cao hơn

Đối với các cm như WordPress, CSS nội bộ được thêm vào làm thành phần cuối cùng của phần đầu để tất cả các quy tắc nội bộ có thể có mức độ ưu tiên cao hơn và có thể ghi đè CSS từ biểu định kiểu bên ngoài. Các nhà phát triển sử dụng kỹ thuật đơn giản này để phát triển các chủ đề. Các kiểu bên trong này sẽ ghi đè lên một bộ quy tắc bằng cách sử dụng phương thức ghi đè CSS

Bạn có thể nhấp vào từng hộp kiểm để xem nó hoạt động trong ví dụ bên dưới

Đối với các bố cục phức tạp hơn, tính đặc hiệu của CSS được đưa vào hình ảnh, sử dụng kết hợp nhiều lĩnh vực khác nhau để chọn một thành phần cụ thể. Thêm thông tin sau trong bài viết này

4. Kiểu nội tuyến

CSS nội tuyến được ưu tiên cao nhất. Các thuộc tính được xác định bằng phương pháp này sẽ luôn ghi đè mặc định của trình duyệt và bên ngoài (cho đến khi. quan trọng phá hủy nó)

Trong khi tạo các ứng dụng động, thật khó để xác định trước một bộ quy tắc cho một thành phần cụ thể vì chính thành phần đó phải được tạo động và bạn có thể muốn ghi đè mọi quy tắc được áp dụng cho nó

Các nhà thiết kế nên tạo quy tắc cho các phần tử được xác định trước và đặt chúng riêng biệt trong các tệp CSS, vì vậy khi cần, các nhà phát triển có thể tận dụng CSS nội tuyến trong mã động của họ mà không cần chạm vào bất kỳ CSS bên trong hoặc bên ngoài nào.

Xem cách CSS nội tuyến ghi đè tất cả các kiểu khác được xác định phía trên phần tử

Tôi có một bài viết nói về cách CSS có thể được thêm vào HTML nói về Kỹ thuật thêm CSS và lợi ích của nó

Ưu tiên nội bộ

Bất chấp bản chất xếp tầng của nó, xếp tầng CSS có thể bị ghi đè bằng cách sử dụng kết hợp các bộ chọn. Đây là thứ được tính toán dựa trên loại bộ chọn và số lượng bộ chọn. Đây là một máy tính độ đặc hiệu CSS đơn giản cho biết trọng lượng mà bộ chọn nhận được. Bạn càng chọn nhiều bộ chọn, bạn càng được ưu tiên nhiều hơn. Chúng tôi đã đề cập đến Cách phân phối trọng số ưu tiên trong cách chọn bất kỳ thứ gì trong bài viết CSS

Chỉ để tóm tắt tính đặc hiệu,

1. Kiểu nội tuyến. Nó có Độ đặc hiệu cao nhất và sẽ ghi đè CSS khác có cùng mức độ ưu tiên
2. Bộ chọn ID. Nó có quyền ưu tiên cao nhất khi sử dụng một bộ chọn duy nhất trong CSS bên trong hoặc bên ngoài
3. Bộ chọn lớp. Có mức độ ưu tiên thấp hơn ID
4. Bộ chọn thẻ. Ưu tiên thấp nhất trong số tất cả các bộ chọn

Chúng tôi sẽ sử dụng cùng một ví dụ được sử dụng trong bài viết trên để giải thích các ưu tiên ban đầu. Chúng tôi đã thêm tính đặc hiệu cao hơn bằng cách sử dụng các lớp trong ví dụ bên dưới

• Bộ chọn đầu tiên có 2 lớp sẽ cung cấp cho toàn bộ độ đặc hiệu của bộ chọn là 20
• Bộ chọn thứ hai có một div và 2 lớp sẽ mang lại tính đặc hiệu của bộ chọn này là 21
• Bộ chọn thứ hai có bộ chọn lớp id 2 và một thẻ mang lại độ đặc hiệu là 121

Những con số này sẽ giúp bạn hiểu rõ hơn về những gì được ưu tiên. Số càng cao càng được ưu tiên

quan trọng

Đây là cách dễ dàng cho người mới bắt đầu và nó hoạt động tốt cho các dự án nhỏ. Nhưng trừ khi bạn biết mình đang làm gì, bạn phải tránh sử dụng. quan trọng. Điều này sẽ ghi đè mọi quy tắc khác được áp dụng cho cùng một bộ chọn. Vì vậy, nếu không được sử dụng một cách khôn ngoan, nó có thể gây ra thiệt hại trên toàn trang web. Vì vậy, tôi muốn nói không bao giờ sử dụng. quan trọng

Điều quan trọng là sử dụng các quy tắc phân tầng và tính đặc hiệu giống nhau để tính toán mức độ ưu tiên nếu có xung đột xảy ra. Điều này có thể gây ra nhiều rắc rối trong CSS

.parent1{color:brown;}

.clild1{color:brown;}

.parent1.clild1-imp.red-colored,

.clild1-imp{color:red!important;}

.parent1.clild1-imp{color:blue!important;}

Đoạn mã trên sử dụng. quan trọng để ghi đè các thuộc tính được xác định cho. con1

Trong ví dụ trên, Chúng tôi đang ghi đè các thuộc tính của. bộ chọn con1 bằng cách sử dụng. quan trọng. Các. khối con1 phải có màu đỏ nhưng không phải vì thuộc tính đang bị ghi đè bởi bộ chọn độ đặc hiệu cao hơn. chúng tôi đã tăng. tính đặc hiệu của child1 để ghi đè lại màu xanh lam. vì vậy đứa trẻ cuối cùng có màu đỏ vì bộ chọn ưu tiên cao của nó

ưu

• Có thể ghi đè CSS nội tuyến
• Có thể ghi đè độ đặc hiệu cao

Nhược điểm

• Có thể phá hủy dòng chảy tự nhiên
• Có thể phá hủy quy tắc Sitewide

Hãy tưởng tượng, bạn muốn tạo nhãn màu đỏ. Vì vậy, bạn đã thêm. quan trọng đối với quy tắc như nhãn{ màu. màu đỏ. quan trọng;}, người khác làm việc trong hàng cọc sẽ không hiểu phải làm gì vì. quan trọng làm gián đoạn dòng chảy tự nhiên, vì vậy chúng tôi sẽ tạo quy tắc như nhãn biểu mẫu{color. Bỏ rơi. quan trọng} và cuối cùng chúng tôi có thể tạo nhiều quy tắc bằng cách sử dụng. quan trọng để ghi đè thuộc tính màu CSS và nó có thể làm gián đoạn dòng CSS tự nhiên

Thay vào đó, chỉ một quy tắc cụ thể cao hơn là đủ để giải quyết vấn đề. Có rất nhiều cách để một yếu tố có thể được chọn và tạo kiểu chính xác. Để làm tròn toàn bộ trường hợp,

• Sử dụng tính đặc hiệu thay vì sử dụng. quan trọng
• Không bao giờ sử dụng. quan trọng khi bạn đang viết một khung hoặc bản thiết kế CSS
• Không bao giờ sử dụng. quan trọng đối với CSS toàn cầu trên toàn trang web

Từ cuối cùng

Người ta có thể sử dụng bất kỳ kỹ thuật nào được đề cập để ghi đè CSS. Nhưng cách tốt nhất là xem xét sử dụng quy tắc xếp tầng trước. Sử dụng tính đặc hiệu thứ hai, và. quan trọng Không bao giờ. . Quan trọng có thể được sử dụng trong trình kiểm tra trình duyệt để nhanh chóng kiểm tra tác động của quy tắc của bạn. Hoặc đôi khi sửa chữa nhanh khẩn cấp. Nhưng không bao giờ sử dụng. quan trọng như một thực hành mã hóa

Bạn có thể ghi đè một CSS quan trọng không?

Ghi đè quy tắc CSS là gì?