Click here to
get yummy grain feed
delivered to your RSS oven

rss

  • Businesswing Design BLOG
  • Assist to join the global market.
[CSS]HTML5 Reset Stylesheet

Date:二月 2, 2010 | Author:hikaru

HTML5 Reset Stylesheet

CSS reset是為了方便我們處理css layout跨瀏覽器平台,所面臨各家瀏覽器css預設值不一的情形,藉由css reset來解決此一問題。

然後,在現階段各家瀏覽器紛紛支援HTML5之下,當然,css reset也要有所調整以應該新增加的tag。

原始碼

/* 
html5doctor.com Reset Stylesheet
v1.4 
2009-07-27
Author: Richard Clark
*/

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, dialog, figure, footer, header, 
hgroup, menu, nav, section,
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, dialog, figure, footer, header, 
hgroup, 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;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

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 #000;
    cursor:help;
}

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

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

基本概念

移除了在HTML5規範中已經不被使用的標籤,如<acronym><font><big>等;新增了一些元素,如<header><article><footer>,共且明確的指定這些塊級元素的樣式為block。

關於HTML5規範中新定義的元素,可以前往W3Schools中的HTML 5 Tag Reference查閱。

以上原始碼出自html5doctor

Post to Twitter Post to Plurk Post to Yahoo Buzz Post to Delicious Post to Digg Post to Facebook Post to MySpace Post to Ping.fm Post to Reddit Post to StumbleUpon

    

Leave a Reply

     top