Hướng dẫn css not inherit - css không kế thừa

• Techblog
• Thủ thuật

Inherit, initial và unset là 3 giá trị thường được sử dụng bởi các web developer để reset style 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 tới nhầm lẫn và sử dụng không hiệu quả. Trong bài viết này, Bizfly Cloud sẽ tìm hiểu về inherit, initial và unset trong CSS và học cách sử dụng chúng thành thục nhất.Bizfly Cloud sẽ tìm hiểu về inherit, initial và unset trong CSS và học cách sử dụng chúng thành thục nhất.

Sự khác nhau giữa initial, inherit và unset

Mỗi thuộc tính CSS thường có 3 giá trị là inherit, initial và unset. Mặc dù inherit và initial đã ra đời từ rất lâu, thì unset là một khái niệm mới được bổ sung trong thời gian trở lại đây. Về cơ bản thì:

- Inherit: kế thừa thuộc tính của các phần tử cha gần nó nhất (parent element).Inherit: kế thừa thuộc tính của các phần tử cha gần nó nhất (parent element).

- Initial: sử dụng style mặc định của trình duyệt.Initial: sử dụng style mặc định của trình duyệt.

- Unset: khi đặt giá trị của thuộc tính là unset, trình duyệt sẽ sử dụng một trong hai thuộc tính inherit hoặc initial tùy thuộc vào thuộc tính của phần tử cha. Nếu phần tử cha có các thuộc tính đó, nó sẽ kế thừa (inherit) giá trị thuộc tính từ phần tử cha, nếu không có thì unset sẽ sử dụng giá trị mặc định của trình duyệt (initial).Unset: khi đặt giá trị của thuộc tính là unset, trình duyệt sẽ sử dụng một trong hai thuộc tính inherit hoặc initial tùy thuộc vào thuộc tính của phần tử cha. Nếu phần tử cha có các thuộc tính đó, nó sẽ kế thừa (inherit) giá trị thuộc tính từ phần tử cha, nếu không có thì unset sẽ sử dụng giá trị mặc định của trình duyệt (initial).

Để dễ hiểu hơn, hãy xem xét ví dụ:

HTML:

CSS:

  Komodo Dragon

.wrapper { color: orange; }

.wrapper p { color: purple; }

p.one { color: inherit; }

p.two { color: initial; }

p.three { color: unset; }

Kết quả trả về:Snake có màu cam, nó đã thừa kế giá trị này từ div wrapper => Inherit

-  Snake có màu cam, nó đã thừa kế giá trị này từ div wrapper => InheritLizard có màu đen, nó sử dụng style mặc định của trình duyệt => Initial

-  Lizard có màu đen, nó sử dụng style mặc định của trình duyệt => InitialAlligator có màu cam, trong trường hợp này unset hoạt động như inherit bởi vì parent element (wrapper) có thuộc tính color.

-  Alligator có màu cam, trong trường hợp này unset hoạt động như inherit bởi vì parent element (wrapper) có thuộc tính color.Komodo Dragon màu tím, đây là đoạn paragraph duy nhất lấy giá trị từ .wrapper p

-  Komodo Dragon màu tím, đây là đoạn paragraph duy nhất lấy giá trị từ .wrapper p

Trên đây là những nét chính về inherit, initial và unset. Để tìm hiểu kỹ hơn, ta cần nắm rõ các style cơ bản hiển thị trên trình duyệt.

Các style cơ bản

Style gốc của thuộc tính CSS

Mỗi thuộc tính CSS đều có một style gốc (initial style). Dù cho bạn sử dụng một thuộc tính CSS cho bất kỳ phần tử HTML nào thì style gốc của thuộc tính vẫn không thay đổi.

Giá trị mặc định của thuộc tính line-height là normal.

Style của trình duyệt phía user

Sau khi áp dụng style gốc của tất cả CSS trong một trang web, trình duyệt sẽ load style của riêng nó.

Mỗi trình duyệt khác nhau có style mặc định khác nhau (Chrome, Firefox, Edge,…). Lưu ý là giá trị này của browser hoàn toàn không liên quan tới style gốc của CSS.

Dưới đây là một ví dụ về style của trình duyệt phía người dùng:

) mà chúng ta nhìn thấy trên web, thực chất chính là style mặc định của trình duyệt.Một lưu ý khác là bản thân các nguyên tố HTML không có style! Các style cơ bản của một nguyên tố HTML (ví dụ thẻ ) mà chúng ta nhìn thấy trên web, thực chất chính là style mặc định của trình duyệt.Ok, bây giờ hãy cùng tìm hiểu về các keyword "inherit", "initial" và "unset".

