Ngược lại với kế thừa trong css là gì?
|
CSS có các từ khóa mặc định cho các giá trị khác nhau. Trong bài viết này tôi sẽ nói về ba trong số họ. /* Bad */1, /* Bad */2, và cái tương đối mới, /* Bad */3 Show
Có một cơ hội tốt là mặc dù hầu hết các nhà phát triển web đã gặp phải chúng, nhưng nhiều người trong số những người có kinh nghiệm nhất cũng không hiểu hết về chúng Trong một thời gian dài, điều duy nhất tôi biết về những từ khóa này là chúng được sử dụng để đặt lại kiểu trong CSS. Nhưng nếu tất cả những từ khóa đó là một loại thiết lập lại, thì tại sao lại có nhiều từ khóa như vậy? Các kiểu cơ bản của webTrước khi chúng tôi bắt đầu hiểu các từ khóa CSS, điều quan trọng là phải hiểu chúng tôi lấy các kiểu cơ bản từ đâu trong trình duyệt của mình Giá trị ban đầu của mọi thuộc tính trong CSSMọi thuộc tính của CSS đều có giá trị ban đầu. Giá trị ban đầu này không có kết nối với loại phần tử HTML được áp dụng cho Một ví dụ từ MDN về giá trị /* Bad */1 Các kiểu trình duyệt tác nhân người dùngSau khi áp dụng các kiểu ban đầu của tất cả các thuộc tính CSS, trình duyệt sẽ tải các kiểu của nó. Các kiểu này không liên quan gì đến các giá trị ban đầu cơ bản của các thuộc tính CSS Một ví dụ về kiểu tác nhân người dùng Các phần tử HTML không có giá trị kiểu dáng ban đầu. Các kiểu cơ bản của phần tử HTML, chẳng hạn như thẻ .some-class{ 0 chẳng hạn, xuất phát từ biểu định kiểu tác nhân người dùng của trình duyệt chứ không phải từ giá trị /* Bad */1 của các thuộc tính của CSS Bây giờ hãy bắt đầu nói về các từ khóa CSS Từ khóa người thừa kếGiá trị từ khóa của /* Bad */2 yêu cầu trình duyệt tìm kiếm giá trị của phần tử cha gần nhất và để phần tử hiện tại kế thừa giá trị đó. Nếu cha gần nhất có giá trị cố hữu, trình duyệt sẽ tiếp tục đi lên DOM cho đến khi tìm thấy giá trị nào đó. Nếu không có bất kỳ giá trị nào, trình duyệt sẽ sử dụng kiểu tác nhân người dùng của nó và nếu không có bất kỳ kiểu tác nhân người dùng nào, trình duyệt sẽ sử dụng kiểu cơ sở /* Bad */1Từ khóa ban đầu CSS Để hiểu từ khóa /* Bad */1, chúng ta phải nhớ một sự thật quan trọng. Mọi thuộc tính trong CSS đều có giá trị mặc định, không liên quan gì đến giá trị mặc định của tác nhân người dùng. Kiểu tác nhân người dùng là kiểu cơ bản mà trình duyệt áp dụng cho các phần tử HTML trong trình duyệt. Chúng tôi có xu hướng nghĩ rằng chúng tự động đến với HTML, nhưng chúng không Từ khóa /* Bad */1 yêu cầu trình duyệt sử dụng giá trị mặc định CSS của thuộc tính đã cho. Ví dụ
Hành vi này có thể rất khó hiểu vì như chúng tôi đã nói trước đây, giá trị mặc định của thuộc tính CSS không nhất thiết phải là giá trị mặc định mà trình duyệt xác định cho một phần tử. Ví dụ: giá trị /* Bad */1 của thuộc tính /* Bad */0 là /* Bad */1, cho tất cả các phần tử. Do đó, nếu một phần tử /* Bad */2 nhận được giá trị /* Bad */1 trên thuộc tính /* Bad */0 của nó, thì màn hình của nó sẽ là /* Bad */1 chứ không phải /* Bad */6, đó là kiểu tác nhân người dùng của nó Thí dụ div.box{ Một ví dụ trên CodePen của thuộc tính hiển thị Ban đầu trên phần tử div Từ khóa /* Bad */3 độc đáo ở chỗ nó hoạt động khác nhau trên các loại thuộc tính khác nhau. Trong CSS, có hai loại thuộc tính
Giá trị /* Bad */3 hoạt động giống như /* Bad */2 đối với các loại thuộc tính kế thừa. Ví dụ: đối với thuộc tính văn bản .some-class{ 6, thuộc tính này sẽ hoạt động giống như giá trị /* Bad */2, nghĩa là tìm kiếm phần tử cha có định nghĩa cho thuộc tính và nếu không tìm thấy thuộc tính nào — hãy sử dụng giá trị tác nhân người dùng và nếu không có Đối với các thuộc tính không được kế thừa, giá trị /* Bad */3 sẽ hoạt động giống như giá trị /* Bad */1, tức là áp dụng giá trị mặc định của CSS; .some-class{ Tại sao lại sử dụng Unset nếu nó hoạt động chính xác như Inherit và Initial?Nếu các hoạt động không được đặt như /* Bad */1 và /* Bad */2, tại sao chúng tôi muốn sử dụng /* Bad */3? Nếu chúng tôi chỉ đặt lại một thuộc tính thì không cần thiết phải đặt lại /* Bad */3. thay vào đó, chúng ta chỉ có thể sử dụng các giá trị /* Bad */2 hoặc /* Bad */1 Nhưng ngày nay chúng ta có một thuộc tính mới có tên là .some-class{ 66 mang theo một khả năng mới. để đặt lại tất cả các thuộc tính được kế thừa và các thuộc tính không được kế thừa cùng một lúcTheo cách mới này, bạn không cần phải đặt lại từng thuộc tính. Do đó, Áp dụng giá trị /* Bad */3 cho thuộc tính .some-class{ 66 sẽ đặt lại tất cả các thuộc tính kế thừa thành /* Bad */2 và tất cả các thuộc tính không được kế thừa thành .some-class{ 80Đây là lý do duy nhất cho sự tồn tại của giá trị từ khóa .some-class{ 81 mới. Mặt khác, chúng ta có thể sử dụng các giá trị .some-class{ 82 và .some-class{ 83 để thay thếThay vì đặt lại từng thuộc tính một, ví dụ /* Bad */ Ví dụ, chúng ta có thể sử dụng thuộc tính .some-class{ 66 mới với giá trị /* Bad */3, điều này sẽ ảnh hưởng đến tất cả các thuộc tính hiện có .some-class{ 2Tôi đã viết một ví dụ nhỏ để minh họa cách các thuộc tính hoạt động khi sử dụng thuộc tính .some-class{ 66 với giá trị /* Bad */3. một số hành động như thể giá trị /* Bad */2 đã được áp dụng và một số - như thể giá trị /* Bad */1 đã được áp dụng. Ví dụ về CodePen của /* Bad */10Hoàn nguyên từ khóa Nhưng nếu chúng ta muốn đặt lại kiểu của thuộc tính về kiểu tác nhân người dùng ban đầu chứ không phải kiểu cơ sở của thuộc tính thì sao? Vì vậy, chúng tôi sẽ sớm nhận được một từ khóa CSS mới. /* Bad */15. Từ khóa /* Bad */15 rất giống với /* Bad */3, điểm khác biệt duy nhất là nó ưu tiên kiểu của tác nhân người dùng hơn kiểu cơ bản của thuộc tính CSS. Ví dụ .some-class{ 6Bằng cách này nếu chúng ta muốn đặt lại tất cả các kiểu của thẻ HTML về kiểu cơ sở của trình duyệt, chúng ta có thể làm như thế này Sự khác biệt giữa kế thừa và khởi tạo trong CSS là gì?kế thừa. Lấy thuộc tính từ phần tử cha. ban đầu. Giá trị mặc định cho thuộc tính (mặc định của trình duyệt) . bỏ đặt. Hoạt động như một trong hai kế thừa hoặc ban đầu. Nó sẽ hoạt động như kế thừa nếu cha mẹ có giá trị phù hợp, nếu không, nó sẽ hoạt động như ban đầu.
Kế thừa nghĩa là gì trong CSS?Từ khóa CSS inherit làm cho phần tử lấy giá trị tính toán của thuộc tính từ phần tử cha của nó . Nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, kể cả thuộc tính tốc ký CSS all. Đối với các thuộc tính kế thừa, điều này củng cố hành vi mặc định và chỉ cần thiết để ghi đè một quy tắc khác.
Tự động và kế thừa trong CSS là gì?auto - Trình duyệt tính chiều cao. Đây là mặc định. inherit - Chỉ định rằng giá trị của thuộc tính chiều cao sẽ được kế thừa từ phần tử cha .
Tất cả các thuộc tính CSS có được kế thừa không?Chỉ một số thuộc tính được kế thừa
. Trên thực tế, nếu tất cả các thuộc tính đều được kế thừa, hiệu ứng sẽ tương tự như không có sự kế thừa nào cả và bạn sẽ phải viết rất nhiều CSS để ghi đè hành vi này. not every CSS property is inherited by default by child elements. In fact, if all properties were inherited, the effect would be similar to having no inheritance at all and you would have to write a lot of CSS to override this behavior. |
