在網站編寫的時候,由於許多的標簽會有預設存在的樣式,比如P標簽的外邊距,a標簽的下劃線等等,通常我們會把這些預設樣式去除,以免在後面的編寫中造成諸多的不變。 1、擁有預設內外邊距的標簽 有些人會圖省事,清除內外邊距直接用*{margin:0;padding:0;},這樣子寫,在項目很小的時候,你會感 ...
在網站編寫的時候,由於許多的標簽會有預設存在的樣式,比如P標簽的外邊距,a標簽的下劃線等等,通常我們會把這些預設樣式去除,以免在後面的編寫中造成諸多的不變。
1、擁有預設內外邊距的標簽
有些人會圖省事,清除內外邊距直接用*{margin:0;padding:0;},這樣子寫,在項目很小的時候,你會感覺沒什麼,一旦項目大了以後,再這麼寫將會及其消耗網站的加性能,降低網站載入速度。
所以我們要瞭解哪些標簽預設會擁有內外邊距,再根據使用情況進行樣式初始化:
--------------------------------------------------------------------------------------------------常用的標簽-----------------------------------------------------------------------------------------------------------------------------
- body標簽:預設margin:8px;
- dl標簽,p標簽:預設margin-top:1em;margin-bottom:1em;
- dd標簽:預設margin-left:40px;
- ul、ol標簽:預設margin-top:1em;margin-bottom:1em;padding-left:40px;
- h1標簽~h6標簽:預設margin-top:0.67em;margin-bottom:0.67em;
- form標簽:預設margin-top:0em;
- fieldset標簽:預設margin-left:2px;margin-right:2px;padding:0.35em 0.75em 0.625em;
- legend標簽:預設padding-left:2px;padding-right:2px;
- input標簽:預設padding:1px 0px;
- textarea標簽:預設padding:2px;
- button標簽:預設padding:1px 6px;
- hr標簽:預設margin-top:0.5em;margin-bottom:0.5em;\
- pre標簽:預設margin:1em 0px 1em;
body,dl,dd,ul,ol,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{ margin:0; padding:0; } <!--以上標簽為最常用的,其餘若需要則再額外添加-->
2、網站的字體樣式
一般我們會在body標簽內書寫網站的整體字體樣式,然後局部位置文字樣式需要修改的在單獨進行修改
body,button,input,textarea,select{ font:12px/1.5 'Microsoft YaHei','arial','tahoma'; color:#666; } <!-- 一般設置字體大小12px,字體行高為1.5倍行距,字體樣式為‘微軟雅黑’或者‘宋體’ 字體顏色由網站風格決定
註意:表單元素並不繼承父級元素的字體樣式 -->
3、去掉table標簽邊距,讓其合併在一起
table { border-collapse:collapse; border-spacing:0; } <!-- 預設:border-collapse:separate;//設置單元格邊框是否合併 border-spacing:2px;//相鄰單元格邊框間的距離 -->
4、消除字體風格
i,em{ font-style:normal; } <!-- 預設是斜體(italic) --> b,strong{ font-weight:normal; } <!-- 預設是粗體(bold) -->
5、消除列表標簽前的標識物
ul,ol{ list-style:none; } <!-- 預設是:initial(預設值) -->
6、消除a標簽的下劃線、統一字體樣式
a{ text-decoration:none; color:inherit; } <!-- text-decoration:預設是underline(下劃線) color:預設是-webkit-link;顏色值為#00e; -->
7、清除Img標簽的邊框和垂直對齊方式
img{ border:none; verticla-align:middle; } <!-- border:ie預設有邊框 verticla-align:預設是baseline(基線) -->
說明:以上這些都是最常用到的,其他標簽的樣式初始化視情況再繼續添加。