Initial, inherit, unset trong CSS hoạt động như thế nào?

Inherit trong CSS

Inherit còn được gọi là kế thừa giá trị. Khi sử dụng inherit trong CSS, trình duyệt sẽ tìm kiếm giá trị từ thành phần HTML cha gần nó nhất và sử dụng lại giá trị đó. Nếu như phần tử cha cũng có giá trị là inherit, thì trình duyệt sẽ tiếp tục đi lên cho tới khi tìm thấy một giá trị nào đó. Nếu không có giá trị nào, nó sẽ sử dụng style của trình duyệt. Nếu vẫn không có, nó sẽ sử dụng style mặc định của CSS đã đề cập ở trên.

Initial trong CSS

Để hiểu initial, có 2 điều cần chú ý:

- Mỗi thuộc tính CSS đều có style gốc, hoàn toàn không liên quan tới Style của trình duyệt.

- Khi tải trang web, trình duyệt sẽ mặc định sử dụng style của nó làm mặc định.initial".

Vậy, trong trường hợp chúng ta không muốn sử dụng style mặc định của trình duyệt, mà muốn sử dụng style gốc của CSS, thì khi đó ta cần tới "initial".

Initial ra lệnh cho trình duyệt sử dụng giá trị gốc của mỗi thuộc tính CSS. Ví dụ:initial của thuộc tính color luôn là black.

- Giá trị initial của thuộc tính color luôn là black.initial của thuộc tính display luôn là inline. => Trường hợp này khá đặc biệt. Bởi vì giá trị mặc định của trình duyệt (user agent style) dành cho thẻ display lại là block. Chính vì thế, nếu bạn không sử dụng initial, thì trình duyệt sẽ mặc định hiển thị dạng block. Ngược lại, nếu sử dụng initial cho bất kỳ thẻ

nào, thì nó sẽ gọi ra giá trị mặc định của thuộc tính display là inline.

- Giá trị initial của thuộc tính display luôn là inline. => Trường hợp này khá đặc biệt. Bởi vì giá trị mặc định của trình duyệt (user agent style) dành cho thẻ display lại là block. Chính vì thế, nếu bạn không sử dụng initial, thì trình duyệt sẽ mặc định hiển thị dạng block. Ngược lại, nếu sử dụng initial cho bất kỳ thẻ nào, thì nó sẽ gọi ra giá trị mặc định của thuộc tính display là inline.

Unset trong CSS là một keyword đặc biệt, bởi vì nó có giá trị khác nhau trong những trường hợp khác nhau. Trong CSS, có hai loại thuộc tính:

Unset là một keyword đặc biệt, bởi vì nó có giá trị khác nhau trong những trường hợp khác nhau. Trong CSS, có hai loại thuộc tính:Thuộc tính kế thừa (inherited properties): là những thuộc tính ảnh hưởng tới thuộc tính con của nó. Tất cả các thuộc tính ảnh hưởng tới text đều là thuộc tính kế thừa. Ví dụ, nếu chúng ta chọn font-size 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 kế thừa (non-inherited properties): là tất cả những thuộc tính mà chỉ ảnh hưởng tới một phần tử mà nó define. Tất cả các thuộc tính không ảnh hưởng tới text đều là thuộc tính không kế thừa. Ví dụ, nếu bạn set border cho một phần tử cha, thì phần tử con sẽ không có border (không bị ảnh hưởng).Thuộc tính không kế thừa (non-inherited properties): là tất cả những thuộc tính mà chỉ ảnh hưởng tới một phần tử mà nó define. Tất cả các thuộc tính không ảnh hưởng tới text đều là thuộc tính không kế thừa. Ví dụ, nếu bạn set border cho một phần tử cha, thì phần tử con sẽ không có border (không bị ảnh hưởng).

Quay trở về unset, nó sẽ hoạt động giống inherit cho những thuộc tính kế thừa (inherited properties). Ví dụ, với thuộc tính text-color, unset sẽ buộc trình duyệt phải tìm ngược lên các giá trị text-color của các phần tử cha.unset, nó sẽ hoạt động giống inherit cho những thuộc tính kế thừa (inherited properties). Ví dụ, với thuộc tính text-color, unset sẽ buộc trình duyệt phải tìm ngược lên các giá trị text-color của các phần tử cha.

