Cookbook template
Note: Đây là trang template cho một trang CSS Cookbook. Vui lòng sử dụng trang này làm template thô khi bạn tạo một trang cookbook mới. Chú thích in nghiêng là thông tin về cách sử dụng một phần của template.
Mô tả vấn đề mà công thức này giải quyết hoặc mẫu bạn đang minh họa.
Yêu cầu
Mẫu này cần bao gồm những gì, hoặc nó cần giải quyết những vấn đề gì? Liệt kê ở đây.
Công thức
Thay đổi code ví dụ. Tham số cuối cùng là chiều cao ví dụ trực tiếp, bạn có thể thay đổi nếu cần. Đề cập rằng bạn có thể nhấp vào "Play" trong các khối code để chỉnh sửa ví dụ trong MDN Playground.
<div class="container">
<div class="item">I am centered!</div>
</div>
.container {
border: 2px solid rgb(75 70 74);
border-radius: 0.5em;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.item {
border: 2px solid rgb(95 97 110);
border-radius: 0.5em;
padding: 20px;
width: 10em;
}
Các lựa chọn được thực hiện
Giải thích các quyết định của bạn khi tạo mẫu. Tại sao bạn chọn một phương pháp nhất định? Nếu bạn muốn thêm một ví dụ bổ sung ở đây — ví dụ như một phiên bản có phương án dự phòng, hãy làm vậy. Phần này được cố ý để thoải mái vì các mẫu có thể từ rất đơn giản đến phức tạp hơn.
Các phương án dự phòng hoặc phương pháp thay thế hữu ích
Nếu có các phương pháp thay thế hữu ích để xây dựng công thức, hoặc các công thức dự phòng để sử dụng nếu bạn phải hỗ trợ các trình duyệt không hỗ trợ, hãy bao gồm chúng trong các phần riêng biệt ở đây.
Vấn đề về khả năng tiếp cận
Bao gồm phần này nếu có bất kỳ điều cụ thể nào cần chú ý liên quan đến khả năng tiếp cận. Nếu không liên quan đến mẫu của bạn, phần này có thể được bỏ qua.
Xem thêm
- Liên kết đến các thuộc tính liên quan:
example-property - Liên kết đến bài viết hướng dẫn cách sử dụng thuộc tính trong ngữ cảnh: "Using … article"
- Liên kết bên ngoài rất tốt. Đừng ngại liên kết bên ngoài, nhưng chúng phải xuất sắc và không chỉ đề cập đến các chi tiết nhỏ.