html5reset.css là gì? hay còn gọi htmlreset.css là gì?

Đa số nhiều người thắc mắc và không biết htmlreset.css là gì hoặc html5reset.css là gì ? Thật ra hai tên gọi này chỉ là một nhưng một số trình duyệt mới bây giờ một số thẻ html5 được sử dụng còn một số trình duyệt củ thì thẻ html5 không được sử dụng. Tạm thời gọi theo trào lưu mới bây giờ là html5reset.css

Thường thì lúc mới đầu đi làm tớ không quan tâm vấn đề html5reset.css này cho lắm(nói chung là tớ không biết 😀 ) vì đa số coder html5, html cơ bản thường tự viết và không bao giờ dùng framework nhưng một người Front End Developer thì khác , họ biết phải sử dụng cái nào phù hợp nhất cho việc làm website mà vì thế htmlreset.css đã ra đời đối với tớ như vậy.

Firefox, Safari,  Opera, Cờ rôm (cốc cốc), chrome , IE tạm thời tớ biết được nhiêu đây thôi á nha. Tất cả trình duyệt này đều có cấu trúc và thẻ html khác nhau , và để đồng nhất tất cả chúng lại thì ta có htm5reset.css cơ bản chức năng nó là như vậy.

 

/* html5reset.css – 07/07/2014*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

body {
line-height: 1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}

nav ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}

a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}

/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}

/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}

input, select {
vertical-align: middle;
}

Responsive Grid System (CSS Framework )

Đa số người làm website đều mong muốn website của mình chạy tốt trên tất cả các trình duyệt từ pc , tablet cho đến tất cả các thiết bị smart phone và tôi là một trong những người nằm số đó với tiêu chí học hỏi và cải thiện không ngừng mong muốn làm ra những website đẹp và hiển thị tốt đó chính là tôi. Tôi không phải là người thông minh hay học giỏi gì hết nếu có gì sai sót hoặc có lỗi xin mọi người góp ý và khắc phục để chúng ta có được những nền tảng tốt đẹp hơn. Thân

Link hướng dẫn : http://www.responsivegridsystem.com/

Hôm nay chúng ta thử tìm hiểu Responsive Grid System có khác gì với các framework css khác.

Tất cả các framework css đều được chia thành 12 column (đó là điểm giống nhau).

Điểm đặc biệt của framework này Responsive 100% (không phải px).

Chúng ta thử tìm hiểu ví dụ đầu tiên trên trang này nhé.

http://www.grahamrobertsonmiller.co.uk/

width(100%) PC

7-7-2014 10-20-29 AM

 

480px (Smart Phone)

7-7-2014 10-44-02 AM

 

768px

7-7-2014 10-59-28 AM