Với những thuộc tính không kế thừa, unset sẽ có giá trị tương đương với initial. Ví dụ, với thuộc tính border color, unset sẽ gọi ra giá trị gốc của CSS (initial style).thuộc tính không kế thừa, unset sẽ có giá trị tương đương với initial. Ví dụ, với thuộc tính border color, unset sẽ gọi ra giá trị gốc của CSS (initial style).

.some-class{

color: unset; /* hoạt động như 'inherit' */

display: unset; /* hoạt động như 'initial' */

}

Tại sao phải sử dụng unset nếu nó hoạt động giống inherit và initial?

Rất đơn giản, nếu chúng ta chỉ reset một thuộc tính duy nhất, thì không cần unset. Chỉ cần sử dụng inherit hoặc initial là đủ.

Tuy nhiên ngày nay, chúng ta có một thuộc tính mới là all. Với thuộc tính này, ta có thể reset toàn bộ thuộc tính kế thừa và thuộc tính không kế thừa cùng lúc.all. Với thuộc tính này, ta có thể reset toàn bộ thuộc tính kế thừa và thuộc tính không kế thừa cùng lúc.

Bằng cách này, bạn không cần phải reset từng thuộc tính một. Thay vào đó, sử dụng all: unset sẽ giúp bạn reset toàn bộ các thuộc tính kế thừa thành inherit, và thuộc tính không kế thừa thành initial.all: unset sẽ giúp bạn reset toàn bộ các thuộc tính kế thừa thành inherit, và thuộc tính không kế thừa thành initial.

Đây là lý do duy nhất mà giá trị unset ra đời!unset ra đời!

Ví dụ, thay vì reset từng thuộc tính một:

.common-content *{

font-size: inherit;

font-weight: inherit;border-width: initial;

background-color: initial;

}

Tại sao phải sử dụng unset nếu nó hoạt động giống inherit và initial?

.common-content *{

font-size: inherit;

}

Tại sao phải sử dụng unset nếu nó hoạt động giống inherit và initial?

Rất đơn giản, nếu chúng ta chỉ reset một thuộc tính duy nhất, thì không cần unset. Chỉ cần sử dụng inherit hoặc initial là đủ.

Tuy nhiên ngày nay, chúng ta có một thuộc tính mới là all. Với thuộc tính này, ta có thể reset toàn bộ thuộc tính kế thừa và thuộc tính không kế thừa cùng lúc.

từ inline (CSS base style) về dạng block (user-agent style) thì làm thế nào?

Bằng cách này, bạn không cần phải reset từng thuộc tính một. Thay vào đó, sử dụng all: unset sẽ giúp bạn reset toàn bộ các thuộc tính kế thừa thành inherit, và thuộc tính không kế thừa thành initial.revert sẽ tương tự với unset, điểm khác biệt duy nhất là nó ưu tiên style của trình duyệt hơn style gốc của CSS. Ví dụ, thay vì sử dụng:

div{

Đây là lý do duy nhất mà giá trị unset ra đời!

}

h2{

Tại sao phải sử dụng unset nếu nó hoạt động giống inherit và initial?

Rất đơn giản, nếu chúng ta chỉ reset một thuộc tính duy nhất, thì không cần unset. Chỉ cần sử dụng inherit hoặc initial là đủ.

}

Tại sao phải sử dụng unset nếu nó hoạt động giống inherit và initial?

.common-content *{

font-size: inherit;

}

Tại sao phải sử dụng unset nếu nó hoạt động giống inherit và initial?

Rất đơn giản, nếu chúng ta chỉ reset một thuộc tính duy nhất, thì không cần unset. Chỉ cần sử dụng inherit hoặc initial là đủ.

Tuy nhiên ngày nay, chúng ta có một thuộc tính mới là all. Với thuộc tính này, ta có thể reset toàn bộ thuộc tính kế thừa và thuộc tính không kế thừa cùng lúc.: hoạt động trên tất cả các trình duyệt, bao gồm cả IE 11

Bằng cách này, bạn không cần phải reset từng thuộc tính một. Thay vào đó, sử dụng all: unset sẽ giúp bạn reset toàn bộ các thuộc tính kế thừa thành inherit, và thuộc tính không kế thừa thành initial. và unset: hoạt động trên tất cả trình duyệt, ngoại trừ IE 11

Đây là lý do duy nhất mà giá trị unset ra đời!: hiện giờ chỉ hoạt động trên Firefox và Safari

Ví dụ, thay vì reset từng thuộc tính một:

.common-content *{

font-size: inherit;

Đọc tiếp