Lấy lại các thuộc tính mặc định sau khi áp dụng đặt lại CSS toàn cục

Question

Một số mã cũ mà tôi phải xây dựng dựa trên, thực sự làm cho tôi cảm thấy the cons of global CSS reset.

Tôi có tuổi foo.css mà bắt đầu với

* {margin:0; padding:0;} 

và tôi sử dụng để sao chép nó vào một tập tin khác nhau bar.css, tinh chỉnh nó quá nhu cầu của tôi (ra với CSS reset), và sử dụng nó để thay thế foo.css chỉ trong mã tôi đang viết. Tôi làm điều này không phải lo lắng về khả năng tương thích ngược với các phần cũ của trang web.

Bây giờ điều này khá cồng kềnh: đối với những thay đổi toàn cục, tôi phải nhớ sửa đổi cả hai tệp. Vì vậy bây giờ bar.css tôi đang mở rộng foo.css, bắt đầu với:

@import url("style.css"); 

Vấn đề là bây giờ tôi cũng kế thừa các thiết lập lại CSS.

Có cách nào (†) để mang các thuộc tính margin & padding của một số thành phần (tiêu đề, danh sách, v.v.) về giá trị mặc định của chúng.

(†) ngoài việc đặt thủ công mọi thuộc tính về giá trị ban đầu, như được xác định trong thông số CSS.

Answer 1

Có giá trị được đề xuất initial để đặt thuộc tính thành giá trị ban đầu, không tìm giá trị rõ ràng. Nhưng nó vẫn còn rất nhiều giai đoạn dự thảo và hầu như không được triển khai trong bất kỳ trình duyệt nào.

Hơn nữa, đó có thể thậm chí không phải những gì bạn muốn đạt được. Nếu tôi hiểu chính xác bạn, bạn sẽ muốn đặt ví dụ: lề trên và dưới của các phần tử h2 đến giá trị mặc định trình duyệt mặc định là. Tôi không nghĩ có bất kỳ cách nào được đề xuất để làm điều đó trong CSS. Thông số kỹ thuật không xác định mặc định của trình duyệt. Giá trị ban đầu của thuộc tính margin là 0. Lý do tại sao các tiêu đề có lề trên và dưới theo mặc định là trình duyệt áp dụng, ít nhất là khái niệm, một biểu định kiểu trình duyệt. Thông số CSS đề xuất một biểu định kiểu trình duyệt mặc định nhưng không ủy quyền cho một kiểu và trình duyệt có thể (và thực sự làm) đi chệch khỏi các đề xuất.

Trong thực tế, ảnh chụp tốt nhất trong tình huống cụ thể sẽ là kiểm tra Appendix D thông số kỹ thuật CSS 2.1 và sử dụng các giá trị được cung cấp tại đó. Đối với những thứ như lề, điều này chủ yếu sẽ tạo ra hiệu quả của việc sử dụng mặc định của trình duyệt.

Answer 2

Tôi nghĩ rằng * {margin: auto} sẽ đặt lại lề (hoặc h1 {margin: auto} nếu chỉ phần tử đó đang được đặt lại.), Nhưng điều này sẽ không hoạt động đối với đệm. Về mặt kỹ thuật, spec là cho padding là zero, tuy nhiên, nếu một trình duyệt thực hiện nó nếu không, tôi không nghĩ rằng sẽ có một cách để thiết lập lại nó.

Answer 3

Thay vì mong muốn bạn có thể hoàn nguyên về mặc định của trình duyệt, tại sao không chỉ thiết lập của riêng bạn?

Tất cả các bạn sẽ cần phải làm là thêm tờ khai của bạn dưới reset CSS toàn cầu của bạn:

* { margin: 0; } 
h1 { margin: 10px 0; } 

Các h1 được ưu tiên hơn các selector toàn cầu *.

Điều này sẽ giúp normalize your CSS.