html預設的樣式

2021-06-18 23:38:52 字數 4216 閱讀 1116

各種html標籤:h1-h6,p,ul,ol,dl…即使沒有給他們定義樣式屬性值,他們在瀏覽器中顯示時,也會具有各種樣式屬性(主要是字型大小和各種間距)。這是因為瀏覽器和css給這些標籤設定了預設的樣式屬性值,各種版本的瀏覽器和css可能略有差別,下面列舉的是firefox 1.5 和css 2.1(ie)設定的一些常見標籤的預設樣式屬性值。

html樣式

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre /*以上列表元素預設狀態下一塊狀顯示,未顯示的將以內聯元素顯示,該列表針對html4版本,部分元素在xhtml1中將廢棄*/

li /*預設以列表顯示*/

head /*預設不顯示*/

table /*預設為**顯示*/

tr /*預設為**行顯示*/

thead /*預設為**頭部分組顯示*/

tbody /*預設為**行分組顯示*/

tfoot /*預設為**底部分組顯示*/

col /*預設為**列顯示*/

colgroup /*預設為**列分組顯示*/

td, th /*預設為單元格顯示*/

caption /*預設為**標題顯示*/

th /*預設為**標題顯示,呈現加粗居中狀態*/

caption /*預設為**標題顯示,呈現居中狀態*/

body

h1 h2

h3 h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu

h5 h6

h1, h2, h3, h4, h5, h6, b,strong

blockquote

i, cite, em,var, address

pre, tt, code, kbd, samp

pre

button, textarea, input, object, select

big

small, sub, sup

sub /*定義sub元素預設為下標顯示*/

sup /*定義sub元素預設為上標顯示*/

table

thead, tbody, tfoot /*定義表頭、主體表、表腳元素預設為垂直對齊*/

td, th /*定義單元格、列標題預設為垂直對齊預設為繼承*/

s, strike, del /*定義這些元素預設為刪除線顯示*/

hr /*定義分割線預設為1px寬的3d凹邊效果*/

ol, ul, dir, menu, dd

ol ol ul, ul ol, ul ul, ol ol

u, ins

br:before /*定義換行元素的偽物件內容樣式*/

:before, :after /*定義偽物件空格字元的預設樣式*/

center

abbr, acronym

:link, :visited

:focus

/* begin bidirectionality settings (do not change) */

bdo[dir="ltr"] /*定義bdo元素當其屬性為dir="ltr"時的預設文字讀寫顯示順序*/

bdo[dir="rtl"] /*定義bdo元素當其屬性為dir="rtl"時的預設文字讀寫顯示順序*/

*[dir="ltr"] /*定義任何元素當其屬性為dir="ltr"時的預設文字讀寫顯示順序*/

*[dir="rtl"] /*定義任何元素當其屬性為dir="rtl"時的預設文字讀寫顯示順序*/

@media print

h1, h2, h3,    h4, h5, h6

ul, ol, dl

}瀏覽器預設樣式

1.頁邊距

ie預設為10px,通過body的margin屬性設定

ff預設為8px,通過body的padding屬性設定

要清除頁邊距一定要清除這兩個屬性值

body

2.段間距

ie預設為19px,通過p的margin-top屬性設定

ff預設為1.12em,通過p的margin-bottom屬性設

p預設為塊狀顯示,要清除段間距,一般可以設定

p 3.標題樣式

h1~h6預設加粗顯示:font-weight:bold;。

預設大小請參上表

還有是這樣的寫的

h1 h2

h3 h4

h5 h6

個大瀏覽器預設字型大小為16px,即等於medium,h1~h6元素預設以塊狀顯示字型顯示為粗體,

要清除標題樣式,一般可以設定

hx 4.列表樣式

ie預設為40px,通過ul、ol的margin屬性設定

ff預設為40px,通過ul、ol的padding屬性設定

dl無縮排,但起內部的說明元素dd預設縮排40px,而名稱元素dt沒有縮排。

要清除列表樣式,一般可以設定

ul, ol, dd

5.元素居中

ie預設為text-align:center;

ff預設為margin-left:auto;margin-right:auto;

6.超連結樣式

a 樣式預設帶有下劃線,顯示顏色為藍色,被訪問過的超連結變紫色,要清除鏈結樣式,一般可以設定

a 7 滑鼠樣式

ie預設為cursor:hand;

ff預設為cursor:pointer;。該宣告在ie中也有效

8 鏈結樣式

ie預設為紫色2px的邊框線

ff預設為藍色2px的邊框線

要清除鏈結樣式,一般可以設定

img

em相對長度單位。相對於當前物件內文字的字型尺寸。

如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。

ex相對長度單位。相對於字元「x」的高度。此高度通常為字型尺寸的一半。

如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。

px畫素(pixel)。相對長度單位。

畫素是相對於顯示器螢幕解析度而言的。譬如,wondows的使用者所使用的解析度一般是96畫素/英吋。而mac的使用者所使用的解析度一般是72畫素/英吋。

pt點(point)。絕對長度單位。

em vs px

em指字型高,任意瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中宣告font-size=62.5%,這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10,然後換上em作為單位就行了。

em有如下特點:

1. em的值並不是固定的;

2. em會繼承父級元素的字型大小。 

長度單位優化方法:

1. body選擇器中宣告font-size=62.5%;

2. 將你的原來的px數值除以10,然後換上em作為單位;

簡單吧,如果只需要以上兩步就能解決問題的話,可能就沒人用px了。經過以上兩步,你會發現你的**字型大得出乎想象。因為em的值不固定,又會繼承父級元素的大小,你可能會在content這個div裡把字型大小設為1.2em, 也就是12px。然後你又把選擇器p的字型大小也設為1.2em,但如果p屬於content的子級的話,p的字型大小就不是12px,而是1.2em=1.2 * 12px=14.4px。這是因為content的字型大小被設為1.2em,這個em值繼承其父級元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作為其子級,em則繼承content的字型高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

3. 重新計算那些被放大的字型的em數值。避免字型大小的重複宣告,也就是避免以上提到的1.2 * 1.2= 1.44的現象。比如說你在#content中宣告了字型大小為1.2em,那麼在宣告p的字型大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字型高而變為了1em=12px。

4.以上方法得到的12px(1.2em)大小的漢字在ie中並不等於直接用12px定義的字型大小,而是稍大一點。解決方法:只需在body選擇器中把62.5%換成63%就能正常顯示了。

HTML元素的預設樣式

為什麼需要預設樣式?在html發展初期,還沒有css檔案,另外,css檔案可能不能載入,所以這裡預設樣式就是必要的。預設樣式帶來的問題,會影響我們寫css,需要我們覆蓋預設樣式。還有一些預設樣式是很難覆蓋的,比如下拉框的預設樣式,是很難去覆蓋的。demo2 7.html div元素 既然元素預設樣式...

HTML預設樣式重置

doctype html utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge default style title 表示所有元素 style head 一般開發都會先...

HTML的各個標籤的預設樣式

head body button,textarea,input,object,select ol,ul,dir,menu,dd i,cite,em,var,address 塊級元素 html,body,div,ol,p,ul,h1,h2,h3,h4,h5,h6,address,blockquote,...