CSS基礎樣式庫

2021-10-16 12:50:29 字數 926 閱讀 4913

html標籤在各個瀏覽器中會有不同的預設屬性,reset.cssnormalize.css是我使用最頻繁的基礎樣式庫,他們都是為了解決相容性和統一視覺效果,但是其中的風格略有不同。

reset從單詞的意思就很好理解,重置、清零,它會把所有的標籤的margin、padding、border等等屬性重置掉。

normalize與reset不同之處在於,它不會重置標籤的預設屬性,而是保證標籤在各瀏覽器相容性的情況下保留下來了預設屬性。

同樣一段html,來看看reset與normalize展示出來的效果:

>

標題h1

>

>

pp>

type

="text"

>

>

>

>

1td>

>

2td>

>

3td>

tr>

>

>

4td>

>

5td>

>

6td>

tr>

table

>

>

>

1li>

>

2li>

>

3li>

ul>

使用reset的效果圖:

使用normalize的效果圖:

網上對比的文章很多,都列出了他們的優劣勢,其實更應該從專案本身考慮,適合哪個就用哪個,有句話很對,存在即合理。

CSS基礎樣式庫

推薦的base.css css reset body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td table fieldest,img address,capt...

CSS基礎樣式

css指層疊樣式表,它作用是控制頁面內容的外觀。這樣就可以將網頁的內容和表現形式分離。層疊的意思是 如果選擇器的權重相同,則後面元素的樣式會覆蓋前面樣式。css樣式表由選擇器和宣告兩個部分組成,其中選擇器是通過名字來標識元素的,宣告用於定義元素的樣式。a 樣式表比較常見的有三種引入方式 1.行內樣式...

CSS基礎樣式

顏色 單位 color 設定文字顏色 text align 設定文字對齊方式 letter spacing 字間距 line height 行高 text indent 首行縮排 text decoration 文字裝飾 text transform 大小寫轉換 text shadow 建立文字陰影...