Kỹ thuật CSS reset các phần tử HTML trong lập trình web

CSS reset giúp đưa các thuộc tính mặc định của các phần tử HTML về một trạng thái đồng nhất, loại bỏ sự khác biệt về styling giữa các trình duyệt. Đây là cách phổ biến để đảm bảo thiết kế nhất quán.

1. CSS Reset đơn giản

Dưới đây là một CSS reset cơ bản, giúp đặt hầu hết các margin, padding, và các thuộc tính khác về giá trị mặc định của trình duyệt:

/* CSS Reset đơn giản */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  font-size: 100%;
  line-height: 1.5;
}

---

2. Normalize.css

Normalize.css không đặt lại toàn bộ về 0, mà thay vào đó, nó điều chỉnh và chuẩn hóa các kiểu mặc định để nhất quán trên các trình duyệt:

• Cài đặt:
  • Nếu sử dụng CDN: <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  • Hoặc tải file về và nhúng vào dự án của bạn.

---

3. CSS Reset hiện đại

Đây là một reset CSS hiện đại, hiệu quả và phổ biến:

/* Modern CSS Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  line-height: 1.15; /* Sửa lỗi khoảng cách dòng trên một số trình duyệt */
  -webkit-text-size-adjust: 100%; /* Sửa lỗi phóng to chữ trên iOS */
}

body {
  margin: 0;
  font-family: sans-serif; /* Chọn font mặc định */
}

main {
  display: block; /* Hỗ trợ thẻ main */
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font: inherit; /* Kế thừa font từ cha */
}

---

4. Eric Meyer’s Reset (Phiên bản cổ điển)

Đây là reset CSS của Eric Meyer, một trong những phiên bản đầu tiên và phổ biến nhất:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

---

Khi nào dùng CSS Reset

1. Dự án đơn giản: Dùng CSS reset cơ bản hoặc Normalize.css.
2. Dự án lớn: Dùng Normalize.css hoặc kết hợp CSS reset hiện đại để tối ưu.

Css Reset thuộc một phần tử

Nếu tất cả nội dung cần reset đều nằm trong các phần tử giả sử là thuộc class content-text, bạn chỉ cần viết CSS reset cho lớp này thay vì toàn bộ trang. Điều này giúp bạn giảm tác động không mong muốn đến các phần khác.

---

CSS Reset cho .content-text

Dưới đây là một reset đơn giản dành riêng cho class .content-text:

.content-text * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content-text {
  font-size: 100%; /* Reset kích thước font */
  line-height: 1.5; /* Reset khoảng cách dòng */
}

.content-text img {
  max-width: 100%; /* Đảm bảo ảnh không vượt quá chiều rộng của khối */
  height: auto;
  display: block; /* Xóa khoảng trắng dưới ảnh */
}

.content-text ul, .content-text ol {
  list-style: none; /* Loại bỏ style danh sách */
}

.content-text a {
  text-decoration: none; /* Loại bỏ gạch chân liên kết */
  color: inherit; /* Kế thừa màu chữ */
}

.content-text table {
  border-collapse: collapse; /* Loại bỏ khoảng cách giữa các ô */
  border-spacing: 0;
}

.content-text blockquote {
  quotes: none;
}

.content-text blockquote::before,
.content-text blockquote::after {
  content: '';
}

.content-text h1, .content-text h2, .content-text h3, 
.content-text h4, .content-text h5, .content-text h6 {
  font-size: inherit; /* Kế thừa kích thước font */
  font-weight: normal; /* Xóa định dạng đậm mặc định */
}

---

Giải thích

1. .content-text *: Reset các thuộc tính margin, padding, và box-sizing cho mọi phần tử bên trong content-text.
2. Ảnh (img): Đảm bảo ảnh không vượt quá kích thước của khối chứa.
3. Danh sách (ul, ol): Loại bỏ các dấu đầu dòng hoặc số thứ tự.
4. Liên kết (a): Loại bỏ gạch chân và kế thừa màu sắc.
5. Bảng (table): Loại bỏ khoảng cách giữa các ô.
6. Tiêu đề (h1 đến h6): Loại bỏ định dạng mặc định như kích thước lớn và font đậm.

---

Áp dụng CSS Reset chỉ cho .content-text

<div class="content-text">
  <h1>Tiêu đề</h1>
  <p>Đoạn văn mẫu.</p>
  <ul>
    <li>Mục danh sách 1</li>
    <li>Mục danh sách 2</li>
  </ul>
  <img src="example.jpg" alt="Example">
</div>

Tích hợp vào dự án

Nếu bạn muốn giới hạn reset CSS cho một khu vực cụ thể (.content-text), cách này là tối ưu. Nếu cần hỗ trợ thêm, hãy cho mình biết! 😊