1.CSS樣式初始化
不同的瀏覽器對有些HTML標籤屬性的預設值是不同的,為消除這種差異,需要對CSS進行初始化,即透過設定樣式及其屬性值,替代瀏覽器預設的屬性值。
2.京東首頁CSS初始化(1)CSS初始化樣式引入方式
採用引入外部樣式表的方式進行CSS初始化
(2)相關程式碼解讀
/* 京東CSS初始化 *//* *為萬用字元,表示html所有標籤 */* {margin: 0; /* 標籤外邊距為0*/padding: 0; /* 標籤內邊距為0*/} /* em、i表示斜體標籤 */em,i {font-style: normal; /* 表示標籤中內容不以斜體表示*/}/* li 表示列表標籤 */ li {list-style: none; /* 表示去掉列表的樣式,如前面圓點等*/}/* img 表示圖片標籤 */img {border: 0; /* 以下兩句表示 圖片與同級別行內元素middle對齊*/vertical-align: middle;}/* button 表示按鈕標籤 */button {cursor: pointer; /* 表示滑鼠樣式 小手 */}/* a 表示超連結標籤 */a {color: #666;text-decoration: none; /* 表示去掉超連結下劃線 */ } /* a:hover 表示a標籤的動態偽類選擇器 */a:hover {color: #c81623; /* 表示當滑鼠懸停在超連結上時,自體變為紅色 */} /* button、input表示按鈕標籤、表單輸入標籤 */button, input {/* 設定預設字型,包括unicode編碼的字型 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"\5B8B\4F53", sans-serif;} /* body 表示body標籤*/body {/* css3屬性(-webkit-font-smoothing)字型抗鋸齒渲染,字型更為平滑 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666;}/* 表示當class屬性的值包含hide、none時的樣式 */.hide,.none {display: none; /* 表示隱藏元素,且該元素空間可以被其他元素使用*/}/* 表示偽元素選擇器 用來清除浮動*/.clearfix:after {visibility: hidden; /* 為保證相容性 必要的固定設定*/clear: both; /* 清除浮動 必要的固定設定*/display: block; /* 清除浮 必要的動固定設定*/content: "."; /* 清除浮動 必要的固定設定*/height: 0; /* 可選的固定設定*/}.clearfix {/* 這是針對於IE6/7的,因為IE6/7不支援:after偽類,讓IE6/7的元素可以清除浮動來包裹內部元素。*/*zoom: 1;}
3.淘寶首頁CSS初始化(1)CSS初始化樣式引入方式
採用內部樣式的方式進行CSS初始化
(2)相關程式碼解讀
淘寶在進行CSS樣式初始化時,並沒有採用萬用字元*的方式設定標籤的內外邊距,而是將具體的標籤進行並集羅列。根據網上資料,萬用字元*,容易書寫,但是在大型網站中,會初始化所有標籤,會加大網站負荷,使得網站載入變慢。當然京東應該是做了最佳化的,不然網站體驗也會很差。
/* 淘寶CSS初始化 *//* 設定標籤的內外邊距為0 */blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin: 0;padding: 0;}/* 設定字型大小、行高及預設字型 */body,button,input,select,textarea {font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",sans-serif;}/* 字型大小同body中設定的一樣 */h1,h2,h3,h4,h5,h6 {font-size: 100%; }/* 字型不採用斜體展示 */address,cite,dfn,em,var {font-style: normal;}/* 設定預設字型 */code,kbd,pre,samp {font-family: courier new, courier, monospace;}/* 設定標籤為small的字型大小 */small {font-size: 12px;}/* 去掉字型列表樣式 */ol,ul {list-style: none;}/* 去掉a標籤下劃線 */a {text-decoration: none;}/* 設定動態偽類選擇器,滑鼠懸停其上時顯示下劃線 */a:hover {text-decoration: underline;}/* 設定垂直對齊方式,在右上角 */sup {vertical-align: text-top;}/* 設定垂直對齊方式,在右下角 */sub {vertical-align: text-bottom;}legend {color: #000;}fieldset,img {border: 0;}button,input,select,textarea {font-size: 100%; }button {border-radius: 0; } /* 設定表格相鄰邊框融合 */table {border-collapse: collapse;border-spacing: 0; }
4.尋找CSS樣式初始化程式碼技巧通常在CSS初始化程式碼中包含padding:0和margin:0的程式碼,表示將內外邊距設定為0;當找到該程式碼時,一般是找到了CSS樣式初始化的程式碼開頭。
最新評論