css，css教程

css，css教程

今天將學習到的相關知識整理一下記錄下來

1、樣式初始化，因為瀏覽器的不同顯示的樣式效果也不同，所以需要將效果不同的樣式給替換或置空

1 @charset "UTF-8"; 2 /*設定預設編碼集*/ 3 /*css 初始化start */ 4 5 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { 6 margin: 0; 7 padding: 0; 8 } 9 10 /*各瀏覽器顯示不同，去掉邊框等預設樣式*/ 11 fieldset, img, input, button { 12 border: none; 13 padding: 0; 14 margin: 0; 15 outline-style: none; 16 } 17 18 ul, ol { 19 list-style: none; 20 } 21 22 input { 23 padding-top: 0; 24 padding-bottom: 0; 25 font-family: "SimSun", "宋體"; 26 } 27 28 select, input, textarea { 29 font-size: 12px; 30 margin: 0; 31 } 32 33 /*防止拖動 影響布局*/ 34 textarea { 35 resize: none; 36 } 37 38 /*去掉行內替換元素空白縫隙*/ 39 img { 40 border: 0; 41 vertical-align: middle; 42 } 43 44 table { 45 border-collapse: collapse; 46 } 47 48 body { 49 font: 12px/150% Arial, Verdana, "\5b8b\4f53"; /*宋體 unicode */ 50 color: #666; 51 background: #fff; 52 } 53 54 /*清除浮動*/ 55 .clearfix:before, .clearfix:after { 56 content: ""; 57 display: table; 58 } 59 60 .clearfix:after { 61 clear: both; 62 } 63 64 .clearfix { 65 *zoom: 1; /*IE/7/6*/ 66 } 67 68 a { 69 color: #666; 70 text-decoration: none; 71 } 72 73 a:hover { 74 color: #C81623; 75 } 76 77 h1, h2, h3, h4, h5, h6 { 78 text-decoration: none; 79 font-weight: normal; 80 font-size: 100%; 81 } 82 83 /*廢物利用*/ 84 s, i, em { 85 font-style: normal; 86 text-decoration: none; 87 } 88 89 /*公用類*/ 90 .w { 91 /*版心 提取 */ 92 width: 1210px; 93 margin: 0 auto; 94 } 95 96 .fl { 97 float: left; 98 } 99 100 .fr {101 float: right;102 }103 104 .al {105 text-align: left;106 }107 108 .ac {109 text-align: center;110 }111 112 .ar {113 text-align: right;114 }115 116 .hide {117 display: none;118 }119 120 /*css 初始化end*/View Code

 

2、i s em標籤的廢物利用

i標籤本來是italic意大利斜體的 標籤 但是後來結構樣式分離 這種表示樣式的標籤就廢棄了

其實span標籤完全可以，但是i標籤正好是icon表徵圖這個英文單詞的首字母，並且只有一個字母所以簡單。最初是bootstrap將其用於表示表徵圖，後來漸漸傳開，再後來s 和 em 這些也用來表示表徵圖了。

但是這些標籤有自身的預設樣式，在使用的時候要把預設樣式清除（樣式初始化中已經清楚）

 

3、小三角的詳細步驟

可以看到很多網站上有 類似 小三角的表徵圖或符號，它是由對◇圖案的遮擋來實現的

先確定內部內容的大小

然後確定遮罩盒子的大小 定位後寬高才可以生效 overflow:hidden後才能遮住

最後調整s的位置 盒子大小 以及 i的位置

可以看如下Demo效果顯示為：

1 html: 2 3 <li class="dropdown"> 4 送至：北京 5 <i><s>◇</s></i> 6 </li> 7 8 css: 9 .dropdown{10 position: relative;11 padding-right: 25px;12 }13 .dropdown i{14 width: 15px;15 height: 9px;16 overflow:hidden;17 position: absolute;18 top: 13px;19 right: 6px;20 }21 .dropdown s{22 font: 400 15px/15px consolas;23 color: #6A6A6A;24 position: absolute;25 top: -7px;26 left: 0px;27 } View Code

 

4、精靈圖：

主要講述好處：

減少http請求，提高頁面的效能，這是CSS Sprites最大的優點

減少圖片的位元組，多張圖片合并成1張圖片的位元組總是小於多張圖片的位元組總和

只需對一張集合的圖片命名就可以了，不需要對每一個小元素進行命名。

更換風格方便，只需要在一張圖片上修改顏色或樣式，整個網頁的風格就可以改變

注意：以顯示的位置為參照物，圖片移動。x越往右越大 y越往下越大，向上移動是y是負的。

 

5、清除浮動

在需要清除浮動的元素中加入clearfix類即可

1 /*清除浮動*/ 2 .clearfix:before, .clearfix:after { 3 content: ""; 4 display: table; 5 }/*在有該類的元素內部元素的前面和後面添加元素*/ 6 7 .clearfix:after { 8 clear: both; 9 }*只要after兩側有浮動元素，after就會跑到最下面，從而撐開帶有該類名的父盒子*/10 11 .clearfix {12 *zoom: 1; /*IE/7/6*/13 }View Code