1996年12月釋出css1

1998年5月釋出css2，隨後釋出了css2.1，css2.1的目標是使其適應html和xml。

直到現在css3還在開發中

《別具光芒css屬性、瀏覽器相容與網頁佈局》

video3.1

1.四種使用樣式表的方式

   內聯樣式表：或稱為行內樣式表，inline style，這種在標籤內以style屬性標記的為行內樣式，行內樣式只針對標籤內的元素有效，因其沒有和內容相分離，不建議使用。

   嵌入樣式表：或稱為內部樣式表，embedded style sheet，使用style標籤對。在<style type="text/css"></style>中每條樣式規則由選擇器和宣告組成：selector{property:value;property:value;...}，

   外部樣式表：link style sheets，副檔名一般為.css，通過link標籤匯入。它的內容前後不加<style></style>標籤，也不要添加註釋標籤。不僅可以更易於維護修改，還可以提高頁面速度，因為CSS檔案都能在瀏覽器中產生快取。內建在HTML文件中的CSS則會在每次請求中隨HTML文件重新下載。

   輸入樣式表：或稱為匯入樣式表，可以使用@import 把一個css檔案輸入到一個css檔案中，或輸入到<style></style>中。

   例如，輸入樣式表：

<style>
<!--
@import url(css1.css);
-->
</style>
 

 對於一些不能識別<style>標籤的瀏覽器，使用<!---->把樣式表包含起來，使用其忽略。而支援的瀏覽器會解讀樣式表。

靈活使用樣式表，由於瀏覽器先載入html，再載入css渲染，有時為了防止首頁加載出現無樣式的情況，會對首頁採用嵌入式樣式表的方法。

2.html selector：或稱為標籤重定義，或型別選擇符，以html標籤作為selector。

<style>
P{color:red;font-size:10px;}
</style>

通配選擇器 universal selector

用*表示所有的標籤元素，也可以表示某元素的所有後代元素，如div *。 

型別選擇器簡單明確，但針對性差。通常使用型別選擇器定義通用的css規則，然後再用其它方法定義特殊需求。

3.class selector：以自定義的類名作為selector，命名要根據顯示功能，而不要根據外觀。

獨立class選擇器：注意class1前面要加一個點

<style>
.class1{color:red}
</style>

也可以針對不同型別的元素重新設定css規則，如div1.class1{}。

多重class定義：一個標籤可以同時定義多個class，使用空格分開。例如：<div class=“one  two”></div>

4.id selector：在網頁中元素的id值都是唯一的，id selector用來定義某個特定的html元素的樣式。id只能以字母開頭。

例：注意在id1前要加#號

<style>
#id1{color:red}
</style>

id selector在javascript中廣泛使用；

儘量少用id selector；

還有一種限定元素型別的使用方法，如div#id1{}，注意div和#之間沒有空格。

5.關聯選擇器：或稱為派生選擇器，後代選擇器（descendant selector），包含選擇器，多重選擇器，包含選擇符，子選擇器。
   動作原理是建立在文件結構樹的基礎上。

   selector中用空格分隔多個標籤名，在網頁中是後面的標籤嵌在前面的標籤中。它比單一選擇器優先順序高。

   使用子選擇器可以使程式碼和CSS更加簡潔容易閱讀。

   這樣做的優點在於，幫我們避免過多的id、class設定，直接對所需的元素進行定義。

例如，html選擇器關聯：

<style>
P EM{color:red}
</style>

多重選擇器可以有多層，id選擇器，類選擇器和html選擇器關聯：

#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}
#menu ul li a:hover { background:#333; color:#fff;}

6.組合選擇器：或稱為組選擇器，群組選擇符，selector中用逗號分隔多個標籤名，為了減少相同的樣式規則定義的數量。

例如：

<style>
H1,H2{color:red}
</style>

 如果在使用時有個別元素需要定義獨立樣式，可以再加上新的定義，這可以覆蓋老的定義。

分組宣告是指 對於一個選擇符有多條宣告時，也可以分開書寫。

分組選擇器和分組宣告綜合應用，增強了css書寫的靈活性。

7.偽類：pseudo-classes，是對html元素的各種狀態和其包括的部分內容的樣式的定義。它比html選擇器名稱上多了冒號和狀態名

                            偽類（pseudo-class）可以在為HTML元素定義CSS屬性的時候，將條件和事件考慮在內。
   偽是因為它們實際上並不存在於原始檔或文件樹中。

   格式：html標籤:偽元素{property:value;property:value;...}

連結偽類：:link :visited

動態偽類：:hover :active :focus

子元素偽類： :first-child

語言偽類：:lang

通過類選擇器和偽類，可以為不同元素中的連結定義不同的效果。

