第9章，裝飾網站導航限制訪問，處於隱私方面考慮，瀏覽器已經開始限制可以對偽類:visited應用哪些CSS屬性了。其中包括對已訪問過的鏈接定義color、background-color、border-color等樣式（除非已經為那些鏈接的正常狀態定義了顏、背景色和邊框色）對於<a>標簽可以對所 ...

第9章，裝飾網站導航

限制訪問，處於隱私方面考慮，瀏覽器已經開始限制可以對偽類:visited應用哪些CSS屬性了。其中包括對已訪問過的鏈接定義color、background-color、border-color等樣式（除非已經為那些鏈接的正常狀態定義了顏、背景色和邊框色）對於<a>標簽可以對所有不同的訪問狀態設置樣式，但要讓樣式有效，必須以特定的順序指定鏈接：link、visited、hover、active CSS3按鈕生成器：http://css3button.net CSS3按鈕優秀示例：http://hellohappy.org/css3-buttons/和http://webdesignerwall.com/tutorials/css3-gradient-buttons

垂直導航欄

1、把鏈接當成塊顯示 2、限制按鈕寬度

水平導航欄

方法1、使用display:inline-block屬性，但是會在按鈕之間留下一條小縫隙。

消除空格方法1：把上一個</li>與下一個<li>放同一行，不過，代碼都不這樣寫

<ul>
   <li><a href="#">one</a></li><li>
   <a href="#">two</a></li><li>
   <a href="#">three</a></li>
</ul>

效果：

消除空格方法2：對項目列表添加負值的right margin，不過不同的文本長度，會使這個值不同，需要去實驗

    <style type="text/css">
        li {
            display: inline-block;
            border: 1px solid #999;
            margin-right: -9px;
        }
    </style>

效果：

對水平導航欄使用浮動

1、浮動列表項目 2、為鏈接添加display:block 3、給鏈接定義樣式 4、添加一個寬度 5、在<ul>標簽樣式中添加overflow:hidden 關於創建導航欄方面的幫助將普通列表變成非凡導航元素：http://css.maxdesign.com.au/listutorial/ 基於列表的導航設計教程：http://css.maxdesign.com.au/listamatic/ 不想費力自己創建可以試試List-O-Matic嚮導：www.accessify.com/tools-and-wizards/developer-tools/list-o-matic

CSS式的預載替換法

使用CSS可以很簡單的給圖形鏈接在滑鼠經過時變成另一張圖片，不過有個問題，除非已下載了圖片，否則瀏覽器在接收和顯示新圖片時會有一個很明顯的延遲，為避免延遲，可以採用CSS精靈（CSS Sprites），可以用一張圖片創建不同的按鈕狀態 1、使用圖片編輯軟體創建帶有不同按鈕版本的圖片 2、測量從整張圖片頂部到每張圖片頂部之間的距離 3、給普通的鏈接創建一個CSS樣式 4、創建:hover樣式

給特殊的鏈接類型定義樣式

使用屬性選擇器 a[href^='http://']

第10章，CSS的transform、transition和animation屬性

transform（變形） CSS3引入了幾個可以對網頁元素進行變換的屬性，比如對它進行旋轉、縮放、移動，或者沿著它的水平方向或垂直方向扭曲（斜切變換） IE9，Safari，Chrome，Firefox，Opera支持2D變換，IE8及更早不支持，transform需要使用供應商首碼 transform功能：

1、rotate（旋轉）

.testClass{
    transform:rotate(20deg);          /* 提供一個0~360的度數值，正值順時針方向旋轉，負值逆時針 */
}

2、scale（縮放）

.testClass{
    transform:scale(2);                    /* 接受單個參數：放大或縮小，0~1之間的數是縮小，大於1的數是放大，負數會將元素倒過來縮放 */
    transform:scale(x,y);                  /* 接受兩個參數：第一個表示水平縮放，第二個表示垂直縮放 */
/*單方向縮放：*/
    transform:scaleX(num);/*沿X軸縮放*/
    transform:scaleY(num);/*沿Y軸縮放*/
}

3、translate（平移）

transform的translate函數只是將一個元素從它現有位置向左或向右以及向上或向下移動一定距離 translate函數有兩個值：第一個指定水平距離（正數向右移，負數向左），第二個指定垂直距離（正數向下，負數向上）還可以單方向使用：translateX水平方向，translateY垂直方向都可以使用pixel，em以及percentage值

4、skew（傾斜）

.testClass{
    transform:skew(45deg,0);          /* 第一個指沿X軸傾斜（正數向左傾斜<從元素上方沿逆時針進行>，負數向右），*/
                 /*第二個指沿Y軸傾斜（正數往右邊向下<沿順時針從元素右側進行>，負數往左邊向下），這個理解不夠，表達不明白 */
}

多個函數共用：

.testClass{
    transform:skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);
}

這些函數的應用順序就是瀏覽器應用這些效果的順序

5、origin

