Tóm Tắt
Các kiểu cơ bản của website
Trước khi tìm hiểu về 3 khái niệm này, chúng ta cần hiểu thêm một chút về gốc rễ giá trị của các thuộc tính.
Style gốc của mỗi thuộc tính trong CSS
Mỗi thuộc tính trong CSS đều có 1 style gốc, nó ko tương quan đến việc được dùng cho thành phần HTML nào .Ví dụ line-height có style gốc là normal
Style của trình duyệt
Sau khi vận dụng những style gốc của thuộc tính, trình duyệt sẽ load những style của bản thân trình duyệt, cái này không tương quan đến style gốc của thuộc tính .Ví dụ
Các thành phần HTML không có style gốc, những style mặc định của nó, ví dụ như thẻ ở trên đến từ style của trình duyệt, nên hoàn toàn có thể style mặc định của cùng 1 thành phần HTML ở những trình duyệt khác nhau lại khác nhau .
OK, giờ vào phần chính của bài viết!
Keyword Inherit
Giống như tên gọi của nó là thừa kế, từ khóa này sẽ nhu yếu trình duyệt tìm kiếm giá trị của thành phần cha gần nó nhất, và sử dụng lại cái đó. Nếu như thành phần cha gần nhất của nó cũng có giá trị inherit thì nó sẽ liên tục tìm đi lên cho đến khi thấy giá trị nào đó. Nếu vẫn không có giá trị nào, nó sẽ sử dụng style của trình duyệt, nếu cũng không có, nó sẽ sử dụng style gốc của thuộc tính .
Keyword Initial
Quay lại những gì vừa nói ở trên, mỗi thuộc tính đều có style gốc của nó, thì từ khóa này sẽ nhu yếu trình duyệt sử dụng style gốc của nó .Xem thêm : Nghĩa Của Từ Xịn Xò Có Nghĩa Là Gì, Xịn Xò Có Nghĩa Là Gì
Ví dụ: Style gốc của thuộc tính display là inline, cho mọi phần tử, còn style của trình duyệt set cho thẻ
là display: block. Nếu thẻ
được gán giá trị initial, thì nó sẽ nhận giá trị inline thay vì block.
Keyword Unset
Đây là từ khóa duy nhất hoạt động giải trí khác nhau trên những kiểu thuộc tính khác nhau. Trong CSS, có 2 kiểu thuộc tính :Inherited properties (thuộc tính kế thừa): Thuộc tính sẽ ảnh hưởng tới các phần tử con của nó. Tất cả các thuộc tính liên quan đến text đều thuộc kiểu này. Ví dụ như chúng ta định nghĩa font-size cho 1 phần tử HTML, thì nó sẽ áp dụng cho tất cả các phần tử HTML con, trừ khi bạn set riêng font-size cho một phần tử cụ thể.( thuộc tính thừa kế ) : Thuộc tính sẽ tác động ảnh hưởng tới những thành phần con của nó. Tất cả những thuộc tính tương quan đến text đều thuộc kiểu này. Ví dụ như tất cả chúng ta định nghĩa font-size cho 1 thành phần HTML, thì nó sẽ vận dụng cho toàn bộ những thành phần HTML con, trừ khi bạn set riêng font-size cho một thành phần đơn cử .
Non-inherited properties (thuộc tính không kế thừa): thuộc tính này chỉ ảnh hưởng tới phần tử sử dụng nó, là các phần tử mà không áp dụng cho text. Ví dụ, bạn set border cho phần tử cha, thì phần tử con vẫn không có border
(thuộc tính không kế thừa): thuộc tính này chỉ ảnh hưởng tới phần tử sử dụng nó, là các phần tử mà không áp dụng cho text. Ví dụ, bạn set border cho phần tử cha, thì phần tử con vẫn không có border
unset hoạt động giải trí giống như inherit với kiểu thuộc tính thừa kế. Ví dụ như thuộc tính color, nó sẽ hoạt động giải trí giống như inherit, tức là tìm giá trị của thành phần cha gần nhất, và tìm ngược lên trên giống như lý giải phía trên .Với kiểu thuộc tính không thừa kế, unset hoạt động giải trí giống initial, tức là lấy style gốc. Ví dụ với border-color nó sẽ hiểu là initial. some-class { color : unset ; / * bằng với ” inherit ” * / display : unset ; / * bằng với ” initial ” * / }
Tại sao lại sử dụng unset nếu nó hoạt động giống như inherit và initial
Nếu unset hoạt động giống initial và inherit, vậy tại sao ta lại muốn sử dụng unset ?Nếuhoạt động giống initial và inherit, vậy tại sao ta lại muốn sử dụng unset ?Nếu ta chỉ cần reset 1 thuộc tính, vậy thì unset là không thiết yếu ; ta hoàn toàn có thể sử dụng inherit hay initial .
Nhưng giờ ta đã có một thuộc tính mới gọi là all đi kèm một tính năng mới: có thể reset cả các ** thuộc tính được kế thừa** lẫn các thuộc tính không được kế thừa.
Theo cách mới này, ta không cần phải reset từng thuộc tính một. Thay vào đó, apply giá trị unset tới thuộc tính all sẽ reset tổng thể những thuộc tính thừa kế về inherit, và những thuộc tính không thừa kế về initial
Đây là lý do duy nhất cho sự tồn tại của giá trị unset !
Ví dụ, thay vì reset từng thuộc tính lần lượt :/ * Bad * /. common-content * { font-size : inherit ; font-weight : inherit ; border-width : initial ; background-color : initial ; } Ta hoàn toàn có thể dùng thuộc tính all với giá trị unset, qua đó ảnh hưởng tác động tới toàn bộ những thuộc tính đang sống sót :/ * Good * /. common-content * { all : unset ; } Tôi đã viết một ví dụ nhỏ để minh họa cách những thuộc tính hoạt động giải trí khi sử dụng thuộc tính all với giá trị unset ; một số ít hoạt động giải trí như inherit, một số ít khác lại giống với initial. Ví dụ đó đây .
Keyword Revert
Nhưng nếu như nếu ta muốn reset style của thuộc tính về style gốc của trình duyệt thay vì style gốc của thuộc tính đó ? Ví dụ, đảo ngược thuộc tính display của một
về block (style của trính duyệt) chứ không phải inline (style gốc CSS) ?
div { // user agent stylesheet display: block;}Vì lý do đó, ta có một keyword CSS mới: revert. Keyword này rất giống với unset,với một điểm khác nhau duy nhất đó là revert sẽ ưu tiên style của trình duyệt so với style gốc của thuộc tính. Ví dụ:
div { display : revert ; / * = block * / } h1 { font-weight : revert ; / * = bold * / font-size : revert ; / * = 2 em * / } Theo cách này, nếu ta muốn reset toàn bộ style của một tag HTML về style gốc của trình duyệt, ta hoàn toàn có thể làm như sau :/ * Good * /. common-content * { all : revert ; } Như thế, revert cung ứng cho ta năng lực còn can đảm và mạnh mẽ hơn so với unset. Nhưng ở thời gian hiện tại, revert chỉ hoạt động giải trí trên Firefox và Safari .
Browser support
inherit – hoạt động trên tất cả các trình duyệt, bao gồm cả IE 11initial và unset – hoạt động trên tất cả trình duyệt, ngoại trừ IE 11revert – hiện giờ chỉ hoạt động trên Firefox và Safari inherit – hoạt động giải trí trên tổng thể những trình duyệt, gồm có cả IE 11 initial và unset – hoạt động giải trí trên tổng thể trình duyệt, ngoại trừ IE 11 revert – hiện giờ chỉ hoạt động giải trí trên Firefox và Safari
Source: https://final-blade.com
Category: Kiến thức Internet
