Đặt lại CSS, kiểu mặc định cho các thành phần phổ biến

Question

Sau khi áp dụng đặt lại CSS, tôi muốn quay lại hoạt động 'bình thường' cho các phần tử html như: p, h1..h6, strong, ul và li.

Bây giờ, khi tôi nói bình thường, tôi có nghĩa là ví dụ: phần tử p thêm khoảng trắng hoặc dấu xuống dòng như kết quả khi được sử dụng hoặc kích thước của phông chữ và độ đậm cho thẻ h1, cùng với khoảng cách.

Tôi nhận ra điều này hoàn toàn tùy thuộc vào cách tôi muốn đặt phong cách, nhưng tôi muốn trở lại hoạt động bình thường đối với một số yếu tố phổ biến hơn (ít nhất là điểm bắt đầu mà tôi có thể chỉnh sửa sau) .

Answer 1

Bạn có nghĩa là thích:

* { 
    padding: 0; 
    margin: 0; 
} 

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address { 
    margin-bottom: 1em; 
} 

?

Trên thực tế, xin lỗi tôi mis-đọc câu hỏi của bạn, bạn đang sau một cái gì đó giống như tổng reset Eric Meyer @http://meyerweb.com/eric/tools/css/reset/

Answer 2

YUI cung cấp một tập tin CSS cơ sở đó sẽ cung cấp cho phong cách nhất quán trên tất cả các trình duyệt 'A-grade'. Họ cũng cung cấp một tệp đặt lại CSS, vì vậy bạn có thể sử dụng tệp đó, nhưng bạn nói rằng bạn đã đặt lại CSS. Để biết thêm chi tiết, hãy truy cập vào YUI website. Đây là những gì tôi đã sử dụng và nó hoạt động thực sự tốt.

Answer 3

Một trong các quy tắc áp dụng kiểu CSS là "cuối cùng trong chiến thắng". Điều này có nghĩa là nếu các kiểu đặt lại CSS của bạn đặt các phần tử thành margin:0; padding:0, bạn có thể ghi đè các quy tắc này bằng cách khai báo các giá trị mong muốn của bạn cho các phần tử tương tự sau đó.

Bạn có thể thực hiện việc này trong cùng một tệp (YUI cung cấp đặt lại một lớp. Tôi nghĩ đôi khi tôi đưa nó làm dòng đầu tiên trong tệp CSS) hoặc trong một tệp riêng xuất hiện sau khi đặt lại thẻ <link/> CSS.

Tôi nghĩ rằng theo hành vi bình thường có nghĩa là "mặc định cho trình duyệt yêu thích của tôi". Việc xây dựng quy tắc CSS cho các yếu tố này là một phần của bài tập đặt lại.

Bây giờ bạn có thể muốn xem xét Blueprint CSS hoặc các khung lưới khác. Những khung lưới này hầu như luôn luôn đặt lại kiểu dáng thành không có gì, sau đó xây dựng kiểu chữ cho các phần tử phổ biến, v.v. Điều này có thể giúp bạn tiết kiệm thời gian và công sức.

Answer 4

Nếu bạn muốn xem mặc định css cho firefox, hãy tìm tệp có tên 'html.css' trong bản phân phối (có một số tệp css hữu ích khác trong cùng một thư mục). Bạn có thể chọn ra các quy tắc mà bạn muốn và áp dụng chúng sau khi đặt lại.

Ngoài ra, tiêu chuẩn CSS2 có sample stylesheet for html 4.

Answer 5

"Sau khi áp dụng một thiết lập lại CSS, tôi muốn quay trở lại hành vi 'bình thường' cho các yếu tố html ..."

Nếu bạn đã áp dụng một thiết lập lại, sau đó bạn sẽ phải bổ sung các quy tắc cho những gì bạn tin là hành vi thông thường. Kể từ hành vi bình thường thay đổi từ trình duyệt đến trình duyệt, câu hỏi này là một thứ không theo thứ tự. Tôi thích câu trả lời của @ da5id - sử dụng một trong nhiều cài đặt lại có sẵn và tinh chỉnh nó cho phù hợp với nhu cầu của bạn.

Answer 6

Kiểm tra YUI (quy ước giao diện người dùng nguồn mở của Yahoo).

Chúng có biểu định kiểu cơ bản sẽ hoàn tác css đặt lại của riêng chúng. Họ không khuyến khích bạn sử dụng nó trong sản xuất - kể từ khi truy cập của nó sản xuất nhưng chắc chắn có thể có giá trị kiểm tra ra các tập tin để có được đoạn nội dung có liên quan cho những gì bạn muốn 'hoàn tác'.

Tôi khuyên bạn nên xem 40 phút talk để tăng tốc.

Heres một đoạn ngắn của tập tin base.css của họ:

