HTML/CSS | Tóm tắt chương - Tính thừa kế CSS

Học HTML, CSS từ Zero Tới Hero

Chúc mừng bạn đã hoàn thành chương “Tính thừa kế CSS” 🎉

Hãy cùng nhìn lại các kiến thức đã học được trong chương này.

Tóm tắt

• Các thuộc tính CSS có nhãn user agent stylesheet là thuộc tính mặc định được trình duyệt tự động thêm vào. Bạn có thể kiểm tra được điều này thông qua DevTools.
• CSS mặc định (user agent stylesheet) có độ ưu tiên thấp nhất, bất cứ code CSS nào được viết bởi bạn (External, Internal, Inline) sẽ luôn ghi đè các thuộc tính mặc định.
• Các trình duyệt khác nhau (khác phiên bản, khác nhà cung cấp, v.v) có thể có các thuộc tính CSS mặc định khác nhau.
• Tra cứu các thuộc tính CSS mặc định của trình duyệt áp dụng lên các thẻ HTML: CSS Default Values (những giá trị là internal value phụ thuộc vào mỗi trình duyệt).
• Thừa kế trong CSS (CSS Inheritance) là các thẻ HTML con có thể thừa hưởng lại các thuộc tính CSS từ các thẻ cha.
• Có thể ghi đè (override) các thuộc tính được thừa kế bằng cách sử dụng chính thuộc tính CSS đó trên các thẻ con. Thuộc tính được thừa kế sẽ có độ ưu tiên thấp hơn so với thuộc tính được tác động trực tiếp trên phần tử.
• Chỉ các thuộc tính CSS có thông số Inherited: yes mới có tính thừa kế. Có thể tra cứu các thuộc tính CSS tại w3schools.com hoặc developer.mozilla.org với từ khóa tìm kiếm: CSS [tên thuộc tính] property.
• Giá trị được tính toán (Computed value) là các giá trị CSS cuối cùng (sau khi được tính toán) tác động trên các phần tử HTML.
• Reset CSS là công việc đặt lại các thuộc tính CSS giúp trang web hiển thị giống nhau trên các trình duyệt khác nhau. Bởi vì user agent stylesheet của các trình duyệt khác nhau có thể không giống nhau.
• Lưu ý luôn đặt Reset CSS ở trước các đoạn code CSS khác để tránh bị thuộc tính trong Reset CSS ghi đè các thuộc tính CSS của chúng ta viết.