10_CSS入門和高級技巧(8)

圖片透明

先來複習一下盒子的透明問題：
opacity:0.6;
介於0~1之間，爲了讓IE兼容，咱們要使用IE本身的濾鏡：
filter:alpha(opacity=60);
盒子的透明，會讓裏面的全部內容都透明瞭，若是想要讓文字清晰，就不能把文字裝到盒子裏，要用絕對定位定。

圖片格式：

• jpg/jpeg：著名圖片壓縮格式，有壓縮算法，可以本身更改質量；即便質量是100，也是壓縮的，也是顏色失真的。沒有圖層，不能動。banner、新聞圖、焦點圖都要用jpg格式的圖片。
• png：不壓縮的，沒法調整質量。有圖層，放到服務器上的時候，要導出一下，平面化整個圖像，不要圖層，壓平。不能動。擅長作logo、幾何圖形比較規律的圖片，尺寸比jpg還要小：

支持透明和半透明。

• gif：嚴重失真，顏色數量只有25六、128…… 2種顏色。可以製做動畫。沒有圖層。
  支持透明，可是不支持半透明。
  

IE6的顯示有問題的：

因此如今咱們就能琢磨出來一種兼容性的解決方法：
在IE6中就是用gif來替代png
background: url(images/icon_v9.png) no-repeat 0 0;
_background-image: url(images/icon_v9.gif);

還有一種辦法，就是用一個神奇的js，來解決png的IE6透明問題。
老師給你一個png.js這個文件，這個文件業界比較著名，機理就是反編譯這張圖片，把全部的透明像素點都用IE特有的濾鏡來反編譯一下：
須要先「引包」：

<script type="text/javascript" src="png.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix(".haha,.xixi");
</script>

紅色的語句，就是引包，src裏面放置的就是js文件的相對路徑。
藍色的語句，是調用，圓括號裏面要放置全部須要解決png問題的圖片的選擇器。須要注意的是，選擇器能夠是img直接插入的，也能夠是背景圖片。

能夠用HTML hack，加一個殼，讓其餘瀏覽器不加載這個js代碼：

全部有背景定位的圖片，這個js包就有bug，就定位不許了。因此精靈圖就不要用這個js來解決了。
display:none;
加上這個屬性的元素，就如同HTML標籤沒有寫同樣。將會放棄本身的位置。後面的元素就會上來。

還有一種可讓元素隱藏的東西，叫作
visibility:hidden;
不會放棄如今的位置，就是本身隱藏掉了。就如同
opacity:0;

樣式表的組織

1.內嵌樣式表

原來把樣式寫在<style type=」text/css」> </style>叫作內嵌樣式表。內嵌樣式表，感受HTML和CSS沒有分開，可是有好處，能夠保證HTML加載的時候，就已經有樣式了。頁面不會出現CSS加載不正常的狀況。
若是樣式表外聯，可能出現極小機率的樣式表沒有請求成功的狀況，刷新一下就行了。

不過內嵌樣式表的問題更大，HTML、CSS混在一個文件了，很差維護；而且css也不能共用。

2.外聯樣式表

能夠把css單獨寫成一個.css文件，html頁面用link標籤來連接這個樣式表：
<link href=」css.css」 type=」text/css」 rel=」stylesheet」 />
link就是鏈接的意思，表示如今這個html頁面要連接一個樣式表；
href就是超文本地址的意思，和a裏面href同樣同樣的，相對路徑、絕對路徑都行；
type就是類型，text/css就是純文本的css類型
rel就是relationship，關係，就是我引用的這個文件和我這個html的關係，是stylesheet，樣式表。
「三小件兒」：href、type、rel

link是一個自封閉標籤，至此咱們已經見過的自封閉：

<img src=」1.jpg」 />
<input type=」button」 />
<meta name=」」 content=」」 />
<link href=」」 type=」」 rel=」」 />
<br />

這樣的好處很是明顯，就是:
1) HTML和CSS文件完全分離了！html文件裏面只有html結構了，css樣式放到了單獨的css文件中了；
2) 多個html文件，共享一個css文件了。頁面中相同的部分，就能夠引用一樣的樣式表，不用重寫了！

要注意兩個嚴重的問題：
1）外聯的css中，若是要用到背景圖片，那麼路徑是從css文件出發，而不是從html文件出發。
background:url(../images/1.jpg);
2）外聯樣式表不影響權重，就如同咱們的css寫在html頁面內的link那裏同樣，一樣是比選擇器權重、就近原則。

3.行內樣式

若是想給一個元素加一個樣式，能夠直接在這個元素的html標籤內加上style屬性就好了

