Tạo file reset css cho website

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. Sẽ có lúc bạn thiết kế được 1 mẫu giao diện rất đẹp trên trình duyệt này, nhưng khi chạy ở trình duyệt khác nó sẽ bị vỡ và hiển thị không theo như thiết kết. Và việc chúng ta nên làm trước tiên để giải quyết vấn đề này là thiết lập lại thuộc tính css ban đầu của các thẻ, để tránh được sự khách biệt ở các trình duyệt khác nhau càng nhiều càng tốt.

Để thực hiện reset, ta dùng đoạn mã sau, tất nhiên các bạn có thể tùy biến để phù hợp hơn với project của bạn đang phát triển

./*
Copyright (c) 2011,  Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html {
    color: #000;
    background: #FFF;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var {
    font: inherit;
}
del, ins {
    text-decoration: none;
}
li {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: ''}
abbr, acronym {
    border: 0;
    font-variant: normal;
}
sup {
    vertical-align: baseline;
}
sub {
    vertical-align: baseline;
}
legend {
    color: #000;
}

Cách đơn giản nhất để sử dụng là bạn copy đoạn code trên vào 1 file css, tạm lấy tên là reset.css, sau đó thêm file css này vào phần <head></head> của website bạn

 

Related Post


Tạo menu nhanh chóng với CSS Menu Maker
Friday, August 16, 2013
Đây là một công cụ CSS rất được các freelancer ưa chuộn. Điểm mạnh của công cụ này là tạo ra thanh menu tùy ý và hiển thị rất tốt trên mọi trình duyệt. Theo nhà phát triển, bạn không cần phải có bất kỳ kiến thức gì về lập trình. Sau khi chọn được thanh menu ưng ý, toàn bộ source code CSS sẽ hiện ra để bạn copy. Và chỉ việc mang về dán vào web.
Top 10 Add-on Firefox dành cho người thiết kế web
Tuesday, July 30, 2013
Có rất nhiều add-on của Firefox add-on cho bạn tùy biến để mở rộng chức năng chính của trình duyệt. Có cả kho tiện ích khổng lồ cung cấp cho bạn, từ những công cụ như theo dõi lượng thời gian bạn tiêu tốn trên Internet, cho tới các công cụ truyền thông xã hội giúp bạn thuận tiện trong việc dùng các dịch vụ thông dụng cho trình duyệt như Twitter và Facebook.    
Search

Đăng ký nhận bài mới


Category

Blog Archive