CSS - Thủ thuật reset css

by Nguyen Khoa on 8:58 PM in Bendoi, CSS, Thủ Thuật BlogSpot

Khi viết giao diện website nếu không để ý chúng ta sẽ vướng vào việc chỉnh sửa các thuộc tính cho các thẻ HTML khá chầy chật, chỗ thì thế này, chỗ thì thế khác, thêm chỗ nọ, bớt chỗ kia dẫn đến không động bộ có thể bị thiếu hoặc lặp lại không cần thiết. Những thuộc tính này đã được các trình duyệt hoặc mã nguồn web đó mặc định, đừng tưởng cái gì mình chưa khái báo thì thuộc tính đó là không.
Việc các trình duyệt, thiết bị, mã nguồn có sẵn các thư viện css mặc định sẽ được tự động sử dụng nếu chúng ta không trực trực tiếp khai báo css, cũng có cái lợi những cũng có cái bất tiện.
Điều này thấy rất rõ trong mã nguồn đóng blogger (blogspot), hay thậm chí bạn code một trang html mới tinh trong máy bạn thì mặc định margin đã là 10px (tùy trình duyệt).

Do đó bạn thấy tầm quan trọng của remove css default rồi, để chắc ăn nhất, chúng ta sẽ reset css khi bắt đầu một giao diện.
Cách tiến hành:
Bước 1: Cập nhật tất cả các thẻ HTML.
Bước 2: Liệt kê danh sách những thẻ HTML mà site của bạn sử dụng và có thể sẽ sử dụng, nếu cảm thấy sẽ chẳng có nhu cầu dùng đến thì thôi.
Bước 3: Chia các thẻ này theo nhóm. Những thẻ nào có chung một thuộc tính hoặc vài thuộc tính giống nhau thì thành một nhóm. Những thẻ được sử dụng những chưa xác định thuộc cụ thể thì cũng chung một nhóm.
Bước 4: Viết css cho các nhóm đó theo dạng

nhóm_1 {thuộc_tính_11: giá_trị_11; thuộc_tính_12: giá_trị_12; ...}
nhóm_2 {thuộc_tính_21: giá_trị_21; thuộc_tính_22: giá_trị_22; ...}
...
nhóm_trống {}

Bước 5: viết lại một số css xuống dưới, quy định riêng một số thuộc tính.

Ở đây tôi có một đoạn css tướng đối đủ dùng cho hầu hết các nhu cầu cơ bản. Các bạn tham khảo:
Đoạn css reset phải được viết trước tiên, sau đó mới load đến các css khác.

/*reset css*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,dfn,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
border:0;
font:inherit;
font-size:100%;
margin:0;
padding:0;
vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display:block;}
body{ line-height:1;}
ol,ul{ list-style:none;}
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:none;}
table{ border-collapse:collapse; border-spacing:0;}
b,u,i,del,em {/*lấy mặc định*/}
/*tùy ý css*/
...