Hướng dẫn css reset width - chiều rộng thiết lập lại css

Những phần tử HTML có những quy tắc hiển thị do từng trình duyệt quy định có thể giống hoặc khác nhau. Thế nên chúng ta cần thiết lập lại các style chung cho các thẻ HTML về một tiêu chuẩn chung, giúp cho việc hiển thị tương đồng nhau giữa các trình duyệt gọi là Reset css Trong bài viết này, tôi muốn chia sẻ các tuỳ chọn css này, thiết lập các nhân [ mà tôi sử dụng cùng file Normalize.css].

1. Box sizing
2. Removing margins and paddings
3. Lists
4. Forms and Buttons
5. Images and embeds
6. Tables
7. The hidden attribute

Box Sizing

Thuộc tinh

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

3 thay đổi cách thức hoạt động của Box model. Nó thay đổi dẫn đến

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

4,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

5,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

6,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

7 và

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

8 được tính toán lại.

Giá trị mặc định cho

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

3là

/* Removes discs from ul */
ul {
  list-style: none;
}

0. Với tôi thì tôi thích dùng

/* Removes discs from ul */
ul {
  list-style: none;
}

1 hơn vì nó giúp tôi tạo style dễ dàng hơn cho

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

7 và

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

5.

Để tìm hiểu thêm các thông tin về Box Sizing, bạn có thể xem tại "Understanding Box sizing"

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

Removing margins and paddings

Lists

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

Forms and Buttons

Images and embeds

/* Removes discs from ul */
ul {
  list-style: none;
}

Tables

The hidden attribute

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

Box Sizing

input,
textarea,
button {
  border: 1px solid gray; 
}

Thuộc tinh

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

3 thay đổi cách thức hoạt động của Box model. Nó thay đổi dẫn đến

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

4,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

5,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

6,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

7 và

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

8 được tính toán lại.

1. Giá trị mặc định cho

   /* Reset margins and paddings on most elements */
   body,
   h2,
   h2,
   h3,
   h4,
   h5,
   h6,
   ul,
   ol,
   li,
   p,
   pre,
   blockquote,
   figure,
   hr {
     margin: 0;
     padding: 0;
   }
   

   3là

   /* Removes discs from ul */
   ul {
     list-style: none;
   }
   

   0. Với tôi thì tôi thích dùng

   /* Removes discs from ul */
   ul {
     list-style: none;
   }
   

   1 hơn vì nó giúp tôi tạo style dễ dàng hơn cho

   /* Reset margins and paddings on most elements */
   body,
   h2,
   h2,
   h3,
   h4,
   h5,
   h6,
   ul,
   ol,
   li,
   p,
   pre,
   blockquote,
   figure,
   hr {
     margin: 0;
     padding: 0;
   }
   

   7 và

   /* Reset margins and paddings on most elements */
   body,
   h2,
   h2,
   h3,
   h4,
   h5,
   h6,
   ul,
   ol,
   li,
   p,
   pre,
   blockquote,
   figure,
   hr {
     margin: 0;
     padding: 0;
   }
   

   5.
2. Để tìm hiểu thêm các thông tin về Box Sizing, bạn có thể xem tại "Understanding Box sizing"
3. Với các element khác nhau, trình duyệt sẽ đặt các giá trị

   /* Reset margins and paddings on most elements */
   body,
   h2,
   h2,
   h3,
   h4,
   h5,
   h6,
   ul,
   ol,
   li,
   p,
   pre,
   blockquote,
   figure,
   hr {
     margin: 0;
     padding: 0;
   }
   

   8và

   /* Reset margins and paddings on most elements */
   body,
   h2,
   h2,
   h3,
   h4,
   h5,
   h6,
   ul,
   ol,
   li,
   p,
   pre,
   blockquote,
   figure,
   hr {
     margin: 0;
     padding: 0;
   }
   

   7 khác nhau. Thường thì mấy giá trị mặc định này thì mọi người không để ý đến hoặc không biết đến nó. Khi tôi code, tôi thường thích đặt lại các giá trị cho

   /* Reset margins and paddings on most elements */
   body,
   h2,
   h2,
   h3,
   h4,
   h5,
   h6,
   ul,
   ol,
   li,
   p,
   pre,
   blockquote,
   figure,
   hr {
     margin: 0;
     padding: 0;
   }
   

   8 và

   /* Reset margins and paddings on most elements */
   body,
   h2,
   h2,
   h3,
   h4,
   h5,
   h6,
   ul,
   ol,
   li,
   p,
   pre,
   blockquote,
   figure,
   hr {
     margin: 0;
     padding: 0;
   }
   

   7.

