Saturday , 16 October 2021
HOT

Tự tạo file reset.css cho 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

/* v1.0 | 20080212 */
 
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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
/* remember to define focus styles! */
:focus {
    outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Ngoài ra bạn có thể tạo thêm 2 class riêng để định nghĩa thuộc tính float:

.fl { float:left; }
.fr { float:right }

và clearfix

.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%;
}

Bài viết được sưu tầm & tổng hợp (có tham khảo trên v a n n y n e o)

Leave a Reply

Your email address will not be published. Required fields are marked *

*