偽元素：pseudo-letters，向文件中插入虛構的元素以實現一些效果。偽元素只能出現在選擇器的主體之後，

:first-line   首行

:first-letter 首字，first-line，first-letter可以用於任何塊級標籤。

:before 在元素內容之前插入其它內容

:after

h1:after 偽元素在元素之後新增內容。允許在元素內容的最後面插入生成內容。預設地這個偽元素是行內元素，可以使用屬性 display 改變這一點。

             例：h1:after {content:url(/i/w3school_logo_white.gif)}

類選擇器與偽元素一起使用：html標籤.類選擇器名:偽元素{property:value;property:value;...}

用CSS來定義連結的多個狀態樣式時，要注意它們書寫的順序，正確的順序是：:link :visited :hover :active。抽取第一個字母是LVHA，可以記憶成LoVe HAte(喜歡討厭)。
如果使用者需要用鍵盤來控制，需要知道當前連結的焦點，還可以定義:focus屬性。

例：

a:link { color: #06F; text-decoration: none; }
a:visited { color: #999; text-decoration: line-through; }
a:hover { color: #F00; text-decoration: underline; }
a:active { color: #F0F; }
注意：四種狀態的順序一定不能顛倒，否則有些不生效

例：首字下沉是css偽類上的又一個運用，它可以直接通過css樣式表向某個選擇器中的文字首字母新增特殊的樣式，而不需要把首字新增一個標籤或通過程式來實現，今天以製作word裡的首字下沉為例來講解，應用如下偽元素：:first-letter

段落中的首字下沉，異於其它文字：

p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }

IE6只支援a的偽類，其它標籤的偽類不支援，所以要想在IE6下也顯示正確，需要藉助js來實現

7.標籤指定式的選擇符

h1#content {}    /*表示所有id為content的h1標籤*/
h1.p1 {}             /*表示所有class為p1的h1標籤*/

標籤指定式選擇符的精度介於標籤選擇符及id/class選擇符之間，是常用的選擇符之一。

關聯class選擇器：可以為某個標籤的各個類別定義樣式，例如：

<style>
P.class1{color:red}
</style>

8.不是所有瀏覽器都支援的選擇器

子元素選擇器 child selector ：

相鄰兄弟選擇器 adjacent sibling selector

屬性選擇器 attribute selector
 

9.樣式規則的優先順序

   html標籤會繼承外層標籤的部分樣式規則。
    id選擇器 > class選擇器 > html標籤選擇器，單一的(id)高於共用的(class)，有指定的用指定的，無指定則繼承離它最近的

10.inherit

     繼承是基於文件樹的， 在CSS中，許多屬性都是可以繼承。顏色，字型，字號等。

     要設定文件的某些預設樣式屬性，可以文件樹的根上設定該屬性，

     如某個段落的字型設定為白色，其元素的字型值不用設定或設定為inhert，它就是白色。這些屬性被稱之為inherited property，它會從父元素獲取對應屬性的經過計算與轉換的值(computed value)，如果父元素和它的情形一樣，它就繼續往上找，最後沒有就使用瀏覽器的預設值。

     有些可被繼承的屬性值已經在父元素中定義過的，在子元素中可以直接繼承，不需要重複定義。但要注意瀏覽器可能用一些預設值覆蓋前面的定義。

     屬性值可以指定為inherit。
     很多屬性是不能繼承的，如margin,padding，這樣設計是有好處的。

     一些瀏覽器對繼承支援的不好，例如遇到table，就丟失了繼承的屬性。

     css的層疊性......

11.id選擇器和類選擇器的名稱是由作者制定的，要儘量做到命名與表現分離，

11.讓圖片在超過規定的寬度時，自動按比例縮小

<img style="max-width:200px;height:auto;width:expression(this.width > 200?"200px":this.width);" />

12.  wrap

      http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/

13.邊上的文字對齊

     style=ext-align:justify;text-justify:inter-ideograph

css-P是css的擴充套件，

DIV+CSS專題：十天學會DIV+CSS

14.CSS盒子模式的典型屬性：內容(content)、填充(padding)、邊框(border)、邊界(margin)

     整個盒模型在頁面中所佔的寬度是由左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中width所定義的寬度僅僅是內容部分的寬度

     在IE6及以上版本和標準的瀏覽器當中，當設定一個盒模型的的margin:auto;時，可以讓這個盒模型居中

     body，h1－h6，ul等元素預設有外邊距或其它樣式的。在css樣式中增加一項：body {margin:0;}，就可以把body預設的外邊距去掉

     塊級元素的垂直相鄰外邊距會合並，取最大值。

     css的許多屬性是可以簡寫的，這樣便於閱讀和修改，減少程式碼量。顏色值也可以簡寫的。比如顏色值為#ff6600;可以簡寫為#f60;兩位兩位一樣的才可以簡寫，像#c2c2c2是不可以簡寫的。

    div居右時，要指定margin-left值為其從父容器左邊開始的外邊距。

15.塊級元素和內聯元素
 
     塊級元素：就是一個方塊，像段落一樣，預設佔據一行出現；
 
     內聯元素：又叫行內元素，顧名思義，只能放在行內，就像一個單詞，不會造成前後換行，起輔助作用。
 
     一般的塊級元素諸如段落<p>、標題<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。

     內聯元素則如: 表單元素<input>、超級連結<a>、影象<img>、<span> ........ 塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其後的無素也需另起一行進行顯示。    

     有了css以後，我們可以改變這種html的預設佈局模式，把塊元素擺放到想要的位置上去。而不是每次都愚蠢的另起一行。也就是說，可以用css的display:inline將塊級元素改變為內聯元素，也可以用display:block將內聯元素改變為塊元素。display:none表示隱藏。

     例如：span不是塊級，所以其寬度是依據內容的多少而定，必須設定span為BLOCK才可以設定寬度。

     display:inline;(內聯)《CSS權威指南》中文字顯示：任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行佈局”形式，比如，設定一個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重複，每一行下方都會有一條黑色的細線。如果是塊級元素那麼所顯示的的黑線只會在塊的下方出現。

16.div實踐

     div1設定了float:left之後，div2中的文字足夠多時它會右和下半繞div1。要解除下方環繞，要設定div2的margin-left。

     div1設定了float:left，div3設定了float:right，div2要設定margin-left和margin-right，然後才能居在div1和div3的水平中間。

17.ul li

     四周都有很大的空隙，而且每一行前邊還有個點，這是因為標籤的預設樣式造成的， 改變ul的預設樣式：ul { list-style: none; margin: 0px; padding: 0px; }

     大多數標籤都有自己的預設樣式，比如body預設外邊距，ul前的圓點及左側的內邊距，另h1-h6字型大小各不相同，em預設為斜體，strong表示粗體。因為有這些預設樣式，一個設計合理的頁面，即使沒有載入樣式，也能讓使用者很容易閱讀。但有時這些預設樣式對我們沒用，需要清除掉，為了方便，建議用標籤重定義方式，這樣可以很簡單地把全域性的樣式給統一起來。另外頁面中的圖片新增連結後會預設添加個邊框，ul預設情況下會在列表前新增圓點，這些都是需要去掉的。
 

 body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
 ul { list-style: none; }
 img { border-style: none; }

18.定位

     position:reletive

     position:absolute

示例：a:hover{position:reletive; top:1px; left:1px}; 產生滑鼠滑過時向右下偏移的效果。

(1).position:relative; 如果對一個元素進行相對定位，首先它將出現在它所在的位置上。然後通過設定垂直或水平位置，讓這個元素"相對於"它的原始起點進行移動。（再一點，相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其他框）
 
(2).position:absolute; 表示絕對定位，位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文件流，因此不佔據空間。普通文件流中元素的佈局就像絕對定位的元素不存在時一樣。（因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其他元素並可以通過z-index來控制它層級次序。z-index的值越高，它顯示的越在上層。）
 
(3).父容器使用相對定位，子元素使用絕對定位後，這樣子元素的位置不再相對於瀏覽器左上角，而是相對於父容器左上角。
 
(4).相對定位和絕對定位需要配合top、right、bottom、left使用來定位具體位置，這四個屬性只有在該元素使用定位後才生效，其它情況下無效。另外這四個屬性同時只能使用相鄰的兩個，不能即使用上又使用下，或即使用左，又使用右。

(5).一個元素浮動或絕對定位後，它將自動轉換為塊級元素，而不論該元素本身是什麼型別

19.css sprite ,稱為css精靈或css雪碧

     使用一張整合的圖片減少檔案體積，提高請求圖片的效率。

     定點陣圖片位置的引數是以圖片的左上角為原點的，稱為四方連續。

20.避免使用CSS表示式（Expression）

     CSS表示式是動態設定CSS屬性的強大但危險方法。

     下面的例子中，使用CSS表示式使用了JavaScript表示式，可以實現隔一個小時切換一次背景顏色 ：background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

     表示式的問題就在於它的計算頻率要比我們想象的多。不僅僅是在頁面顯示和縮放時，就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次。給CSS表示式增加一個計數器可以跟蹤表示式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上的計算量。

21. 程式碼壓縮

       在把網站專案部署到網路前考慮對CSS進行壓縮，除去註釋和空格以使得網頁載入得更快。壓縮程式碼可以採用一些工具，如YUI Compressor，利用它可精簡CSS程式碼，減少檔案大小以獲得更高的載入速度。

http://zh.html.net