一般來說，都是相對於元素的中心作變換點，但CSS3允許使用transform-origin屬性，改變這個點，與background-position屬性一樣，可以提供關鍵字、pixel為單位的絕對值、em和percentage為單位的相對值 transform-origin:left top; transform-origin:0 0; transform-origin:0% 0%; transform-origin:right bottom ==> transform-origin:100% 100% 第一個指水平，第二個指垂直 3D變形，CSS3還提供了一種更加複雜的變換類型：3D變形（3D transform）

transition

實際上是在一定時間內，一組CSS屬性變換到另一組屬性的動畫展示過程。為了使transition生效，需要做以下幾件事：
1、兩個樣式，一個開始，一個結束 2、transition屬性。CSS3新增，使動畫成為可能的秘訣所在。一般應用到最初開始的樣式中 3、觸發器瀏覽器無法以動畫形式模擬所有CSS屬性，但還是有很多可選擇。具體請看：www.w3.org/TR/css3-transitions/#animatable-properties

添加transition

.navButton{
     background-color:orange;
     transition-property:background-color;
     transition-duration:1s;
}
.navButton:hover{
     background-color:blue;
}

transition-property用於定義要以動畫顯示哪些屬性，可以指定一個或多個，也可以使用all關鍵字。 transition-duration用於定義動畫要持續多久結束，可以使用秒或毫秒作單位transition-duration:.5s，transition-duration:500ms 還可以針對每個需要動畫展示的屬性分別定義時限：

.testClass{
    transition-property:color,background-color,border-color;
    transition-duration:.5s,.75s,2s;
}

時間與屬性是一一對應的註：必須提供供應商首碼，並不需要提供IE供應商首碼，IE9及之前不支持，IE10可支持首碼版本

給transition定時

transition-timing-function屬性可控制動畫速度。並不是控制動畫時間長短，而是控制動畫期間的速度。可以使用關鍵字：linear、ease、ease-in、ease-out、ease-in-out，瀏覽器預設以ease方法。還可以使用cubic-bezier值。Bezier曲線。

.testClass{
     transition-timing-function:cubic-bezier(.20,.96,.74,.07);
}

可以使用線上工具創建和測試不同的定時函數，Mathew Lein的Ceasar工具就是其中之一：http://matthewlein.com/ceaser/

延時啟動transition

利用transition-delay屬性阻止立即開始動畫。需要使用供應商首碼：

.testClass{
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -ms-transition-delay: .5s;
    transition-delay: .5s;
}

在使用CSS下拉菜單時，如果不小心讓滑鼠離開了菜單，則下拉菜單很快就消失了，可以使用如下做法：
在初始樣式添加：transition-delay: 5s; 在:hover樣式添加：transition-delay: 0; 這麼做不合常理就是了 註：js改動CSS屬性，也會啟動transition

transition快捷方法

使用transition屬性。只需要列出屬性、延時時間、定時函數，並用空格分開即可。

.testClass{
    transition:all 1s ease-in .4s;
}

還可以分開定義多個，只需要逗號分隔：

.testClass{
    transition:color 1s,background-color .5s 1s;
}

需要提供供應商首碼

animation

創建動畫 1、定義動畫，包括創建關鍵幀，即列出要創建動畫的CSS屬性 2、將動畫應用到元素上，可以應用給任意數量的元素

定義關鍵幀

@keyframes animationName{
    from{
        /*  list   CSS   properties   here   */
    }
    to{
        /*   list   CSS    properties   here   */
    }
}

@keyframes並不是CSS屬性，應該稱之為at規則，CSS其他at規則還包括@import，@media 還可以使用多個百分比定義多個關鍵幀：

@keyframes backgroundGlow{
    from{
        backgorund-color:yellow;
    }
    50%{
        background-color:blue;
    }
    to{
        background-color:red;
    }
}

以上表示，藍色背景會在動畫進行到50%時出現，可以用0%代替from關鍵字，100%代替to關鍵字還可以這麼設置：

@keyframes glow{
    from{
        backgorund-color:yellow;
    }
    25%,75%{
        background-color:blue;
    }
    to{
        background-color:red;
    }
}

表示在動畫進行25%-75%之間要顯示持續顯示藍色背景還有這個：

@keyframes glow{
    from{
        backgorund-color:yellow;
    }
    20%,60%{
        background-color:blue;
    }
    40%,80%{
        background-color:orange;
    }
    to{
        background-color:red;
    }
}

表示在20%顯示blue，在40%顯示orange，在60%顯示blue，在80%顯示orange，跳來跳去 CSS3 animation一大缺點：需要特定的供應商首碼：

@-webkit-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@-moz-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@-o-keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

註：不需要為IE提供，IE9及更早版本不支持，IE10支持無供應商首碼版本

應用animation

可以給元素的任何樣式添加動畫，也可以給偽類應用動畫，js改動也會啟動動畫 1、用@keyframes規則創建淡入動畫：

@keyframes fadeIn{
    from{    opacity: 0;    }
    to{    opacity: 1;    }
}

2、將動畫應用給<div>標簽的樣式：

.announcement{
    animation-name: fadeIn;          /*設置動畫名稱，前面創建的*/
    animation-duration: 1s;          /* 設置動畫從開始到結束所花時間 */
}

可以將非動畫屬性也一起放入樣式中 animation-name，animation-duration也需要使用供應商首碼

