CSS重置樣式

lanfang發表於2017-07-28
CSS

先來看看各大型網站的重置樣式

新浪初始化

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
  margin: 0;
  padding: 0
}
fieldset,img {
   border: 0
}
img {
  display: block
}
address,caption,cite,code,dfn,th,var {
    font-style: normal;
    font-weight: normal
}
ul,ol {
    list-style: none
}
input {
    padding-top: 0;
    padding-bottom: 0;
    font-family: "SimSun","宋體"
}
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
select,input {
    vertical-align: middle
}
select,input,textarea {
    font-size: 12px;
    margin: 0
}
 input[type="text"],input[type="password"],textarea {
    outline-style: none;
    -webkit-appearance: none
}
textarea {
    resize: none
}
table {
    border-collapse: collapse
}

京東的初始化

* {
    margin: 0;
    padding: 0
 }
em,i {
    font-style: normal
}
li {
    list-style: none
}
img {
    border: 0;
    vertical-align: middle
}
button {
    cursor: pointer
}
a {
    color: #666;
    text-decoration: none
}
a:hover {
    color: #c81623
}

我對樣式重置的看法

一、什麼時候會用重置樣式？

1、其實每個網站的重置樣式應該都是不同的。
2、沒有必要的樣式或者是會再次對這個標籤寫樣式的時候，瀏覽器就會二次渲染，所以也要儘量的減少重置樣式。
3、我們應該合理靈活的使用標籤，在網頁中有些樣式是一模一樣的，比如所有或者是大部分的文字p標籤中字型樣式一樣而且行高也一樣，那麼可以統一設定。包括其他標籤，在大量使用的過程中可以統一設定margin,padding,width,height,display,text-align等，這樣可以減少css樣式，程式碼簡潔，可讀可改性高。

二、怎麼用重置樣式？

1、重置css可以整體的調整整個網站的基本樣式，比如網頁佔據的大部分字型樣式，字型大小，字型顏色，還有最基本的有序無序列表和a連結的樣式。
2、在一批擁有同樣的頭部腳部的樣式中，我會把公共的樣式放在重置樣式表裡。
3、還有針對網站的個別標籤的樣式特殊處理，比如我所有的a連結都應該是藍色的等。
4、在需要大幅度使用的樣式的時候，會另取一個類名主要針對需要此樣式的標籤，比如flyLeft{float:left};，flyRight{float:right};向左向右浮動的樣式，或者是清除浮動的樣式。

我的重置樣式表

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{
    margin: 0;
}   
ol,ul{
    margin: 0; 
    padding: 0;
}
li{
    list-style: none
}
input,button,textarea{
    padding: 0;
}
/*另外：button和input本身有2px的邊框，textarea和select本身有1px的邊框，根據實際情況調整，或是去掉邊框*/
table{
    /*為表格設定合併邊框模型*/
    border-collapse: collapse;
    /*設定表格邊框之間的空白*/
    border-spacing: 0px;
}
/*去掉a連結的下劃線*/
a{ 
    text-decoration: none;
}
a:hover{ 
    text-decoration: none;
}
/*個別瀏覽器對語義化標籤的相容*/
header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
h1,h2,h3,h4,h5,h6,em,i,b,cite {
    /*字型樣式不加粗*/
    font-weight: normal;
    font-style: normal;
}
a,input,button {
      /* 清除點選陰影 */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
body * {
    /* 選中文字設定 */
    -weibkit-user-select: none;
     /* 禁止文字縮放 */
    -webkit-text-size-adjust: 100%;
}

相關文章