Reset CSS là gì – w3seo cách sử dụng reset css cho website, hướng dẫn

Posted on by mtoplistChuyên mục:Top List

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.

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

Bao gồm 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

Tại sao

Đ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.

Normalize CSS

Nếu thiết lập lại của Meyer có vẻ hơi quá, có một phiên bản mới hơn có cách tiếp cận hơi khác: normalize.css. Thay vì cố gắng loại bỏ các kiểu trình duyệt mặc định, normalize.css sẽ cố gắng chuẩn hóa chúng thành các giá trị tiêu chuẩn trên các trình duyệt. Điều này loại bỏ một số nhược điểm của thiết lập lại Meyer. Nó cũng là một biểu định kiểu mới hơn và được phát triển tích cực, vì vậy nó bao gồm các phần tử HTML hiện đại hơn.

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

mtoplist