ol li { 
    /*giving OL's LIs generated numbers*/ 
    list-style: decimal outside;  
} 
ul li { 
    /*giving UL's LIs generated disc markers*/ 
    list-style: disc outside; 
} 
dl dd { 
    /*giving UL's LIs generated numbers*/ 
    margin-left:1em; 
} 
th,td { 
    /*borders and padding to make the table readable*/ 
    border:1px solid #000; 
    padding:.5em; 
} 
th { 
    /*distinguishing table headers from data cells*/ 
    font-weight:bold; 
    text-align:center; 
} 

Tải về toàn bộ các stylesheets dưới đây hoặc read full documentation.

Yahoo reset css | Yahoo base (undo) reset css

Answer 7

Cá nhân tôi là người hâm mộ lớn của BlueprintCSS. Nó đặt lại phong cách trên các trình duyệt và cung cấp một số mặc định thực sự thuận tiện (đó là những gì bạn muốn 90% thời gian). Nó cũng cung cấp một lưới bố trí, nhưng bạn không phải sử dụng nó nếu bạn không cần nó.

Answer 8

Normal behaviour for WebKit h1:

h1 { 
    display: block; 
    font-size: 2em; 
    margin: .67__qem 0 .67em 0; 
    font-weight: bold 
} 

Normal behaviour for Gecko h1:

h1 { 
    display: block; 
    font-size: 2em; 
    font-weight: bold; 
    margin: .67em 0; 
} 

Phần còn lại của các yếu tố nên có mặt ở đó nếu bạn tìm kiếm các tập tin.

Answer 9

Thay vì sử dụng đặt lại toàn bộ CSS, hãy nghĩ đến việc sử dụng một cái gì đó như Normalize, trong đó "giữ nguyên các giá trị mặc định hữu ích".

Để tìm hiểu những gì trình duyệt của bạn nghĩ về như mặc định, mở một tập tin HTML đồng bằng với danh sách và xem danh sách với một trình gỡ lỗi CSS như Firebug, và nhìn xuống phía dưới Computed tab.

Answer 10

Tôi không đặt lại tất cả các phần tử theo mặc định vì kiểu mặc định bằng cách nào đó trình duyệt phụ thuộc, do đó chúng thay đổi từ trình duyệt đến trình duyệt. Thay vì sử dụng một cái gì đó như ul, ol { list-style: none; }, tôi đang thêm một lớp CSS như r hoặc reset và sau đó tôi chỉ định rằng nếu đó là ul có lớp r, hãy đặt lại hoặc nếu không, hãy để nó không bị ảnh hưởng.

Bằng cách này, bạn cần phải thêm class="reset" (ví dụ) vào tất cả các yếu tố đó, đó là công việc và mã bổ sung, tuy nhiên bạn có tất cả các kiểu mặc định của bạn không bị ảnh hưởng ở phần cuối cùng!

Answer 11

Khi bạn đã gán giá trị cho thuộc tính CSS của phần tử, không có cách nào lấy lại giá trị "bình thường" cho nó, giả sử "bình thường" có nghĩa là "mặc định của trình duyệt", vì nó có ý nghĩa ở đây. Vì vậy, cách duy nhất để có, giả sử, phần tử h1 có mặc định của trình duyệt font-size là không đặt thuộc tính cho tất cả là trong mã CSS của bạn.

Do đó, để miễn một số thuộc tính và yếu tố khỏi đặt lại CSS, bạn cần sử dụng đặt lại CSS giới hạn hơn. Ví dụ: bạn không được sử dụng * { font-size: 100% } nhưng thay thế * bằng danh sách các công cụ chọn, chẳng hạn như input, textarea { font-size: 100% } (danh sách có thể khá dài, nhưng ví dụ:mặc định của trình duyệt cho font-size khác với 100% chỉ cho một vài thành phần).

Tất nhiên là có thể đặt thuộc tính thành các giá trị mà bạn mong đợi làm mặc định của trình duyệt. Không có gì đảm bảo rằng điều này sẽ có hiệu quả mong muốn trên tất cả các trình duyệt, hiện tại và tương lai. Nhưng đối với một số thuộc tính và các yếu tố, điều này có thể tương đối an toàn, vì các giá trị mặc định có xu hướng tương tự nhau.

Cụ thể, bạn có thể sử dụng phần Rendering trong HTML5 CR. Nó mô tả “hiển thị dự kiến” - không phải là yêu cầu, mặc dù các nhà cung cấp trình duyệt có thể quyết định yêu cầu sự phù hợp với họ nếu họ muốn, và nói chung điều này có thể sẽ tiếp tục triển khai khá giống nhau về mặt này. . Chẳng hạn, đối với h1 các thiết lập theo mong muốn (thu thập ở đây thành một quy tắc - trong HTML5 CR họ nằm rải rác xung quanh):

h1 { 
unicode-bidi: isolate; 
display: block; 
margin-top: 0.67em; 
margin-bottom: 0.67em; 
font-size: 2.00em; 
font-weight: bold; 
} 

(Có thêm quy tắc ngữ cảnh Ví dụ, làm tổ h1 bên section dự kiến ​​sẽ ảnh hưởng đến cài đặt.)