Rate this post

CSS Reset là danh sách các quy tắc ‘Reset’ tất cả các style trình duyệt mặc định.

Reset CSS là gì?

Reset CSS là một kỹ thuật trong lập trình web nhằm xóa hoặc giảm thiểu các style mặc định của trình duyệt đối với các phần tử HTML trên trang web. Các style mặc định này có thể khác nhau giữa các trình duyệt và gây ra sự không đồng nhất trong cách hiển thị của trang web trên các trình duyệt khác nhau.

Bằng cách sử dụng Reset CSS, ta có thể đảm bảo rằng các phần tử HTML sẽ có các style cơ bản nhất định trên tất cả các trình duyệt, giúp cho việc phát triển và thiết kế trang web trở nên dễ dàng và hiệu quả hơn. Các file Reset CSS thường chứa các định nghĩa CSS cơ bản để xóa hoặc giảm thiểu các style mặc định của trình duyệt.

Tại sao cần reset CSS

Chúng ta Reset CSS trình duyệt vì hai lý do chính:

  • Không phải tất cả các trình duyệt đều áp dụng các quy tắc mặc định giống nhau. Chúng có thể giống nhau, nhưng không chính xác. Có thể khó cung cấp các thiết kế giống nhau trong mỗi trình duyệt nếu các kiểu cơ bản khác nhau.
  • Khi bạn bắt đầu thiết kế và mã hóa tất cả các chi tiết tốt của trang web của mình, bạn có thể phát hiện ra rằng nhiều việc bạn đang làm chỉ đơn giản là ghi đè các kiểu trình duyệt mặc định. Việc Reset thực hiện điều này một cách nhanh chóng để bạn không phải làm vậy.

Có rất style CSS Resets khác nhau mà chúng ta có thể sử dụng trong website. Bạn thậm chí có thể tạo của riêng bạn. Một trong hai cách Reset mà chúng tôi sẽ sử dụng này là reset của Eric Meyer, được tạo bởi chuyên gia CSS Eric Meyer.

Các bài viết liên quan:

Đây là mã trong Thiết lập lại của Meyer:

http://web.simmons.edu/~grovesd/comm244/notes/week4/reset-included.css

Cách reset css

Có nhiều cách để reset CSS, tuy nhiên phổ biến nhất là sử dụng một trong các bộ CSS Reset đã được phát triển sẵn. Bộ CSS Reset có chức năng đặt lại giá trị mặc định của các thuộc tính CSS trên trình duyệt, giúp các phần tử HTML trên trang web của bạn có thể được hiển thị đồng nhất trên các trình duyệt khác nhau.

Một số bộ CSS Reset phổ biến bao gồm:

  1. Normalize.css – Bộ CSS Reset phổ biến nhất, giúp đồng bộ hóa CSS trên các trình duyệt khác nhau. Link: https://necolas.github.io/normalize.css/
  2. Reset CSS – Bộ CSS Reset đơn giản và nhẹ, giúp xóa bỏ tất cả các kiểu mặc định của trình duyệt. Link: https://meyerweb.com/eric/tools/css/reset/
  3. CSS Reset – Bộ CSS Reset tương đối đơn giản, được thiết kế để xóa bỏ tất cả các kiểu mặc định của trình duyệt và đặt lại các thuộc tính CSS thành các giá trị đồng nhất. Link: https://cssreset.com/scripts/css-resets/

Để sử dụng các bộ CSS Reset này, bạn có thể tải xuống và thêm chúng vào tệp HTML của bạn bằng cách sử dụng thẻ <link> trong phần <head> của trang web. Sau đó, bạn có thể bắt đầu thiết kế trang web của mình với các kiểu CSS của riêng mình mà không bị ảnh hưởng bởi các giá trị mặc định của trình duyệt.

Ví dụ

Include Reset CSS

Chúng ta có thể bao gồm biểu định kiểu Reset bằng một số phương pháp khác nhau.

External Style Sheet

Chúng ta có thể sử dụng bảng định kiểu Reset như một biểu định kiểu bên ngoài giống như chúng ta làm với các kiểu thông thường. Chỉ cần đảm bảo thêm nó trước, vì thứ tự quan trọng.

<head>
  <meta charset = "utf-8" />

  <title> Trang HTML để kiểm tra CSS </title>

  <link rel = "stylesheet" href = "reset.css" media = "screen" />
  <link rel = "stylesheet" href = "styles.css" media = "screen" />
</head>

Hãy nhớ rằng, bảng định kiểu CSS Reset luôn phải xuất hiện trước.

Sao chép và dán vào trang CSS riêng

Bạn cũng có thể chỉ cần sao chép tất cả các quy tắc từ biểu định kiểu Reset và dán chúng vào của riêng bạn. Đảm bảo rằng bạn đặt chúng ở trên cùng để chúng không ghi đè lên bất kỳ quy tắc nào của bạn.

Nếu bạn sử dụng phương pháp này, hãy nhớ đánh dấu rõ ràng phần Reset của biểu định kiểu và ghi công cho tác giả bằng cách sử dụng nhận xét CSS. Mặc dù tác giả đã cung cấp bảng định kiểu này cho mọi người sử dụng.

Reset trong Action

Hiện tại, trang đang sử dụng các kiểu trình duyệt mặc định vì chúng tôi không xác định bất kỳ kiểu nào khác. Sau khi chúng tôi áp dụng biểu định kiểu Reset CSS. Trang Kiểm tra HTML có Reset

Điều này cung cấp cho chúng tôi một phương tiện rõ ràng để làm việc. Những điều cần lưu ý:

  • Tất cả các kích thước style được đặt thành cùng một kích thước
  • Tất cả các lề và phần đệm được đặt thành 0
  • Danh sách không còn hiển thị dấu đầu dòng hoặc số theo mặc định
  • <em> không còn hiển thị dưới dạng văn bản in nghiêng và <strong> không còn hiển thị dưới dạng văn bản in đậm

Điều này có vẻ như rất nhiều công việc. Tại sao bạn muốn làm điều này?

Hai lý do:

  • Điều này sẽ giúp bạn tiết kiệm rất nhiều thời gian và sự thất vọng khi bạn đang tạo các bố cục phức tạp với CSS.
  • Bạn là nhà thiết kế. Bạn không nên để các nhà sản xuất trình duyệt quyết định bất kỳ phần nào trên trang web của bạn sẽ trông như thế nào.

Các bài viết khác:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now