<div style="color:red;border:1px solid red;width:800px;height:800px;font-family:'微軟雅黑','宋體';background:url(images/shishi.jpg) repeat-x 10px 10px;">文字</div>

行內樣式已經喪失了咱們的css的一些優勢，就沒有選擇器的概念了，由於就是給這一個元素加樣式（該繼承的仍是繼承）。因此工做不多用，後臺工程師愛用這個東西。
Chrome瀏覽器中，用element.style來表示行內樣式：

行內樣式的權重，是最大的，能夠認爲是寫在第4位的權重，比id厲害：
好比#box div.haha ul li 它的權重(1,1,3)
而<div style=」width:100px;color:red;」></div> 的權重(1,0,0,0)
任何的權重都比不上行內。沒有!important大。

<div id="father">
   <div style="color:red" id="box">
       文字
   </div>
</div>

#father #box{color:green;}
文字是紅色的，由於行內的權重是最大的。

4.導入式的樣式表

幾乎已經絕跡了，沒有人在用了。

<style type="text/css">
   @import url(css/css.css);
   body{
       background-color: pink;
   }
</style>

用@import url(地址) ， 這是一個固定的語法，沒有什麼好說的。就能夠把樣式表導入進來。
好比寫在第一行。這種寫法，就是一個理論上的意義，沒有實戰意義，由於感受是內嵌樣式表、外聯樣式表混合起來了。若是你要外聯，你就老實的用<link href=」」 />。若是內嵌，就老實內嵌。不要雜糅。

5.站點的css組織

css文件是分層次：

reset.css：讓全部的元素都有默認的樣式，好比ul沒有小圓點，好比h1的字號22px……
這是由於不一樣瀏覽器對標籤有不一樣的默認樣式，好比某個瀏覽器h1默認字號是22px，而有的是24px。
最最著名的reset.css就是雅虎公司的YUI的reset.css。
網址：http://yuilibrary.com/yui/docs/cssreset/

之後頁面上不容許出現這個：
*{margin:0;padding:0;}
有超過1秒的渲染時間。因此就要用h1,p,h2羅列出來，清除margin、padding。咱們的YUI reset.css就是這麼作的。
表格的邊框合併：
border-collapse: collapse;

這個樣式表不能更改，就是負責統一全瀏覽器默認樣式的，去掉了全部的margin、padding ，去掉了小圓點。

base.css 公共類，就是原子類

.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%}
.lh180{line-height:180%}
……
……

建議同窗們本身總結這些原子類。

common.css： 頁面和頁面之間，公共的樣式部分。
page.css: 每一個頁面本身的樣式

說道說道display:inline-block;

標準流的事兒，標準流把元素分爲行內、塊級。性質大相徑庭。

display:inline-block;
讓元素同時具備行內、塊級元素的性質。

設置爲行內快的元素，在高級瀏覽器中的表現和float：left;很是的像，有一個很是大的不一樣：
就是空白摺疊現象。代碼豎着寫，中間會摺疊成一個空格：

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

span也能設置寬度、高度了；
margin也好用。IE6中不讓默認的塊級元素轉爲行內塊。
display:inline-block;那麼好用，爲何不用，而是用浮動呢？

• 空白摺疊現象，元素貼邊愛有一個空格。
• 只有左，沒有右。
• 盒子加上inline-block以後，就和文本同樣同樣了，div轉爲inline-block，就和能設置寬高的span同樣了。
• 時代緣由，你們都愛寫浮動，inline-block在搶佔技術實施標準那幾年，沒有火起來。
  可是inline-block可以解決兼容性問題。

浮動的父元素不寫寬度，會自動收縮爲兒子的寬度；兒子不巧，轉塊了也沒寫寬度，因此要撐滿父親。
高級瀏覽器、IE七、IE8等：會盡全力知足父親的收縮，縮到不能縮位置；
IE6：會盡全力知足讓兒子撐滿。
解決辦法：
_display:inline-block;

iconfont

字體圖標：圖標不是圖標了，也不是精靈了，而是字了。
字怎麼是圖標，這個字在某一個字體下，就是圖標。
icomoon.io 是國外很是著名的一個字體圖標引擎，能夠免費的、在線把任何矢量圖片變成字體。

字體圖標的特色：

• 不用下載圖片了，就不浪費http請求了，可是要下載字體文件，到底省流量沒有，見仁見智。
• 只能是單色，不能是多個顏色。沒法制做彩色花圖標。
• 控制這個圖標，就用控制字體的方式來控制就好了。

icomoon裏面圖標很少：
美工來製做ai格式的圖標，能夠在icomoon裏上傳，而後改。