![[Học CSS] Reset CSS là gì và vì sao nên reset CSS](/upload/post/2023/05/26/hoc-css-reset-css-la-gi-va-vi-sao-nen-reset-css-20230526172648-535555.jpg)
Tìm hiểu về kỹ thuật reset CSS. Reset CSS sẽ giúp bạn đưa tất cả các giá trị của phần tử HTML về 0 để dễ dàng viết lại như ý muốn.
Reset CSS
Nếu đã học qua về HTML, thì chắc bạn cũng biết là trình duyệt sẽ tự động mặc định hiển thị một số thẻ HTML thành một đoạn văn bản đã được markup đầy đủ. Ngoài ra, nó cũng mặc định thêm một số quy tắc trên trang tài liệu web HTML như có chứa padding, margin... Và một điều quan trọng nữa, là mỗi loại trình duyệt đều có những quy tắc riêng nên việc hiển thị mặc định sẽ không giống nhau.
Thế nên, khi viết CSS cho website bạn nên đưa mọi giá trị của các phần tử có trong website về bằng 0 và xóa một số định dạng có sẵn để khi cần chỉ việc dùng CSS viết lại theo ý của mình. Điều này sẽ giúp đảm bảo nó hiển thị tốt trên tất cả các trình duyệt và quá trình này người ta gọi là "Reset CSS".
![[Học CSS] Reset CSS là gì và vì sao nên reset CSS](/upload/post/2023/05/26/hoc-css-reset-css-la-gi-va-vi-sao-nen-reset-css-20230526173003-249398.jpg "[Học CSS] Reset CSS là gì và vì sao nên reset CSS")
Vậy làm sao để reset CSS?
Nếu bạn muốn tự reset CSS, thì đơn giản nhất là viết đoạn bên dưới vào tập tin CSS là có thể đưa toàn bộ giá trị liên quan tới Box Model về 0.
*{padding:0;margin:0;border:none;}
Nhưng việc này lại chưa được tối ưu lắm, thay vào đó bạn nên nhờ đến sự hỗ trợ từ các bộ reset CSS có sẵn mà nhiều designer hay developer chuyên nghiệp thường sử dụng.
Một số bộ reset CSS thông dụng
Việc sử dụng các bộ reset CSS thông dụng dưới đây sẽ giúp bạn phần nào tiết kiệm được thời gian mà vẫn đảm bảo khả năng tối ưu. Cách sử dụng chủ yếu chỉ là copy code bỏ vào đầu file CSS của bạn.
normalize.css
Đây được xem là bộ reset CSS thông dụng nhất hiện tại, phù hợp với cả HTML5 và CSS3.
Đặc điểm của bộ này là sẽ điều chỉnh các phần tử trong website hiển thị phù hợp với tất cả các trình duyệt thông dụng, xóa bỏ toàn bộ margin và padding mặc định, có sẵn style cho các thẻ khá có ích như <sub>, <sup>, <code>...
Bạn có thể xem thêm các lý do nên sử dụng normalize.css tại đây nhé!
![[Học CSS] Reset CSS là gì và vì sao nên reset CSS](/upload/post/2023/05/26/hoc-css-reset-css-la-gi-va-vi-sao-nen-reset-css-20230526172649-352131.jpg "[Học CSS] Reset CSS là gì và vì sao nên reset CSS")
Reset CSS 2.0 by Eric Meyer
Trong quá trình làm việc, nếu cần một đoạn reset CSS đưa toàn bộ các phần tử website về "thời cổ đại" mà không có bất kỳ một định dạng gì thì có thể sử dụng bộ này.
Bộ reset CSS này thích hợp cho những ai muốn tự mình viết lại CSS cho toàn bộ các thành phần trong website, kể cả việc setup lại kích thước chữ cho các thẻ tiêu đề.
Nói chung, khi viết CSS cho website thì bạn cần nhớ sử dụng các bộ reset CSS để thuận tiện hơn trong việc xây dựng giao diện đúng với ý mình nhất.
Tự Học Lập Trình khuyến khích bạn nên ưu tiên sử dụng bộ normalize.css, bởi nó vừa gọn nhẹ mà lại đỡ tốn công viết CSS cho các thành phần không cần thiết khi thực hiện viết thủ công.
