inherit, initial và unset là 3 giá trị thường được các nhà phát triển web sử dụng để đặt lại kiểu trong css. Nhưng nhiều người vẫn chưa hiểu rõ ý nghĩa của từng giá trị này dẫn đến nhầm lẫn và sử dụng không hợp lệ. Trong bài viết này, bizfly cloud sẽ tìm hiểu về kế thừa, khởi tạo và không đặt trong CSS và tìm hiểu cách sử dụng chúng thành thạo nhất.
Sự khác biệt giữa ban đầu, kế thừa và không đặt
Mỗi thuộc tính css thường có 3 giá trị: inherit, initial và unset. Trong khi kế thừa và ban đầu đã có từ lâu, thì unset là một khái niệm mới được thêm vào gần đây. Về cơ bản:
-inherit: kế thừa các thuộc tính của phần tử mẹ gần nhất.
– Ban đầu: Sử dụng kiểu trình duyệt mặc định.
– unset: Khi đặt giá trị của thuộc tính thành không được đặt, trình duyệt sẽ sử dụng tính năng kế thừa hoặc ký tắt dựa trên thuộc tính của phần tử mẹ. Nếu phần tử mẹ có các thuộc tính này, nó sẽ kế thừa (kế thừa) các giá trị thuộc tính từ phần tử mẹ, nếu không đặt thành phần sẽ sử dụng giá trị mặc định (ban đầu) của trình duyệt.
Để hiểu rõ hơn, hãy xem xét ví dụ sau:
html:
& lt; div class = “wrapper” & gt;
& lt; p class = “one” & gt; Rắn & lt; p & gt;
& lt; p class = “hai” & gt; Thằn lằn & lt; p & gt;
& lt; p class = “ba” & gt; Cá sấu & lt; / p & gt;
& lt; p & gt; Rồng Komodo & lt; / p & gt;
& lt; / div & gt;
css:
.wrapper {color: orange;}
.wrapper p {color: Purple;}
p.one {color: inherit;}
p.two {color: initial;}
p.three {color: not set;}
Kết quả trả về:
-snake có màu cam, nó kế thừa giá trị này từ div wrapper => kế thừa
– Con thằn lằn có màu đen, nó sử dụng kiểu trình duyệt mặc định => Ban đầu
– con cá sấu có màu cam, trong trường hợp này, hàm unset hoạt động giống như thừa kế vì phần tử mẹ (trình bao bọc) có thuộc tính màu.
– Rồng Komodo màu tím, đây là đoạn văn duy nhất nhận được giá trị từ .wrapper p
Trên đây là các tính năng chính của kế thừa, ban đầu và không đặt. Để tìm hiểu thêm, chúng ta cần hiểu các kiểu cơ bản hiển thị trên trình duyệt.
Kiểu cơ bản
Kiểu gốc cho thuộc tính css
Mỗi thuộc tính css có một kiểu ban đầu. Ngay cả khi bạn sử dụng thuộc tính css trên bất kỳ phần tử html nào, thì kiểu ban đầu của thuộc tính vẫn giữ nguyên.
Giá trị mặc định của thuộc tính
line-height là bình thường.
Kiểu trình duyệt của người dùng
Sau khi áp dụng các kiểu ban đầu của tất cả css trong trang web, trình duyệt sẽ tải các kiểu riêng của nó.
Mỗi trình duyệt có một kiểu mặc định khác nhau (chrome, firefox, edge …). Lưu ý rằng giá trị này của trình duyệt hoàn toàn không liên quan gì đến kiểu css ban đầu.
Sau đây là các ví dụ về kiểu trình duyệt của ứng dụng khách:
Một lưu ý khác là bản thân phần tử html không có kiểu dáng! Kiểu cơ bản của các phần tử html mà chúng ta thấy trên web (chẳng hạn như thẻ & lt; h1 & gt;) thực sự là kiểu trình duyệt mặc định.
Được rồi, bây giờ chúng ta hãy tìm hiểu về các từ khóa “inherit”, “initial” và “unset”.
Ban đầu, kế thừa, unset
hoạt động như thế nào trong css?
Kế thừa CSS
Kế thừa còn được gọi là kế thừa giá trị. Khi sử dụng inherit trong css, trình duyệt sẽ tra cứu giá trị từ phần tử html mẹ gần nó nhất và sử dụng lại giá trị đó. Nếu phần tử mẹ cũng có giá trị kế thừa, trình duyệt sẽ tiếp tục hoạt động cho đến khi nó tìm thấy một giá trị. Nếu không có giá trị, nó sẽ sử dụng kiểu của trình duyệt. Nếu nó vẫn không tồn tại, nó sẽ sử dụng các kiểu css mặc định được đề cập ở trên.
Khởi tạo trong css
Để hiểu phần đầu, có hai điểm cần lưu ý:
– Mỗi thuộc tính css có một kiểu gốc, hoàn toàn độc lập với kiểu của trình duyệt.
– Khi trang tải, trình duyệt sẽ mặc định theo kiểu của nó.
Vì vậy, nếu chúng tôi không muốn sử dụng các kiểu trình duyệt mặc định, nhưng muốn sử dụng các kiểu css ban đầu, thì chúng ta cần “ký hiệu đầu”.
ban đầu yêu cầu trình duyệt sử dụng giá trị ban đầu của mỗi thuộc tính css. Ví dụ:
– Giá trị ban đầu của thuộc tính màu luôn là đen .
– Giá trị ban đầu của thuộc tính hiển thị luôn là nội tuyến . => Trường hợp này là đặc biệt. Bởi vì mặc định của trình duyệt (kiểu tác nhân người dùng) hiển thị tab bị chặn. Vì vậy, nếu bạn không sử dụng ban đầu, trình duyệt sẽ chặn theo mặc định. Ngược lại, nếu ký tự đầu tiên được sử dụng cho bất kỳ thẻ & lt; div & gt; bất kỳ, nó sẽ gọi giá trị mặc định của thuộc tính hiển thị nội dòng.
Không được đặt trong css
unset là một từ khóa đặc biệt vì nó có các giá trị khác nhau trong các trường hợp khác nhau. Trong css, có hai loại thuộc tính:
– Thuộc tính kế thừa : là các thuộc tính ảnh hưởng đến các thuộc tính con của nó. Tất cả các thuộc tính ảnh hưởng đến văn bản đều được kế thừa. Ví dụ: nếu chúng tôi chọn kích thước phông chữ cho một phần tử html, giá trị sẽ được áp dụng cho tất cả các phần tử con của nó.
– Thuộc tính không được kế thừa : Tất cả các thuộc tính chỉ ảnh hưởng đến phần tử mà nó xác định. Tất cả các thuộc tính không ảnh hưởng đến văn bản đều không được kế thừa. Ví dụ: nếu bạn đặt đường viền cho phần tử mẹ, phần tử con sẽ không có đường viền (không bị ảnh hưởng).
Trả về chưa đặt, hoạt động giống như thuộc tính được kế thừa (thuộc tính được kế thừa). Ví dụ: với thuộc tính text-color, hàm unset sẽ buộc trình duyệt phải tìm giá trị text-color của phần tử mẹ.
Đối với các thuộc tính không được kế thừa, giá trị chưa đặt sẽ giống với giá trị ban đầu. Ví dụ, với thuộc tính border-color, unset sẽ gọi giá trị css gốc (kiểu ban đầu).
. đẳng cấp {
color: not set; / * hoạt động giống như “inherit” * /
display: not set; / * hoạt động giống như ‘ban đầu’ * /
}
Tại sao sử dụng unset nếu nó hoạt động giống như kế thừa và ban đầu?
Đơn giản, nếu chúng tôi chỉ đặt lại một thuộc tính thì không cần phải hủy đặt nó. Chỉ cần sử dụng kế thừa hoặc ban đầu là đủ.
Nhưng bây giờ chúng tôi có một thuộc tính mới tất cả. Với thuộc tính này, chúng tôi có thể đặt lại tất cả các thuộc tính được kế thừa và không được kế thừa cùng một lúc.
Bằng cách này, bạn không cần phải đặt lại từng thuộc tính một. Ngược lại, sử dụng all: unset sẽ đặt lại tất cả các thuộc tính được kế thừa về các thuộc tính được kế thừa và không được kế thừa về ban đầu.
Đây là lý do duy nhất khiến giá trị chưa đặt tồn tại!
Ví dụ: thay vì đặt lại từng thuộc tính một:
.common-content * {
font-size: kế thừa;
font-weight: inherit; border-width: initial;
Màu nền: ban đầu;
}
Chúng tôi có thể đặt lại tất cả chúng cùng một lúc theo cách ngắn gọn hơn:
.common-content * {
Tất cả: chưa đặt;
}
Khôi phục từ khóa
Nhưng điều gì sẽ xảy ra nếu chúng tôi muốn đặt lại kiểu của thuộc tính về kiểu mặc định của trình duyệt thay vì kiểu ban đầu?
Ví dụ: thay đổi thuộc tính hiển thị của
Để làm điều này, chúng tôi cần sử dụng từ khóa hoàn nguyên. Sử dụng hoàn nguyên tương tự như unset, sự khác biệt duy nhất là nó thích phong cách của trình duyệt hơn phong cách css ban đầu. Ví dụ: thay vì sử dụng:
div {
display: restore; / * = block * /
}
h1 {
font-weight: revert; / * = bold * /
font-size: revert; / * = 2em * /
}
Chúng tôi có thể rút ngắn đoạn mã trên như sau:
.common-content * {
Tất cả: khôi phục;
}
Lệnh trên sẽ đặt lại tất cả các thẻ html về kiểu trình duyệt mặc định. Vì vậy, hoàn nguyên cung cấp nhiều chức năng mạnh mẽ hơn là không đặt. Nhưng hiện tại, hoàn nguyên chỉ hoạt động trên firefox và safari.
Hỗ trợ trình duyệt
inherit: hoạt động trên tất cả các trình duyệt, bao gồm tức là 11
Ban đầu và chưa đặt: hoạt động trên tất cả các trình duyệt ngoại trừ trình duyệt tức là 11
hoàn nguyên: hiện chỉ khả dụng cho firefox và safari
Theo dõi chia sẻ trên đám mây bizfly
& gt; & gt; Có thể bạn quan tâm: Cách loại bỏ tài nguyên chặn hiển thị: javascript và css
