Cách Khôi Phục Giá Trị Mặc Định Của Thuộc Tính Trong CSS

Question

Nguyễn Đình Thái · Accepted Answer

Trong CSS, khi bạn thay đổi các thuộc tính của phần tử, đôi khi bạn có thể muốn khôi phục lại giá trị mặc định của các thuộc tính đó. Có nhiều cách để thực hiện việc này, và bài viết dưới đây sẽ hướng dẫn bạn qua các phương pháp khác nhau.
1. Sử Dụng Giá Trị Mặc Định
Nhiều thuộc tính trong CSS có giá trị mặc định mà bạn có thể đặt lại cho chúng. Dưới đây là một số giá trị mặc định phổ biến:
margin: 0;
padding: 0;
border: none;
background: transparent;
color: initial; (với initial là giá trị mặc định của thuộc tính)
Ví Dụ:
.element {
    margin: 0; /* Khôi phục giá trị margin mặc định */
    padding: 0; /* Khôi phục giá trị padding mặc định */
    border: none; /* Khôi phục border mặc định */
}
2. Sử Dụng initial
Giá trị initial có thể được sử dụng để đặt thuộc tính về giá trị mặc định của nó trong CSS. Giá trị này sẽ khôi phục thuộc tính về trạng thái mặc định mà nó sẽ có khi không có CSS nào được áp dụng.
Cú Pháp:
.element {
    property: initial; /* Khôi phục giá trị mặc định */
}
Ví Dụ:
.element {
    color: initial; /* Khôi phục màu chữ mặc định */
    display: initial; /* Khôi phục thuộc tính display mặc định */
}
3. Sử Dụng inherit
Sử dụng giá trị inherit cho phép thuộc tính lấy giá trị từ phần tử cha của nó. Điều này có thể giúp khôi phục các giá trị mặc định dựa trên bối cảnh.
Cú Pháp:
.element {
    property: inherit; /* Lấy giá trị từ phần tử cha */
}
Ví Dụ:
.parent {
    color: black; /* Màu của phần tử cha */
}
.child {
    color: inherit; /* Khôi phục màu từ phần tử cha */
}
4. Sử Dụng unset
Giá trị unset kết hợp giữa hai giá trị inherit và initial. Nếu thuộc tính có giá trị mặc định, nó sẽ khôi phục về giá trị đó. Nếu thuộc tính kế thừa, nó sẽ nhận giá trị từ phần tử cha.
Cú Pháp:
.element {
    property: unset; /* Khôi phục về giá trị mặc định hoặc giá trị từ phần tử cha */
}
Ví Dụ:
.element {
    display: unset; /* Nếu thuộc tính có giá trị mặc định, khôi phục về giá trị mặc định */
}
5. Sử Dụng revert (Khi Hỗ Trợ)
Giá trị revert sẽ khôi phục thuộc tính về giá trị đã được áp dụng trước đó, bao gồm cả các giá trị mặc định. Tuy nhiên, giá trị này không được hỗ trợ trên tất cả các trình duyệt.
Cú Pháp:
.element {
    property: revert; /* Khôi phục giá trị đã áp dụng trước đó */
}
Ví Dụ:
.element {
    background: revert; /* Khôi phục giá trị background đã được áp dụng trước đó */
}
Kết Luận
Việc khôi phục giá trị mặc định của thuộc tính trong CSS có thể được thực hiện bằng nhiều phương pháp khác nhau như initial, inherit, unset, và revert. Hiểu rõ các phương pháp này sẽ giúp bạn kiểm soát giao diện và kiểu dáng của các phần tử trên trang web một cách linh hoạt và hiệu quả hơn.