Reset Css Trong Html
Khái niệm reset css rất cơ bản, chắc ai cũng biết, nhưng nó sẽ là mới cho những ai bắt đầu học web, cắt ráp layout. Lúc trước tôi làm theme wordpress cũng mới biết tới khái niệm này.
Reset css là làm cho các thành phần trong html trở về là 0, những thành phần trong css mang sẵn trong mình giá trị paading và margin, nên chúng ta rất khó để điều chỉnh cũng như tính toán trong việc ráp giao diện.
Đây là đoạn css mà tôi hay sử dụng
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;}cái này thì dùng cho html4, nó không có các thành phần html5, nếu bạn nào muốn reset cho html5 thì có thể dung đoạn code này cũng được, tương đối đầy đủ, dùng được cho html4 luôn nha các bạn ( nhắc chừng mấy bạn mới vào nghề )
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, 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 {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}các bạn copy đoạn code trên paste vào phần trên cùng của file css của bạn, nó làm cho các thành phần trở về điểm mốc là 0.
để tôi ví dụ cho bạn dễ hiểu: trên cây thước dài 20cm, mình muốn chấm 1 điểm ở cm thứ 5 thì ta cộng thêm 5 cm từ 0, nhưng khi cộng 5 nó lại lớn hơn 5, ví dụ là 7 chẳng hạn, có nghĩa là điểm mốc để tính nó không phải là 0 mà là 2. Để xác định đúng thì ta phải tính từ 0 trở đi.
Tôi thích một câu nói của Demon Walock đó là ” Bạn luôn phải bắt đầu từ đâu đó”, ai cũng bắt đầu từ con số 0. Bài viết có lẽ quá cũ và nhàm chán so với nhiều người nhưng mình nghĩ nó sẽ bổ ích cho khá nhiều người, đó là bước đầu để bạn làm nên 1 trang web với giao diện đẹp.
Nếu các bạn có copy bài viết của tôi hãy nhớ để link nguồn đến tôi nhé.
Bài viết có ích cho bạn thì nhấn like ở trên giúp tôi, khuyến khích tinh thần viết bài.
