第18章 CSS 3概述 553
18.1 概要介紹 553
18.1.1 CSS 3是什麼 553
18.1.2 CSS 3的曆史 554
18.2 使用CSS 3能做什麼 554
18.2.1 模塊與模塊化結構 554
18.2.2 一個簡單的CSS 3示例 556
第19章 選擇器 559
19.1 選擇器概述 560
19.2 屬性選擇器 561
19.2.1 屬性選擇器概述 561
19.2.2 CSS 3中的屬性選擇器 563
19.2.3 靈活運用屬性選擇器 564
19.3 結構性僞類選擇器 565
19.3.1 CSS中的僞類選擇器及僞元素 565
19.3.2 選擇器root、not、empty和target 570
19.3.3 選擇器first-child、last-child、nth-child和nth-last-child 574
19.3.4 選擇器nth-of-type和nth-last-of-type 579
19.3.5 循環使用樣式 582
19.3.6 only-child選擇器 584
19.4 UI元素狀態僞類選擇器 585
19.4.1 僞類選擇器E:hover、E:active和E:focus 586
19.4.2 僞類選擇器E:enabled與E:disabled 588
19.4.3 僞類選擇器E:read-only與E:read-write 589
19.4.4 僞類選擇器E:checked、E:default和E:indeterminate 590
19.4.5 僞類選擇器E::selection 593
19.4.6 僞類選擇器E:invalid與E:valid 595
19.4.7 僞類選擇器E:required與E:optional 596
19.4.8 僞類選擇器E:in-range與E:out-of-range 596
19.5 通用兄弟元素選擇器 597
第20章 使用選擇器在頁麵中插入內容 599
20.1 使用選擇器來插入文字 599
20.1.1 使用選擇器來插入內容 599
20.1.2 指定個彆元素不進行插入 601
20.2 插入圖像文件 602
20.2.1 在標題前插入圖像文件 602
20.2.2 插入圖像文件的好處 603
20.2.3 將alt屬性的值作為圖像的標題來顯示 605
20.3 使用content屬性來插入項目編號 605
20.3.1 在多個標題前加上連續編號 606
20.3.2 在項目編號中追加文字 607
20.3.3 指定編號的樣式 607
20.3.4 指定編號的種類 608
20.3.5 編號嵌套 608
20.3.6 中編號中嵌入大編號 610
20.3.7 在字符串兩邊添加嵌套文字符號 611
第21章 文字與字體相關樣式 614
21.1 給文字添加陰影——text-shadow屬性 614
21.1.1 text-shadow屬性的使用方法 614
21.1.2 位移距離 616
21.1.3 陰影的模糊半徑 617
21.1.4 陰影的顔色 617
21.1.5 指定多個陰影 618
21.2 讓文本自動換行——word-break屬性 618
21.2.1 依靠瀏覽器讓文本自動換行 619
21.2.2 指定自動換行的處理方法 619
21.3 讓長單詞與URL地址自動換行——word-wrap屬性 621
21.4 使用服務器端字體——Web Font與@font-face屬性 621
21.4.1 在網頁上顯示服務器端字體 621
21.4.2 定義斜體或粗體字體 623
21.4.3 顯示客戶端本地的字體 625
21.4.4 屬性值的指定 627
21.5 修改字體種類而保持字體尺寸不變——font-size-adjust屬性 628
21.5.1 字體不同導緻文字大小的不同 628
21.5.2 font-size-adjust屬性的使用方法 629
21.5.3 瀏覽器對於aspect值的計算方法 629
21.5.4 font-size-adjust屬性的使用示例 630
21.6 使用rem單位定義字體大小 631
第22章 盒相關樣式 633
22.1 盒的類型 633
22.1.1 盒的基本類型 633
22.1.2 inline-block類型 635
22.1.3 inline-table類型 642
22.1.4 list-item類型 644
22.1.5 run-in類型與compact類型 645
22.1.6 錶格相關類型 646
22.1.7 none類型 648
22.1.8 各種瀏覽器對於各種盒類型的支持情況 649
22.2 對於盒中容納不下的內容的顯示 650
22.2.1 overflow屬性 650
22.2.2 overflow-x屬性與overflow-y屬性 653
22.2.3 text-overflow屬性 654
22.3 對盒使用陰影 656
22.3.1 box-shadow屬性的使用方法 656
22.3.2 將參數設定為0 656
22.3.3 創建盒內陰影 658
22.3.4 對盒內子元素使用陰影 658
22.3.5 對第一個文字或第一行使用陰影 659
22.3.6 對錶格及單元格使用陰影 660
22.4 指定針對元素的寬度與高度的計算方法 661
22.4.1 box-sizing屬性 661
22.4.2 為什麼要使用box-sizing屬性 664
第23章 背景與邊框相關樣式 666
23.1 與背景相關的新增屬性 666
23.1.1 指定背景的顯示範圍——background-clip屬性 667
23.1.2 指定背景圖像的繪製起點——background-origin屬性 669
23.1.3 指定背景圖像的尺寸——background-size屬性 672
23.1.4 新增的用於平鋪背景圖像的選項——space與round 676
23.2 在一個元素中顯示多個背景圖像 678
23.3 使用漸變色背景 679
23.3.1 繪製綫性漸變 679
23.3.2 繪製放射性漸變 682
23.4 圓角邊框的繪製 685
23.4.1 border-radius屬性 686
23.4.2 在border-radius屬性中指定兩個半徑 686
23.4.3 不顯示邊框的時候 687
23.4.4 修改邊框種類的時候 688
23.4.5 繪製四個角不同半徑的圓角邊框 688
23.5 使用圖像邊框 688
23.5.1 border-image屬性 688
23.5.2 border-image屬性的最簡單的使用方法 690
23.5.3 使用border-image屬性來指定邊框寬度 692
23.5.4 指定4條邊中圖像的顯示方法 693
23.5.5 使用背景圖像 696
第24章 CSS 3中的變形處理 698
24.1 transform功能的基礎知識 698
24.1.1 如何使用transform功能 698
24.1.2 transform功能的分類 699
24.2 對一個元素使用多種變形 704
24.2.1 對一個元素使用多種變形的方法 704
24.2.2 指定變形的基準點 707
24.3 使用3D變形功能 709
24.3.1 3D變形功能概述 709
24.3.2 實現3D變形功能 710
24.4 變形矩陣 718
24.4.1 矩陣概述 718
24.4.2 變形與坐標係統 719
24.4.3 計算2D變形 719
24.4.4 計算3D變形 721
24.4.5 通過矩陣執行多重變形處理 722
第25章 CSS 3中的動畫功能 725
25.1 Transitions功能 725
25.1.1 Transitions功能的使用方法 726
25.1.2 使用Transitions功能同時平滑過渡多個屬性值 727
25.2 Animations功能 730
25.2.1 Animations功能的使用方法 730
25.2.2 實現多個屬性值同時改變的動畫 733
25.2.3 實現動畫的方法 736
25.2.4 實現網頁的淡入效果 737
第26章 布局相關樣式 739
26.1 多欄布局 740
26.1.1 使用float屬性或position屬性的缺點 740
26.1.2 使用多欄布局方式 741
26.2 盒布局 747
26.2.1 使用float屬性或position屬性時的缺點 747
26.2.2 使用盒布局 749
26.2.3 盒布局與多欄布局的區彆 750
26.3 彈性盒布局 751
26.3.1 對多個元素使用flex屬性 751
26.3.2 改變元素的顯示順序 753
26.3.3 改變元素的排列方嚮 754
26.3.4 元素寬度與高度的自適應 755
26.3.5 使用彈性盒布局來消除空白 758
26.3.6 對多個元素使用flex屬性 759
26.3.7 控製換行方式 766
26.3.8 指定水平方嚮與垂直方嚮的對齊方式 769
26.4 calc方法 781
26.4.1 calc方法概述 781
26.4.2 calc方法使用示例 781
第27章 Media Queries相關樣式 783
27.1 根據瀏覽器的窗口大小來選擇使用不同的樣式 783
27.2 在iPhone中的顯示 788
27.3 Media Queries的使用方法 789
第28章 CSS 3的其他重要樣式和屬性 792
28.1 顔色相關樣式 792
28.1.1 利用alpha通道來設定顔色 793
28.1.2 alpha通道與opacity屬性的區彆 795
28.1.3 指定顔色值為transparent 797
28.2 用戶界麵相關樣式 798
28.2.1 輪廓相關樣式 799
28.2.2 resize屬性 801
28.3 使用initial屬性值取消對元素的樣式指定 802
28.3.1 取消對元素的樣式指定 802
28.3.2 使用initial屬性值並不等於取消樣式設定的特例 804
28.4 實現CSS 3中的濾鏡特效 805
28.4.1 濾鏡特效概述 805
28.4.2 實現濾鏡特效 806
第29章 綜閤實例 815
29.1 實例1：使用HTML 5中新增結構元素來構建網頁 815
29.1.1 組織網頁結構 815
29.1.2 構建網頁標題 818
29.1.3 構建側邊欄 820
29.1.4 構建主體內容 823
29.1.5 構建版權信息 829
29.2 實例2：使用HTML 5+CSS 3來構建Web應用程序 829
29.2.1 HTML 5頁麵代碼分析 830
29.2.2 CSS 3樣式代碼分析 833
29.2.3 JavaScript腳本代碼分析 836
附錄A 截至2015年5月五大瀏覽器最新版對HTML 5的支持情況 844
· · · · · · (
收起)