給animation定時

使用animation-duration定時，可以像transition一樣定義多個，只要用逗號分開，一一對應。使用animation-timing-function函數控制整個動畫或特定關鍵幀，可以使用Cubic Bezier曲線也可以使用關鍵字，關鍵字與transition-timing-function函數關鍵字一樣（linear、ease、ease-in、ease-out、ease-in-out）定義了多個關鍵幀，還可以在關鍵幀之間應用不同的函數：

@keyframes growAndGlow{
    from{
        background-color: yellow;
        animation-timing-function: cubic-bezier(1, .3, 1, .115);
    }
    50%{
        transform:scale(1.5);
        background-color:blue;
        animation-timing-function: linear;
    }
    to{
        transform:scale(3);
        background-color: red;
    }
}

還可以使用延時啟動：animation-delay可以設置等待時間，與transition-delay屬性一樣。

完成animation

使用animation-iteration-count可以設置動畫運行的次數。使用infinite可以不限次數的運行下去為了使一個動畫在奇數次時超前運行，在偶數次時反向運行，可以使用animation-direction屬性和關鍵字alternate。為了讓一個動畫在運行後回歸最初的狀態，可以使用偶數迭代次數，並將animation-direction設為alternate 可以使用animation-fill-mode:forwards;將動畫固定在最後的樣子，以免使得web瀏覽器在動畫結束時，將元素突兀的變回初始狀態

使用animation快捷方式

.fade{
    animation-name: fadeOut;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-delay: 5s;
    animation-fill-mode: forwards;
}

改寫：

.fade{
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards;
}

只有名稱和持續時間是必要的，其他都是可選，應用多個動畫，只需每個動畫用逗號隔開即可。

.fade{
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                glow 5s;
}

實際應用還需給定供應商首碼：

.fade{
    -webkit-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                        glow 5s;
    -moz-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                     glow 5s;
    -o-animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                   glow 5s;
    animation : fadeOut 2s ease-in-out 2 alternate 5s forwards，
                glow 5s;
}

暫停animation

使用animation-play-state屬性，只接受兩個關鍵字：running、paused，要暫停只需這樣：animation-play-state:paused;但，在使用CSS時只有一種方法可以應用它，那就是偽類。

第11章，表格和表單格式化

使用text-align和vertical-align調整垂直對齊和水平對齊 text-align接受：left、right、center、justify四個值，可繼承 vertical-align接受：top、baseline、middle、bottom四個值，不可繼承，top：把內容推到表格單元頂部；middle：讓內容居中；bottom：把內容底邊推到單元格底部；baseline（基準線）作用和top類似，不過基本看不出來baseline有啥作用。

創建邊框

在<table>標簽中設置border時，只會給表格添加邊框，並不會給單元格添加，當給單元格設置border時，將會在單元格之間留下一個間隙

控製表格單元之間的空格

CSS提供了border-spacing屬性用來控製表格單元之間的空隙。

消除雙邊框

即使消除了間隙，表格單元的邊框也會變成雙邊框。使用border-collapse屬性，接受兩個值：spearate（預設顯示方式）、collapse（消除單元間隔和邊框）註：如果將border-collapse設置為collapse，border-spacing將不起作用

圓角

利用border-radius可以給表格單元（而不是表格本身）添加圓角。還可以給表格和表格單元應用box-shadow屬性。可以使用nth-of-type選擇器，給表格奇數行和偶數行添加不同的樣式。註：瀏覽器通常會顯示出空白表格單元的邊框和背景色，若要隱藏可以使用empty-cells:hide：

table{
     empty-cells:hide;
}

但，如果border-collapse設為collapse，則瀏覽器忽略empty-cells屬性，依然顯示空白單元格邊框和背景色

給表單定義樣式

HTML表單元素 1、fieldset，<fieldset>標簽用來集中相關表單問題 2、legend，<legend>標簽就在<fieldset>標簽的HTML代碼之後，它給一組域提供一個標簽 3、text fields（文本域） 4、buttons（按鈕），表單按鈕：提交，重置或其他動作 5、drop-down menus（下拉菜單），<select> 6、checkbox（覆選框）和radio button（單選按鈕）

第三部分----CSS頁面佈局

第12章，CSS佈局簡介

網頁佈局類型

1、固定寬度，參看www.alistapart.com，www.espn.go.com，www.nytimes.com 2、流式佈局，參看http://maps.google.com 3、響應式Web設計（Responsive Web Desin，RWD）

HTML5的分區元素

CSS佈局方法

絕大多數網頁均採用CSS的float屬性進行佈局

佈局策略

1、從內容入手 2、Mobile First（移動設備優先） 3、先設計草圖 Yahoo提供了一個免費的Stencil Kit（http://developer.yahoo.com/ypatterns/wireframes），可在Illustrator、Visio、OmniGraffle以及其他圖形處理軟體中使用它來創建網頁草圖 4、找出方框 5、順應頁面流 6、記住背景圖片的使用 7、拼圖中的小部件 8、給元素設計層次 9、margin和padding的使用

CSS3秘笈第三版涵蓋HTML5學習筆記9~12章