Hành trình trở thành chuyên gia CSS với Keith Grant - Ngày 007
Tiếp tục từ Ngày 006, Keith sẽ đề cập đến các khái niệm về Layer và Scope proximity trong các chương tiếp theo. Hôm nay, chúng ta sẽ cùng tìm hiểu về Kế thừa và Giá trị đặc biệt trong CSS.
1. Kế thừa trong CSS
Kế thừa là giá trị mặc định mà các phần tử con nhận từ phần tử cha của chúng. Giá trị kế thừa có nghĩa là một khai báo “chiến thắng” trong chuỗi cascades, hoặc là cụ thể hơn sau khi xung đột được giải quyết.
1.1 Cách thức hoạt động của kế thừa
Kế thừa diễn ra theo chiều từ trên xuống. Một số thuộc tính của phần tử <html> sẽ được kế thừa bởi phần tử <body> và các phần tử con tiếp theo. Việc hiểu rõ các thuộc tính nào được kế thừa là rất quan trọng trong việc giải quyết các vấn đề liên quan đến cascade. Dưới đây là danh sách toàn diện các thuộc tính được kế thừa từ phần tử cha và các phần tử con, hãy lưu lại để tham khảo nhé!
2. Giá trị đặc biệt trong CSS
Keith đã đề cập đến bốn giá trị đặc biệt: inherit, initial, unset, và revert. Những giá trị này có thể được áp dụng cho bất kỳ thuộc tính nào.
2.1 Giá trị inherit
Giá trị inherit cho phép kế thừa thuộc tính từ phần tử cha ngay cả khi thuộc tính đó không được kế thừa theo mặc định. Ví dụ, nếu bạn muốn một phần tử <a> kế thừa màu sắc từ phần tử cha, bạn có thể sử dụng inherit.
Ví dụ:
html
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header class="page-header">
<h1 id="page-title" class="title">Hành trình trở thành chuyên gia CSS</h1>
<nav>
<ul id="main-nav" class="nav">
<li><a href="/">Trang chủ</a></li>
<li><a href="/easy">Dễ</a></li>
<li><a href="/intermediate">Trung cấp</a></li>
<li><a href="/pro" class="featured">Chuyên nghiệp</a></li>
</ul>
</nav>
</header>
</body>
</html>Khi áp dụng phong cách:
css
.page-header {
color: green;
}
a {
color: inherit;
}Kết quả sẽ là màu sắc của các phần tử <h1>, <ul>, và <li> sẽ kế thừa thuộc tính màu sắc từ phần tử cha, trong khi phần tử <a> sẽ nhận màu sắc bằng cách sử dụng inherit.
2.2 Giá trị initial
Giá trị initial sẽ đặt lại giá trị của một thuộc tính về giá trị mặc định (theo đặc tả), không nhất thiết phải là giá trị mặc định của trình duyệt. Ví dụ, đối với phần tử <a>, theo đặc tả, giá trị mặc định của color là CanvasText (thường là màu đen hoặc màu tối).
Khi áp dụng giá trị initial:
css
.page-header {
color: green;
}
a {
color: initial;
}Kết quả sẽ bỏ qua kiểu mặc định của trình duyệt và quay trở về kiểu theo đặc tả.
2.3 Giá trị unset
Giá trị unset kết hợp giữa initial và inherit. Khi áp dụng:
- Đối với thuộc tính kế thừa, nó sẽ đặt giá trị thành
inherit. - Đối với thuộc tính không kế thừa, nó sẽ đặt giá trị thành
initial.
Ví dụ:
css
.page-header {
color: green;
}
a {
color: unset;
}Nếu color không phải là thuộc tính được kế thừa, nó sẽ được đặt về giá trị initial.
2.4 Giá trị revert
Giá trị revert đặt lại giá trị của thuộc tính về giá trị mà nó sẽ có nếu không có khai báo nào từ nguồn cascade hiện tại. Nếu khai báo sử dụng revert đến từ tác giả, nó sẽ bỏ qua khai báo của tác giả và quay trở về khai báo cấp người dùng (nếu có).
Khi áp dụng:
css
.page-header {
color: green;
}
a {
color: revert;
}Kết quả sẽ là màu sắc của phần tử <a> sẽ trở về kiểu mặc định của trình duyệt.
3. Thực hành tốt nhất khi sử dụng kế thừa và giá trị đặc biệt
- Nên sử dụng
inheritcho các thuộc tính bạn muốn kế thừa một cách rõ ràng, đặc biệt là khi làm việc với các thành phần phức tạp. - Sử dụng
initialđể đảm bảo rằng bạn quay trở lại giá trị mặc định của một thuộc tính khi cần thiết. - Hãy cẩn thận với
unsetvì nó có thể dẫn đến những hành vi không mong muốn nếu bạn không hiểu rõ mô hình kế thừa. revertlà một công cụ mạnh mẽ nhưng cũng cần được sử dụng thận trọng để tránh xung đột với các khai báo khác.
4. Những điều cần tránh
- Không nên lạm dụng các giá trị đặc biệt mà không hiểu rõ tác động của chúng đến kiểu dáng của trang.
- Đừng quên kiểm tra cách mà các thuộc tính được kế thừa trong các trình duyệt khác nhau, vì điều này có thể thay đổi hành vi của trang web.
5. Mẹo về hiệu suất
- Hạn chế việc sử dụng quá nhiều giá trị kế thừa và đặc biệt, vì điều này có thể làm giảm hiệu suất tải trang.
- Sử dụng các công cụ kiểm tra để theo dõi hiệu suất và đảm bảo rằng các thuộc tính CSS không gây ra độ trễ khi tải trang.
6. Giải quyết sự cố
Nếu bạn gặp vấn đề với việc kế thừa thuộc tính CSS:
- Kiểm tra xem có khai báo nào khác đang ghi đè lên thuộc tính đó không.
- Sử dụng công cụ phát triển của trình duyệt để theo dõi các thuộc tính đã được áp dụng cho phần tử.
7. Kết luận
Tôi tin rằng ai cũng có thể trở thành một chuyên gia CSS. Qua bài học này, bạn đã hiểu rõ hơn về kế thừa và các giá trị đặc biệt trong CSS. Hãy thực hành những gì bạn đã học và tiếp tục chinh phục thế giới CSS!
Câu hỏi thường gặp (FAQ)
-
Kế thừa trong CSS là gì?
Kế thừa trong CSS là quá trình mà các phần tử con nhận giá trị thuộc tính từ phần tử cha của chúng. -
Giá trị
inherit,initial,unset, vàrevertcó khác nhau như thế nào?
inherit: Kế thừa thuộc tính từ cha.initial: Đặt lại về giá trị mặc định.unset: Kết hợp giữainheritvàinitial.revert: Quay trở về giá trị của thuộc tính trước khi có khai báo hiện tại.
- Tôi có thể sử dụng các giá trị này cho tất cả các thuộc tính không?
Có, nhưng hãy cẩn thận với cách chúng ảnh hưởng đến kiểu dáng tổng thể của trang.
Hãy tiếp tục theo dõi hành trình của tôi để trở thành một chuyên gia CSS trong các bài học tiếp theo!