button {
  border-radius: 0; 
  padding: 0.75em 1em;
  background-color: transparent;

Lists

```css
button * {
  pointer-events: none;
}

Tôi sử dụng các danh sách không có thứ tự trong nhiều tình huống và tôi không cần một style

/* Removes discs from ul */
ul {
  list-style: none;
}

8 trong hầu hết các danh sách đó. Tôi đặt

/* Removes discs from ul */
ul {
  list-style: none;
}

9 là

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

0 . Khi cần thiết phải đặt style

/* Removes discs from ul */
ul {
  list-style: none;
}

8 , thì ta đặt nó về như ban đầu.

embed,
iframe,
img,
object,
video {
  display: block;
  max-width: 100%;
}

Tables

The hidden attribute

table {
  table-layout: fixed;
  width: 100%;
}

Box Sizing

[hidden] {
  display: none;
}

Thuộc tinh

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

3 thay đổi cách thức hoạt động của Box model. Nó thay đổi dẫn đến

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

4,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

5,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

6,

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

7 và

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

8 được tính toán lại.

Giá trị mặc định cho

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

3là

/* Removes discs from ul */
ul {
  list-style: none;
}

0. Với tôi thì tôi thích dùng

/* Removes discs from ul */
ul {
  list-style: none;
}

1 hơn vì nó giúp tôi tạo style dễ dàng hơn cho

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

7 và

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

5.

CSS reset là một file thường được thấy trong các thư mục của rất nhiều project web frontend. và ai đã và đang thiết kế giao diện website với HTML và CSS đều hiểu sự quan trọng của reset css bạn có biết nó được dùng vào mục đích gì không? Tại sao chúng ta phải cần sử dụng reset css trong thiết kế web, và cách tạo ra chúng và sử dụng dụng file reset.css như thế nào? Đó là những vấn đề mà trong bài viết hôm nay mình muốn chia sẻ với các bạn.

CSS Reset là gì?

CSS Reset là một loại các rules của CSS giúp thiết lập các style của tất cả đối tượng HTML [element] theo một chuẩn nhất định. Nói đơn giản thì nó là môn võ và bạn sẽ cần tới trong tất cả các dự án có liên quan tới frontend web và application.

Bạn là một lập trình viên và phải xử lý việc giao diện hiển thị giống hệt nhau [hoặc khác nhau rất ít] trên các trình duyệt web, thì rõ ràng việc viết 1 đoạn code mà hoạt động trên tất cả trình duyệt tốt hơn là dùng các file style khác nhau cho mỗi trình duyệt chuẩn chưa?

Sử dụng CSS Reset, bạn luôn nắm thế chủ động - bạn như ông chủ, yêu cầu những trình duyệt sử dụng chung các thuộc tính CSS do bạn quy định, sau đó bạn có thể chỉnh sửa theo ý thích của mình. Quá trình làm việc cross-browser lúc này dễ dàng hơn hẳn.

Tạo reset css như nào ?

Là ta định đạng các đối thương trong HTML về một kiểu nào đó chung thường thì dưa các thẻ có định dạng margin, padding bằng 0, viền các đối tượng là none, dạng danh sách ul, ol … list-style là none, có thể qui định thêm kiểu chữ hoặc cỡ chữ tùy vào ý đồ của bạn, tuy nhiên cỡ chữ thường người cho cho 100% rồi sau đó chúng ta định dạng lại trong phần thiết kế giao diện sau đó. Ví dụ:

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

0

Ta cũng có thể liệt kê các thẻ html rồi định dạng lại:

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

1

Tuy nhiên để tiện lợi cũng như tạo cho phần reset css được chặc chẽ và chính xác hơn mình giới thiệu những bộ reset css được nhiều người sử dụng nhất đó là do những người lập trình css trên thế giới tạo ra và chia sẻ, hiển nhiên là được update thường xuyên.

- Normalize.css

Đây là 1 file CSS tiêu chuẩn được sử dụng rất nhiều trong các thư viện Frontend Framework như Bootstrap

Bạn có thể xem file này tại đây

- CSS Reset của Eric Myer

Cái này cũng khá phổ biến và được dùng nhiều.

Bạn xem code nó ở đây

- MarkSheet CSS Reset

Các đoạn code reset rất hữu ích nếu bạn sử dụng 100% web HTML5.

Bạn xem code nó vô đây

- MiniReset.css

Một CSS Reset cũng khá hiệu quả và ok.

Bạn xem code nó click đây

Sử dụng CSS Reset:

- CSS Reset luôn đặt đầu tiên trong các file CSS

- CSS Reset luôn xử lý các element HTML

Điều này được hiểu là CSS Reset sẽ tác động tới các element như:

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

7 chứ không phải

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

8 hay

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

9 Tức là, nhiệm vụ của CSS Reset là làm việc với các element trực tiêp chứ không phải các class hay ID nào cả. Lý do thì là bởi nó làm việc với trình duyệt, mà các trình duyệt cũng làm cách tương tự để áp đặt các style mặc định vào.

- Custom CSS Style phải gọi vào các class/ID hoặc có parent element

Bạn nên code vào:

/* Reset margins and paddings on most elements */
body,
h2,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

2

Việc tránh gọi các element trình duyệt mà sử dụng class/ID đóng vai trò quan trọng giúp bạn dễ dàng xử lý xung đột giữa CSS Reset và custom style.

Tuy là một phần nhỏ trong thiết kế diện web nhưng rất quan trọng, các bạn không thể có được một giao diện như ý khi bỏ qua bước này. Chúc các bạn thành công!