HTML的各個(gè)標(biāo)簽的默認(rèn)樣式

在HTML中,了解各個(gè)標(biāo)簽的默認(rèn)樣式伍纫,有助于理解代碼的表現(xiàn)隆夯,也有利于精簡代碼钳恕。(??? ? ???)

head{ display: none }
body{ margin: 8px;line-height: 1.12 }      
button, textarea,input, object,select  { display:inline-block;}
ol, ul, dir,menu, dd{ margin-left: 40px }
i, cite, em,var, address{ font-style: italic }

//塊級元素
html, body,  div,ol, p, ul,  h1, h2,h3,h4,h5, h6, 
address,blockquote, form,
dd,dl, dt, fieldset, frame, frameset,noframes,center, dir, hr, menu, pre   
{ display: block }

//列表元素
li{ display:list-item }
ol{list-style-type: decimal }
ol ul, ul ol,ul ul, ol ol  { margin-top: 0; margin-bottom: 0 }

//標(biāo)題 
h1{ font-size:2em; margin: .67em 0 }
h2{ font-size:1.5em; margin: .75em 0 }
h3{ font-size:1.17em; margin: .83em 0 }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0}
h5 { font-size:.83em; margin: 1.5em 0 }
h6{ font-size:.75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong  { font-weight: bolder }


//偽類
br:before{ content: ”\A” }
:before, :after{ white-space: pre-line }
:link, :visited { text-decoration: underline }
:focus{ outline: thin dotted invert }


//表格
table{ display: table }
tr{ display:table-row }
thead{ display:table-header-group }
tbody{ display:table-row-group }
tfoot{ display:table-footer-group }
col{ display:table-column }
colgroup{ display:table-column-group }
td, th{ display: table-cell;}
caption{ display: table-caption }
th{font-weight: bolder; text-align: center }
caption{ text-align: center }
table{ border-spacing: 2px;}
thead, tbody,tfoot { vertical-align:middle }
td, th { vertical-align:inherit }

//其它元素
blockquote{ margin-left: 40px;margin-right: 40px }
pre, tt, code,kbd, samp  { font-family: monospace }
pre{ white-space: pre}
big{ font-size:1.17em }
small, sub, sup{ font-size: .83em }
sub{ vertical-align:sub }
sup{ vertical-align:super }
s, strike, del{ text-decoration: line-through }
hr{ border: 1px inset }
u, ins{ text-decoration:underline }
center{ text-align: center }
abbr, acronym{ font-variant: small-caps; letter-spacing:0.1em }

 BDO[DIR="ltr"]  { direction: ltr; unicode-bidi:bidi-override }
 BDO[DIR="rtl"]  { direction: rtl; unicode-bidi:bidi-override }
 /*定義BDO元素當(dāng)其屬性為DIR="ltr/rtl"時(shí)的默認(rèn)文本讀寫顯示順序*/
 *[DIR="ltr"]{ direction: ltr;unicode-bidi: embed }
 *[DIR="rtl"] { direction: rtl;unicode-bidi: embed }
 /*定義任何元素當(dāng)其屬性為DIR="rtl/rtl"時(shí)的默認(rèn)文本讀寫顯示順序*/
 @media print { 
       h1{page-break-before: always }
       h1, h2, h3,h4, h5, h6    { page-break-after: avoid }
       ul, ol, dl{ page-break-before: avoid }
  } /*定義標(biāo)題和列表默認(rèn)的打印樣式*/

瀏覽器默認(rèn)樣式##

  1. 頁邊距
    IE默認(rèn)為10px,通過body的margin屬性設(shè)置
    FF默認(rèn)為8px吮廉,通過body的padding屬性設(shè)置
    要清除頁邊距一定要清除這兩個(gè)屬性值
    body {
    margin:0;
    padding:0;
    }

  2. 段間距
    IE默認(rèn)為19px苞尝,通過p的margin-top屬性設(shè)置
    FF默認(rèn)為1.12em,通過p的margin-bottom屬性設(shè)
    p默認(rèn)為塊狀顯示宦芦,要清除段間距宙址,一般可以設(shè)置
    p {
    margin-top:0;
    margin-bottom:0;
    }

  3. 標(biāo)題樣式
    h1~h6默認(rèn)加粗顯示:font-weight:bold;
    默認(rèn)大小請參上表
    還有是這樣的寫的
    h1 {font-size:xx-large;}
    h2 {font-size:x-large;}
    h3 {font-size:large;}
    h4 {font-size:medium;}
    h5 {font-size:small;}
    h6 {font-size:x-small;}
    個(gè)大瀏覽器默認(rèn)字體大小為16px调卑,即等于medium抡砂,h1~h6元素默認(rèn)以塊狀顯示字體顯示為粗體,
    要清除標(biāo)題樣式恬涧,一般可以設(shè)置
    hx {
    font-weight:normal;
    font-size:value;
    }

  4. 列表樣式
    IE默認(rèn)為40px注益,通過ul、ol的margin屬性設(shè)置
    FF默認(rèn)為40px溯捆,通過ul丑搔、ol的padding屬性設(shè)置
    dl無縮進(jìn),但起內(nèi)部的說明元素dd默認(rèn)縮進(jìn)40px提揍,而名稱元素dt沒有縮進(jìn)啤月。
    要清除列表樣式,一般可以設(shè)置
    ul, ol, dd {
    list-style-type:none;
    margin-left:0;
    padding-left:0;
    }

  5. 元素居中
    IE默認(rèn)為text-align:center;
    FF默認(rèn)為margin-left:auto;margin-right:auto;

  6. 超鏈接樣式
    a 樣式默認(rèn)帶有下劃線劳跃,顯示顏色為藍(lán)色谎仲,被訪問過的超鏈接變紫色,要清除鏈接樣式刨仑,一般可以設(shè)置
    a {
    text-decoration:none;
    color:#colorname;
    }

  7. 鼠標(biāo)樣式
    IE默認(rèn)為cursor:hand;
    FF默認(rèn)為cursor:pointer;該聲明在IE中也有效

  8. 圖片鏈接樣式
    IE默認(rèn)為紫色2px的邊框線
    FF默認(rèn)為藍(lán)色2px的邊框線
    要清除圖片鏈接樣式郑诺,一般可以設(shè)置
    img {
    border:0;
    }

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市杉武,隨后出現(xiàn)的幾起案子辙诞,更是在濱河造成了極大的恐慌,老刑警劉巖艺智,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件倘要,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)封拧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進(jìn)店門志鹃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人泽西,你說我怎么就攤上這事曹铃。” “怎么了捧杉?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵陕见,是天一觀的道長。 經(jīng)常有香客問我味抖,道長评甜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任仔涩,我火速辦了婚禮忍坷,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘熔脂。我一直安慰自己佩研,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布霞揉。 她就那樣靜靜地躺著旬薯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪适秩。 梳的紋絲不亂的頭發(fā)上绊序,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天,我揣著相機(jī)與錄音秽荞,去河邊找鬼政模。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蚂会,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播耗式,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼胁住,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了刊咳?” 一聲冷哼從身側(cè)響起彪见,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎娱挨,沒想到半個(gè)月后余指,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年酵镜,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了碉碉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡淮韭,死狀恐怖垢粮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情靠粪,我是刑警寧澤蜡吧,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站占键,受9級特大地震影響昔善,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜畔乙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一君仆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧啸澡,春花似錦袖订、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至皮服,卻和暖如春楞艾,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背龄广。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工硫眯, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人择同。 一個(gè)月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓两入,卻偏偏與公主長得像,于是被迫代替她去往敵國和親敲才。 傳聞我的和親對象是個(gè)殘疾皇子裹纳,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • <a name='html'>HTML</a> Doctype作用紧武?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)剃氧、<...
    clark124閱讀 3,462評論 1 19
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號(hào)獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,524評論 32 459
  • 人生就像一場戲,而我們每個(gè)人阻星,只不過是在這人生的大舞臺(tái)上朋鞍,扮演著各自不同的角色。 而這個(gè)世界總會(huì)眷顧快樂演繹好的人...
    桃情閣寫手阿楊閱讀 585評論 0 1
  • 起床了,因?yàn)榭?點(diǎn)才醒來滥酥,我并沒有迎著早上的第一縷陽光更舞。昨天又沒有睡好,總是不知道在 想什么恨狈。We don't t...
    Yuki_Liu閱讀 224評論 0 0