CSS - Tất cả các thuộc tính: Hướng dẫn toàn diện cho người mới bắt đầu

Xin chào các pháp sư CSS tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của CSS. Hôm nay, chúng ta sẽ khám phá một thuộc tính mạnh mẽ nhưng thường bị bỏ qua叫做 all. Nó giống như một枝 phép có thể đặt lại tất cả các样式 của một phần tử chỉ với một dòng mã. Có phải đó là điều tuyệt vời không? Hãy cùng nhau khám phá!

CSS - All

CSS `all` là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu thuộc tính all làm gì. Hãy tưởng tượng bạn đang sơn một căn phòng và bạn muốn bắt đầu từ đầu. Thay vì xóa từng màu một, liệu có phải bạn sẽ rất thích nếu có thể đặt lại tất cả chỉ trong một lần? Đó chính xác là điều mà thuộc tính all trong CSS làm!

Thuộc tính all là một từ viết tắt đặt lại tất cả các thuộc tính của một phần tử về giá trị ban đầu hoặc giá trị kế thừa, ngoại trừ các thuộc tính unicode-bidi và direction. Nó giống như nhấn nút复位 trên các样式 của phần tử của bạn.

Các thuộc tính thành phần

Bây giờ, bạn có thể đang tự hỏi, "Vậy 'tất cả các thuộc tính' có nghĩa là gì?" Được rồi, nó bao gồm gần như tất cả mọi thứ bạn có thể style với CSS! Hãy phân chia nó thành các danh mục:

Thuộc tính Box Model
Thuộc tính Typography
Thuộc tính Màu sắc và nền
Thuộc tính Bố cục
Thuộc tính Hoạt ảnh và Chuyển đổi
Và nhiều hơn nữa!

Dưới đây là bảng hiển thị một số thuộc tính phổ biến bị ảnh hưởng bởi all:

Danh mục	Thuộc tính
Box Model	width, height, margin, padding, border
Typography	font-size, font-family, line-height, text-align
Màu sắc	color, background-color
Bố cục	display, position, float
Hoạt ảnh	animation, transition

Các giá trị có thể có

Thuộc tính all có thể có bốn giá trị. Hãy cùng khám phá từng giá trị:

1. initial

.element {
all: initial;
}

Giá trị này đặt lại tất cả các thuộc tính về giá trị ban đầu như được định nghĩa trong tiêu chuẩn CSS. Nó giống như trả lại phần tử về "cài đặt gốc".

2. inherit

.element {
all: inherit;
}

Giá trị này làm cho phần tử kế thừa tất cả các thuộc tính từ phần tử cha. Nó giống như nói, "Hey phần tử, chỉ cần sao chép tất cả những gì phần tử cha đang làm!"

3. unset

.element {
all: unset;
}

Đây là sự kết hợp của initial và inherit. Nếu một thuộc tính tự nhiên kế thừa, nó hoạt động như inherit. Nếu không, nó hoạt động như initial.

4. revert

.element {
all: revert;
}

Điều này đặt lại tất cả các thuộc tính về样式 mặc định của trình duyệt. Nó giống như nói với trình duyệt, "Quên đi tất cả những gì chúng ta đã làm, hãy quay lại样式 mặc định của bạn."

Cú pháp

Cú pháp cho thuộc tính all rất đơn giản:

selector {
all: value;
}

Trong đó value có thể là một trong bốn tùy chọn chúng ta đã thảo luận: initial, inherit, unset, hoặc revert.

CSS all - Ví dụ cơ bản

Hãy áp dụng điều này vào một ví dụ thực tế. Hãy tưởng tượng bạn đang xây dựng một trang web và bạn muốn tạo một nút "reset" để xóa bỏ tất cả các style từ một phần tử. Dưới đây là cách bạn có thể làm điều đó:

<div class="styled-div">
<p>Đây là một đoạn văn đã được style.</p>
</div>
<button onclick="resetStyles()">Reset Styles</button>

<style>
.styled-div {
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
font-family: Arial, sans-serif;
}

.styled-div p {
color: #0066cc;
font-size: 18px;
line-height: 1.5;
}

.reset {
all: initial;
* { all: unset; }
}
</style>

<script>
function resetStyles() {
document.querySelector('.styled-div').classList.toggle('reset');
}
</script>

Trong ví dụ này, chúng ta có một div đã được style với một đoạn văn bên trong. Khi bạn nhấp vào nút "Reset Styles", nó sẽ chuyển đổi lớp reset, sử dụng thuộc tính all để xóa bỏ tất cả các style.

Hãy phân tích những gì đang xảy ra:

Chúng ta bắt đầu với một div và đoạn văn đã được style.
Lớp reset sử dụng all: initial để复位 div.
* { all: unset; } trong lớp reset đảm bảo rằng tất cả các phần tử con cũng bị复位.
Khi nhấp vào nút, nó chuyển đổi lớp reset.

Thử sao chép mã này vào một tệp HTML và mở nó trong trình duyệt của bạn. Nhấp vào nút và xem phép màu xảy ra!

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của thuộc tính all trong CSS, từ khái niệm cơ bản đến ứng dụng thực tế. Nhớ rằng, với quyền lực lớn đi kèm với trách nhiệm lớn. Thuộc tính all rất mạnh mẽ, nhưng hãy sử dụng nó một cách khôn ngoan. Nó hoàn hảo cho việc复位 style hoặc tạo một bảng sạch, nhưng hãy cẩn thận khi sử dụng nó trong các stylesheet lớn và phức tạp nơi nó có thể có những hệ quả không mong muốn.

Khi bạn tiếp tục cuộc phiêu lưu với CSS, hãy tiếp tục thử nghiệm với thuộc tính all. Thử kết hợp nó với các thuộc tính CSS khác và xem bạn có thể tạo ra những giải pháp sáng tạo nào. Ai biết được? Bạn có thể khám phá ra điều lớn lao tiếp theo trong thiết kế web!

Chúc các bạn may mắn và mong rằng các stylesheet của bạn luôn sạch sẽ và thiết kế của bạn luôn ấn tượng!

Credits: Image by storyset