Tạo file reset.css của riêng bạn
Rất nhiều người mới đến với CSS không nhận ra tầm quan trọng của việc tạo một file "reset.css". Tại sao lại như vậy? Bạn cần biết rằng, mỗi trình duyệt đều có một kiểu style mặc định sẵn, và không phải tất cả là giống nhau. Và khi bạn sắp xếp mọi thứ thật đẹp trên trình duyệt này rồi xem ở một trình duyệt khác bạn ngạc nhiên tự hỏi "tại sao ở đây lại bị cách ra vậy?", "tại sao chỗ này lại chui xuống dưới nhỉ?"...Và bạn sẽ tìm cách để sửa nó sao cho thể hiện được ở trình duyệt kia. Với kinh nghiệm từ bản thân, tôi khuyên bạn hãy bắt đầu làm CSS với file reset.css
Bước 1: Margin và padding: 0
Mặc định các trình duyệt sẽ thêm thuộc tính margin, padding vào rất
nhiều thẻ html. Điều dễ thấy nhất đó là 6px margin ở thẻ body. Và trong
thiết kế của bạn chắc rất ít khi có nó. Vậy hãy bắt đầu... cho nó về
zero
Bạn có thể thêm 1 cách đơn giản
* {margin: 0; padding: 0;}
Hoặc chi tiết các thẻ
body, html, div, blockquote, img, label, p,
h1, h2, h3, h4, h5, h6, pre, ul, ol, li, dl, dt,
dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}
Bước 2: Nắm quyền điều khiển tất cả các thẻ
Bạn cũng cần chú ý là các thẻ có kích thước font khác nhau ở những trình duyệt khác nhau. Bạn có thể chỉnh về kích thước riêng của bạn hoặc chỉ đơn giản là giá trị 100%h1, h2, h3, h4, h5, h6
{
font-size: 14px;
}
Tiếp theo, chúng ta sẽ tạo margin và padding cho từng phần riêng biệt, và ở đây, tôi cũng gỡ bỏ style của thẻ ul, ol
body
{
line-height: 1;
font-size: 12px;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: 5px 0;
margin: 0 15px;
}
ul, ol
{
list-style: none;
}
img
{
border: 0;
}
Bước 3: Mở rộng
Bạn có thể không cần làm bước này, trong bước này tôi chỉ đưa ra các class hay được sử dụng trong các project của mình.floatLeft
{
float: left;
}
.floatRight
{
float: right;
}
Và file reset.css của bạn
html,body,div,span,img,applet,embed,canvas,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,samp,small,strike,strong,sub,sup,tt,var,b,u,i,s,
center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,button,caption,tfoot,thead,tr,th
{
background-color: transparent;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
}
input,button,textarea,select,optgroup,option
{
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
body
{
line-height: 1;
}
ol,ul
{
list-style: none;
}
blockquote,q
{
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after
{
content: '';
content: none;
}
ins
{
text-decoration: none;
}
del,.del
{
text-decoration: line-through;
color:#f30
}
html
{
height: 100%;
}
body
{
background: #fff;
height: 100%;
word-wrap: break-word;
}
body,button,input,textarea
{
font: 12px Arial,Helvetica,sans-serif;
}
a
{
color: #03c;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
dt
{
font-weight: bold;
}
/*
table{
width: 100%;
border-collapse: separate;
border-spacing: 1px;
}
*/
td, th { vertical-align:middle}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
fieldset, img { border: 0; }
a:focus { outline: none; }
a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
p {
margin-top: 10px;
margin-bottom: 15px;
}
/*
ul, ol, dl {
margin: 10px 0;
padding-left: 30px
}
dl { margin: 10px 0; }
dd { padding-left: 40px; }
*/
fieldset {
margin: 10px 0 10px 0;
padding: 5px 10px 10px 10px;
border: 1px solid #c8c8c8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-khtml-border-radius: 3px;
}
legend {
padding: 0 10px 0 10px;
}
textarea { padding: 1px 0 1px 5px; }
option { padding: 0 0 1px 5px; }
.hidden,input[type='hidden'] { display: none; }
/*
input[type='text'],
input[type='password'] { padding: 1px 0 1px 5px; }
*/
button,
input[type='button'],
input[type='submit'] {
padding: 2px 4px 2px 1px;
line-height: 100%;
}
input[type='button'],
input[type='submit'],
input[type='checkbox'],
input[type='image'],
input[type='radio'],
input[type='reset'],
select,
button { cursor: pointer; margin-right:8px}
.input,input[type='text'],input[type='password'],select {
border: 1px solid #c8c8c8;
background: #ffffff;
vertical-align:middle
}
textarea:hover,
input[type='text']:hover,
input[type='password']:hover{ border-color: #aaaaaa; }
textarea:focus,
input[type='text']:focus,
input[type='password']:focus
{
border-color: #8c8c8c;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 10px;
font-weight: bold;
}
h1 { font-size: 1.5833em; margin-top: 25px; }
h2 { font-size: 1.3333em; margin-top: 25px; }
h3 { font-size: 1.1666em; margin-top: 15px; }
h4 { font-size: 1.0833em; margin-top: 15px; }
h5 { font-size: .8333em; margin-top: 10px; }
h6 { font-size: .8333em; margin-top: 10px; }
hr {
margin: 15px 0 15px 0;
display: block;
background: #c8c8c8;
height: 1px;
border: none;
}
q { font-style: italic; }
blockquote {
margin: 10px 0 10px 15px;
font-style: italic;
font-size: 130%
}
blockquote > *:first-child:first-letter { font-size: 150% }
pre {
margin: 10px 0 10px 0px;
padding: 5px 0 5px 10px;
border: 1px dotted #aab4be;
border-left: 10px solid #aab4be;
background: #fafafa;
font-size: 90%;
color: #2E8B57;
/* Browser specific (not valid) styles to make preformatted text wrap */
white-space: pre-wrap;
/* white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
}
acronym, abbr {
border-bottom: 1px dashed #969696;
cursor: help;
font-variant: small-caps;
text-transform: lowercase;
}
.w5,.width5{width: 4.999%}
.w8,.width8{width: 7.999%}
.w10,.width10{width: 9.999%}
.w15,.width15{ width: 14.999%}
.w18,.width18{ width: 18.333%}
.w20,.width20{ width: 19.999%}
.w25,.width25{ width: 24.999%}
.w30,.width30{ width: 29.999%}
.w35,.width35{ width: 34.999%}
.w40,.width40{ width: 39.999%}
.w45,.width45{ width: 44.999%}
.w50,.width50{ width: 49.999%}
.w55,.width55{ width: 54.999%}
.w65,.width65{ width: 64.999%}
.w75,.width75{ width: 74.999%}
.w80,.width80{ width: 79.999%}
.w100,.width100{ width: 100%}
.nowrap{white-space: nowrap}
.bold{font-weight:bold}
.fl,.float-left { float:left; }
.fr,.float-right { float:right }
.ca,.clear-all{clear:both}
.cl,.clear-left{clear:left}
.cr,.clear-right{clear:right;}
.center{text-align:center}
.left{text-align:left}
.justify{text-align:justify}
.right{text-align:right}
.lh16{line-height:16px}
.lh18{line-height:18px}
.lh20{line-height:20px}
.v-top,.valign-top{vertical-align:top}
.rc
{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
.rc-t{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-khtml-border-top-right-radius: 5px;
}
.rc-b{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-khtml-border-bottom-right-radius: 5px;
} 