動車臥鋪有幾層鋪(動車臥鋪有幾層?)
2024-01-22
更新時間:2024-01-23 00:06:09作者:未知
不同的瀏覽器對有些HTML標(biāo)簽屬性的默認(rèn)值是不同的,為消除這種差異,需要對CSS進(jìn)行初始化,即通過設(shè)置樣式及其屬性值,替代瀏覽器默認(rèn)的屬性值。
(1)CSS初始化樣式引入方式
采用引入外部樣式表的方式進(jìn)行CSS初始化
(2)相關(guān)代碼解讀
/* 京東CSS初始化 *//* *為通配符,表示html所有標(biāo)簽 */* {margin: 0; /* 標(biāo)簽外邊距為0*/padding: 0; /* 標(biāo)簽內(nèi)邊距為0*/}/* em、i表示斜體標(biāo)簽 */em,i {font-style: normal; /* 表示標(biāo)簽中內(nèi)容不以斜體表示*/}/* li 表示列表標(biāo)簽 */li {list-style: none; /* 表示去掉列表的樣式,如前面圓點等*/}/* img 表示圖片標(biāo)簽 */img {border: 0; /* 以下兩句表示 圖片與同級別行內(nèi)元素middle對齊*/vertical-align: middle;}/* button 表示按鈕標(biāo)簽 */button {cursor: pointer; /* 表示鼠標(biāo)樣式 小手 */}/* a 表示超鏈接標(biāo)簽 */a {color: #666;text-decoration: none; /* 表示去掉超鏈接下劃線 */}/* a:hover 表示a標(biāo)簽的動態(tài)偽類選擇器 */a:hover {color: #c81623; /* 表示當(dāng)鼠標(biāo)懸停在超鏈接上時,自體變?yōu)榧t色 */}/* button、input表示按鈕標(biāo)簽、表單輸入標(biāo)簽 */button,input {/* 設(shè)置默認(rèn)字體,包括unicode編碼的字體 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,"5B8B4F53", sans-serif;}/* body 表示body標(biāo)簽*/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, "5B8B4F53", sans-serif;color: #666;}/* 表示當(dāng)class屬性的值包含hide、none時的樣式 */.hide,.none {display: none; /* 表示隱藏元素,且該元素空間可以被其他元素使用*/}/* 表示偽元素選擇器 用來清除浮動*/.clearfix:after {visibility: hidden; /* 為保證兼容性 必要的固定設(shè)置*/clear: both; /* 清除浮動 必要的固定設(shè)置*/display: block; /* 清除浮 必要的動固定設(shè)置*/content: "."; /* 清除浮動 必要的固定設(shè)置*/height: 0; /* 可選的固定設(shè)置*/}.clearfix {/* 這是針對于IE6/7的,因為IE6/7不支持:after偽類,讓IE6/7的元素可以清除浮動來包裹內(nèi)部元素。*/*zoom: 1;}
(1)CSS初始化樣式引入方式
采用內(nèi)部樣式的方式進(jìn)行CSS初始化
(2)相關(guān)代碼解讀
淘寶在進(jìn)行CSS樣式初始化時,并沒有采用通配符*的方式設(shè)置標(biāo)簽的內(nèi)外邊距,而是將具體的標(biāo)簽進(jìn)行并集羅列。根據(jù)網(wǎng)上資料,通配符*,容易書寫,但是在大型網(wǎng)站中,會初始化所有標(biāo)簽,會加大網(wǎng)站負(fù)荷,使得網(wǎng)站加載變慢。當(dāng)然京東應(yīng)該是做了優(yōu)化的,不然網(wǎng)站體驗也會很差。
/* 淘寶CSS初始化 *//* 設(shè)置標(biāo)簽的內(nèi)外邊距為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;}/* 設(shè)置字體大小、行高及默認(rèn)字體 */body,button,input,select,textarea {font: 12px/1.5 tahoma, arial, "Hiragino Sans GB", "5b8b4f53",sans-serif;}/* 字體大小同body中設(shè)置的一樣 */h1,h2,h3,h4,h5,h6 {font-size: 100%;}/* 字體不采用斜體展示 */address,cite,dfn,em,var {font-style: normal;}/* 設(shè)置默認(rèn)字體 */code,kbd,pre,samp {font-family: courier new, courier, monospace;}/* 設(shè)置標(biāo)簽為small的字體大小 */small {font-size: 12px;}/* 去掉字體列表樣式 */ol,ul {list-style: none;}/* 去掉a標(biāo)簽下劃線 */a {text-decoration: none;}/* 設(shè)置動態(tài)偽類選擇器,鼠標(biāo)懸停其上時顯示下劃線 */a:hover {text-decoration: underline;}/* 設(shè)置垂直對齊方式,在右上角 */sup {vertical-align: text-top;}/* 設(shè)置垂直對齊方式,在右下角 */sub {vertical-align: text-bottom;}legend {color: #000;}fieldset,img {border: 0;}button,input,select,textarea {font-size: 100%;}button {border-radius: 0;}/* 設(shè)置表格相鄰邊框融合 */table {border-collapse: collapse;border-spacing: 0;}
通常在CSS初始化代碼中包含padding:0和margin:0的代碼,表示將內(nèi)外邊距設(shè)置為0;當(dāng)找到該代碼時,一般是找到了CSS樣式初始化的代碼開頭。
ps:【項目】淘寶項目邀請用戶即可獲取收益
ps:【活動】支付寶大額紅包點擊掃碼領(lǐng)取
ps:【本站主題】自適應(yīng)資訊類的網(wǎng)站主題