首頁  >  文章  >  web前端  >  詳談css樣式初始化

詳談css樣式初始化

php中世界最好的语言
php中世界最好的语言原創
2018-03-19 09:17:552545瀏覽

這次帶給大家詳談css樣式初始化 ,css的樣式初始化注意事項有哪些,下面就是實戰案例,一起來看一下。

在網站寫的時候,由於許多的標籤會有預設存在的樣式,像是P標籤的外邊距,a標籤的下劃線等等,通常我們會把這些預設樣式去除,以免在後面的編寫中造成諸多的不變。

1、擁有預設內外邊距的標籤

      有些人會圖省事,清除內外邊距直接用*{margin:0;padding:0;},這樣子寫,在專案很小的時候,你會感覺沒什麼,一旦專案大了以後,再這麼寫將會及其消耗網站的加性能,降低網站加載速度。

      所以我們要了解哪些標籤預設會擁有內外邊距,然後再依照使用情況進行樣式初始化:

-------------- -------------------------------------------------- ----------------------------------常用的標籤------------- -------------------------------------------------- -------------------------------------------------- ------------

  1. body標籤:預設margin:8px;

  2. ##dl標籤,p標籤:預設margin-top:1em;margin-bottom:1em;

  3. dd標籤:預設margin-left:40px;

  4. ul、ol標籤:預設margin-top:1em;margin-bottom:1em;padding-left:40px;

  5. h1標籤~h6標籤:預設margin-top:0.67em;margin-bottom:0.67em;

  6. form標籤:預設margin-top:0em;
  7. #fieldset標籤:預設margin-left:2px;margin-right:2px;padding :0.35em 0.75em 0.625em;
  8. legend標籤:預設padding-left:2px;padding-right

    :2px;
  9. input標籤:預設padding:1px 0px; 
  10. textarea標籤:預設padding:2px ;
  11. button標籤:預設padding:1px 6px;
  12. hr標籤:預設margin-top:0.5em;margin-bottom:0.5em;\
  13. #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(基线)
-->

說明:以上這些都是最常用到的,其他標籤的樣式初始化視情況再繼續增加。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:
jest測試react native元件的步奏是什麼

javascript的隱式呼叫詳解


React元件refs該怎麼使用

######

以上是詳談css樣式初始化的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn