HTML/CSS | Reset CSS là gì?

Học HTML, CSS từ Zero Tới Hero
  • Reset CSS là gì?
  • Cách reset CSS
  • Reset CSS với Meyerweb
  • Reset CSS với Github normalize

Trang web sử dụng trong bài học:

Reset CSS là gì?

Reset CSS là ghi đè, chuẩn hóa lại các thuộc tính mặc định của trình duyệt, đảm bảo trên các trình duyệt khác nhau các thuộc tính CSS vẫn hoạt động giống nhau.

Khi phát triển website, inspect trình duyệt bạn sẽ thấy có những thuộc tính có nhãn user agent stylesheet. Đấy chính là các thuộc tính được trình duyệt tự động thêm vào.

Xem thêm ví dụ:

image.png

Đa số các thuộc tính sẽ hoạt động giống nhau trên các trình duyệt. Tuy nhiên, cũng sẽ có một số thuộc tính hoạt động khác nhau khi khác trình duyệt. Điều này có thể tạo nên kết quả không mong muốn.

Vì vậy, khi lập trình website các nhà phát triển cần reset CSS để website có thể hoạt động tốt trên các trình duyệt.

Cách reset CSS

Để reset CSS, có thể tham khảo code tại:

Reset CSS với Meyerweb

Truy cập Meyerweb, kéo xuống dưới cho tới khi thấy đoạn code như hình ảnh:

image.png

Tiếp tục thực hiện các bước sau:

  1. Mở phần mềm VS Code, tạo file có tên reset.css.
  2. Copy code tại Meyerweb, dán vào file reset.css và lưu lại.
  3. Tại file index.html, liên kết file reset.css vào.

Reset CSS với Github normalize

Để reset CSS với Github normalize, thực hiện các bước sau:

  1. Truy cập Github normalize
  2. Mở phần mềm VS Code, tạo file có tên reset.css.
  3. Copy code tại Github normalize, dán vào file reset.css và lưu lại.
  4. Tại file index.html, liên kết file reset.css vào.

Luôn đặt file reset.css ở vị trí trên cùng trước khi sử dụng các CSS khác để tránh các thuộc tính CSS tại file reset.css ghi đè các thuộc tính CSS do bạn viết.

Tóm tắt

  • Reset CSS là đặt lại, chuẩn hóa lại các thuộc tính CSS nhằm đảm bảo các thuộc tính hoạt động giống nhau trên nhiều trình duyệt.
  • Luôn đặt file reset.css ở vị trí trên cùng trước khi sử dụng các CSS khác. Điều này nhằm tránh các thuộc tính CSS trong reset.css ghi đè các thuộc tính CSS do bạn viết.

Nhận xét

Mới hơn Cũ hơn