css知識點2@qunar

標籤：style   java   color   使用   os   檔案   

1、import

　　import要放在內部規則前面，不然就會無效；

　　impor 引入多個檔案，會出現閃爍，瀏覽器會先去下載import引入的css檔案，然後再去解析，應該避免使用import

2、important

　　important優先順序最高。但important IE6下的bug;

　　IE6及以下瀏覽器有個比較顯式的支援問題存在，!important並不覆蓋掉在同一條樣式的後面的規則。請看下述代碼： 

　　div{color:#f00!important;color:#000;}　　在上述代碼中，IE6及以下瀏覽器div的文本顏色為#000　　!important並沒有覆蓋後面的規則；其它瀏覽器下div的文本顏色為#f00

　　div{color:#f00!important;}　　div{color:#000;}　　在上述代碼中，IE6及以下瀏覽器中div的文本顏色表現與其它瀏覽器一致，都為#f00  

3、調適型配置

　　overflow:hidden，通過設定overflow:hidden;可以使得content寬度自適應。

　　<style>　　.demo{width:960px;height:500px;margin:0 auto;　　}　　.aside{float:left;width:200px;height:200px;margin-right:20px;background:#aaa;　　}　　.content{height:200px;overflow:hidden;background:#0ff;　　}　　.inner{margin:0 10px 0 10px;　　}</style>

 

　　<div class="demo"><div class="inner"><div class="aside">aside</div></div><div class="content">通過設定overflow:hidden;可以使得content寬度自適應,但是如果把aside的float設定成left，還要調整邊距</div>　　</div>

4、行高

　　IE6 元素有固定的行高，當高度小於最小的行高時，即使定義更小的高度仍然會失效。但可以通過設定overflow:hidden解決

 .demo{ width:500px;height:1px;overflow:hidden;background:#aaa;}<div class="demo"></div>

5、css選取器

　　1.子選取器E>F，選擇所有作為E元素的子項目F。

　　2.相鄰選取器 E+F，選擇緊貼在E元素之後F元素。

　　3.兄弟選取器 E~F，選擇E元素後面的所有兄弟元素F。

　　4.nth-child（n），n是從1開始計數的，類似這樣的都是從1開始計數。

　　5.E:last-child：匹配父元素的最後一個子項目E。要使該屬性生效，E對象必須是某個對象的子項目。

6、target

　　匹配相關url指向的元素；

　　.b:target{color:#f00}　　<a href="#a">click</a>　　<div id="a">change red</div>

　　css target使用前提：a便簽的href的取值要與匹配的便簽的id一致；

7、增強表單

　　為什麼加大響應地區：

　　增強使用者體驗

　　以複選框為例：

 

　　　　原本：你只能點擊中複選框才能選中或者取消選中
　　　　增強：當你點擊複選框或它旁邊的文本時都能選中或者取消選中

　　

使用label標籤：
　　<label for="blue"><input type="checkbox" id="blue" />藍色</label>
或者：

　　<input type="checkbox" id="blue" /><label for="blue">藍色</label>
　　

　　這裡利用的是 label 標籤的 for 屬性，for 的值和需要加強響應地區的複選框的id相同即可，與位置無關；
　　
　　在label中設定for屬性，使其取值等於input id的取值，來相容ie6；

 

　　想在一行的最後，點擊任然可以選中，可以這樣設定，感覺這樣需求不多

　　 <label for="blue"><input type="checkbox" id="blue" />藍色</label>　　.label{　　display:block;  /*因為行內元素沒有寬高*/　　}　　<label for="blue"><input type="checkbox" id="blue" />藍色</label>

8、checked偽類

　　匹配使用者介面上處於選中的元素，常用於input type為radio與checkbox；

　　<style>input:checked+span{background:#f00;}input:checked+span:after{content:" 我被選中了";}　　</style>

　　<form method="post" action="#"><fieldset> <legend>選中下面的項試試</legend> <ul> <li><label><input type="radio" name="colour-group" value="0" /><span>藍色</span></label></li> <li><label><input type="radio" name="colour-group" value="1" /><span>紅色</span></label></li> <li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li> </ul></fieldset><fieldset> <legend>選中下面的項試試</legend> <ul> <li><label><input type="checkbox" name="colour-group2" value="0" /><span>藍色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="1" /><span>紅色</span></label></li> <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li></ul></fieldset>　　</form>

　　checkbox可以實現選中多個，不互斥；而radio可以實現互斥，只能選中其中的一個。

　　通過checked可以實現隱藏、顯示之間的切換。

9、transform

　　允許我們對元素進行旋轉、縮放、移動或傾斜，這裡只對縮放進行解釋；

　　瀏覽器預設字型大小是12px，如果希望頁面字型大小為10px；

　　<style>　　.demo{font-size:11px;-webkit-transform:scale(10/12);　　}　　span{display:inline-block;　　}　　</style>　　<span class="demo">非大聲道大神發</span>

　　 縮放比例是相對於瀏覽器預設的字型大小進行設定，還要對span進行設定

10、border

　　border-color的取值依賴於color的取值，同樣可以對border-color進行設定。