Quy tắc quan trọng trong CSS là gì?
Thuộc tính này trong CSS được sử dụng để mang lại tầm quan trọng cao hơn so với thuộc tính thông thường. Các. quan trọng có nghĩa là 'điều này quan trọng'. Quy tắc này cung cấp cách tạo Cascade trong CSS Show
Nếu chúng ta áp dụng thuộc tính này cho văn bản thì mức độ ưu tiên của văn bản đó sẽ cao hơn các mức độ ưu tiên khác. Bạn không nên sử dụng thuộc tính CSS này vào chương trình của mình cho đến khi nó được yêu cầu cao. Đó là bởi vì việc sử dụng nhiều tài sản này sẽ gây ra nhiều hành vi không mong muốn Nếu một quy tắc được xác định với thuộc tính này, nó sẽ từ chối mối quan tâm thông thường trong đó quy tắc được sử dụng sau sẽ ghi đè lên quy tắc trước đó. Nếu chúng ta sử dụng nhiều hơn một khai báo được đánh dấu. quan trọng, sau đó tầng bình thường sẽ tiếp quản nó một lần nữa. Điều đó có nghĩa là mới được đánh dấu. quan trọng sẽ thay thế cái trước Nó tăng mức độ ưu tiên của thuộc tính CSS và bỏ qua các thuộc tính ghi đè cú phápVí dụKiểm tra nó ngay bây giờTrong ví dụ trên, chúng ta có thể thấy rằng thay vì màu hồng, màu nền của phần thân là màu xanh nhạt bởi vì, trong thẻ body, thẻ. quan trọng được áp dụng sau màu nền xanh nhạt Hãy lấy một ví dụ khác về tính chất này để hiểu rõ hơn Ví dụTrong ví dụ này, chúng tôi đang áp dụng. thuộc tính quan trọng trên đường viền của văn bản. Màu của đường viền của tiêu đề h1 sẽ vẫn là màu đỏ mặc dù có các khai báo khác. Màu sắc và màu đường viền của tiêu đề h2 sẽ vẫn là xanh và tím mặc dù có các khai báo khác 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 h2 { color: blue; } h2 { color: green; } Vă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 tôi 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
Tiếp theo là CSS .mytitle { color: blue; } #maintitle { color: red; } h2 { color: green; } Hơ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
Sau đó, tiếp theo là CSS .mytitle {/*...*/} #maintitle {/*...*/} h2 {/*...*/} Đâ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 những 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à 2 Điều này theo sau ID có giá trị là 3, sau đó là lớp có giá trị 4 và cuối cùng là bộ chọn phần tử có giá trị 5 Đô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
Tiếp theo là CSS h2.mytitle { color: blue; } #maintitle { color: red; } h2 { color: green; } Tính đặc hiệu của bộ chọn 6 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à, 9. Tuy nhiên, tổng giá trị này nhỏ hơn giá trị của ID .mytitle { color: blue; } #maintitle { color: red; } h2 { color: green; }0 là 3 Cá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 phù hợp nhất và 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 |