Khi mới bắt đầu sử dụng file reset.css để đưa các giá trị như margin, padding,... về mặc định, thì mình đã gặp một lỗi mà loay hoay một hồi lâu vẫn không sửa được, lỗi này làm cho mình khi code css không thể nào dùng thuộc tính margin, padding cho thẻ h2 (đây là thẻ mà mình gặp lỗi, các bạn sẽ có thể gặp phải ở các thẻ block khác), và sau đó mình đã tìm ra nguyên nhân ở file index.html (file html chứa đối tượng đang gặp lỗi), và sửa lỗi này trong một nốt nhạc.
Ở đây mình sai ở việc khi đặt thẻ link reset.css ở bên dưới thẻ link style.css (thẻ css chung của trang). Theo nguyên tắc độ ưu tiên trong css/html thì thẻ nào được code sau (mới hơn/nằm bên dưới) sẽ ưu tiên áp dụng thuộc tính của thẻ đó trước.
Việc sửa này rất đơn giản, bạn chỉ cần đưa thẻ link chứa file reset.css lên trên thẻ link chứa file style.css là có thể sửa được lỗi này. Mục đích của việc đưa thẻ link chứa file style.css là để khi chúng ta sử dụng các thuộc tính mới trong file style.css thì nó sẽ đè lên thay đổi giá trị mà chúng ta đã reset.
Đây là cách đặt đúng vị trí của 2 thẻ
<link rel="stylesheet" href="./reset.css" />
<link rel="stylesheet" href="./style.css" />
Ở bài viết này mình đã sử dụng bố cục file trong VS code như sau: 1 file index.html (file chứa tất cả thẻ html), 1 file style.css (file chứa tất cả thuộc tính css), 1 file reset.css (đưa các thuộc tính css về mặc định)
Chúc các bạn thành công!
File reset.css là gì?
CSS Reset là một loại các quy tắc của CSS giúp thiết lập các style của tất cả đối tượng HTML (element) theo một chuẩn nhất định để có thể chạy ổn định trên mọi trình duyệt.
Share on
