Hướng dẫn Tìm hiểu Reset CSS và vì sao nên reset CSS

[PVS]

Tìm hiểu Reset CSS và vì sao nên reset CSS

Bạn học HTML thì chắc cũng thừa biết là mặc định trình duyệt đã tự 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 thì 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 cái quan trọng 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.

Do vậy khi viết CSS cho website, bạn nên đưa tất cả các giá trị của các phần tử trên website về bằng 0 hết và xóa một số định dạng có sẵn để khi cần chúng ta sẽ dùng CSS viết lại theo ý của mình để đảm bảo nó hiển thị tốt trên tất cả các trình duyệt. Việc làm này người ta gọi là Reset CSS.

Reset CSS như thế nào?
Nếu bạn muốn tự reset CSS đơn giản nhất thì hãy viết đoạn sau 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 như vậy có vẻ không tối ưu cho lắm, thay vì reset CSS như vậy thì chúng ta sẽ dùng các bộ Reset CSS có sẵn mà nhiều designer/developer chuyên nghiệp thường sử dụng.

Một số bộ Reset CSS thông dụng
Bạn có thể sử dụng các bộ reset CSS thông dụng dưới đây để tiết kiệm thời gian và tối ưu hơn. Cách sử dụng là copy code bỏ vào đầu file CSS của bạn.

Normalize.css
Đây 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 http://stackoverflow.com/a/8357635.

Reset CSS 2.0 by Eric Meyer
Nếu bạn cần một đoạn reset CSS đưa toàn bộ các phần tử website về “thời đồ đá”, không có bất cứ 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 thiết lập kích thước chữ cho các thẻ tiêu đề.

Lời kết
Cuối bài này, mình chỉ xin tóm gọn lại với bạn là khi viết CSS cho website thì nhớ sử dụng các bộ reset CSS để bạn thuận tiện hơn cho việc xây dựng giao diện như đúng ý của mình, mình khuyến khích bạn sử dụng bộ normalize.css vì 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 để bạn viết thủ công.

Chúc các bạn thành công.

Nguồn: thachpham.com​