Đăng Nhập

Vui lòng khai báo chính xác tên truy cập và mật khẩu!

Quên mật khẩu?

Đăng Ký

Bạn phải điền đầy đủ thông tin đăng ký!

  

[Tips] Normalize.css - Thiết kế web dễ dàng hơn với Reset CSS

    Quản trị viên

    avatar

    Bài viết : 89

    Tài sản : 275

    Uy tín : 7

    #1

     on 21.08.15 13:13 

    Các trình duyệt hiện nay đều có các thông số mặc định riêng cho cấu trúc trang web, việc này đôi lúc gây khó khăn cho người thiết kế, khi cần viết một trang web hiển thị giống nhau trên tất cả trình duyệt.
    Reset CSS là thuật ngữ nói đến một tệp, một đoạn CSS đồng bộ các tham số mặc định của các trình duyệt.


    Một CSS chuẩn cho tất cả trình duyệt?

    Ví dụ một mã reset CSS mà bạn thường gặp:
    Code:
    * {margin: 0; padding: 0;}
    Ngoài ra, bạn cũng cần reset thuộc tính CSS khác ở các thẻ HTML mà bạn dùng trong thiết kế của mình. Bạn có thể tự làm việc này, tuy nhiên bạn không cần vất vả thế, khi mà các tệp reset CSS đã được làm và chia sẽ khá phổ biến. Các tệp này được chia sẽ cũng khác nhau tùy theo tác giả, trong số đó thì tệp normalize.css được đánh giá cao và sử dụng phổ biến hơn cả.

    Một số thông tin

    Normalize.css là một dự án thực hiện bởi Nicolas Gallagher, và Jonathan Neal.
    Hỗ trợ đầy đủ các thuộc tính HTML5, và được sử dụng trong các dự án lớn như Bootstrap, HTML5 Boilerplate, YUI3, TweetDeck, Soundcloud, .... Không như phần lớn các tệp reset css khác, nó không reset toàn bộ mà vẫn giữ lại các thuộc tính css hữu ích, đồng bộ các thuộc tính css khác nhau trên các trình duyệt phổ biến và trên các thiết bị như di động, máy tính bảng.

    normalize.css hiện có có 2 phiên bản.

    Normalize.css v1 hỗ trợ trình duyệt cũ (IE 6+, Safari 4+)

    • Google Chrome
    • Mozilla Firefox 3+
    • Apple Safari 4+
    • Opera 10+
    • Internet Explorer 6+


    Normalize.css v3

    • Google Chrome (latest)
    • Mozilla Firefox (latest)
    • Mozilla Firefox 4
    • Opera (latest)
    • Apple Safari 6+
    • Internet Explorer 8+


    Bạn có thể download và theo dõi các bản cập nhật mới nhất tại: http://necolas.github.io/normalize.css/

    Dưới đây là code của Normalize.css đã rút gọn(loại bỏ các chú thích), bạn có thể chèn vào phần đầu của css diễn đàn:
    ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

    Code:
    /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
    Bạn có thể bỏ bớt đoạn CSS cho các tag HTML mà bạn không sử dụng.

    Hoặc đặt file Normalize.css vào Temp overall_header:
    ACP >> Display >> Templates >> QLTT >> overall_header

    Tìm:
    Code:
    {T_HEAD_STYLESHEET}
    Và đặt trước nó:
    Code:
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css" />


    Zzbaivong
    You cannot reply to topics in this forum