首頁 > 開發者 > JavaScript
HTML5與CSS3基礎教程第八版學習筆記7~10章，html5css3
第七章，CSS構造塊CSS裡有控制基本格式的屬性（font-size，color），有控制布局的屬性（position，float），還有決定訪問者列印時在哪裡換頁的列印控制元素。CSS還有很多控制項目顯示或消失的動態屬性，可以用於建立下來列表和其他互動性組件。構造樣式規則樣式表中的每條規則都有兩個部分：選取器和聲明塊。選取器決定哪些塊受影響，聲明塊由一個或多個屬性-值對組成，指定應該做什麼。為樣式規則添加註釋/* 注釋 */，可以是多行注釋，放在樣式表的任何位置都可以，需要成對出現，不能嵌套。理解繼承繼承是CSS裡一個很重要的概念。瀏覽器會將HTML理解為文檔樹，對某個元素應用CSS屬性時，不僅會影響該元素，還會影響其下分支元素。對大多數屬性而言，可以使用inherit值強制進行繼承會被繼承的CSS屬性文本：color：顏色，a元素除外direction：方向font：字型font-family：字型系列font-size：字型大小font-style：用於設定斜體font-variant：用於設定小型大寫字母font-weight：用於設定粗體letter-spacing：字母間距line-height：行高text-align：用於設定對其方式text-indent：用於設定首行縮排text-transform：用於修改大小寫visibility：可見度white-space：用於指定如何處理空格word-spacing：字間距 列表：list-style：列表樣式list-style-image：用於為列表指定定製的標記list-style-position：用於確定列表標記的位置list-style-type：用於設定列表的標記 表格：border-collapse：用於控製表格相鄰儲存格的邊框是否合并為單一邊框border-spacing：用於指定表格邊框之間的空隙大小caption-side：用於設定表格標題的位置empty-cells：用於設定是否顯示表格中的空儲存格 版面設定：orphans：用於設定當元素內部發生分頁時在頁面底部需要保留的最少行數page-break-inside：用於設定元素內部的分頁方式widows：用於設定當元素內部發生分頁時在頁面頂部需要保留的最少行數 其他：cursor：滑鼠指標quotes：用於指定引號樣式層疊：當規則發生衝突時定義規則不衝突時，則多條規則結合，一起應用到元素上。1、編寫的規則與瀏覽器預設規則衝突時，以編寫的規則為準2、編寫的規則之間發生衝突，CSS用層疊的原則來考慮特殊性、順序、重要性，從而判斷相互衝突的規則中哪個規則應該起作用。（1）特殊性特殊性規則指定選取器的具體程度。選取器越特殊，規則就越強。衝突時，優先應用特殊性強的規則。id選取器最特殊。建議：在樣式表中多使用類別選取器，避免使用ID選取器。會降低靈活性（2）順序晚出現的優先順序高。直接應用在HTML元素上的規則被認為比外部樣式表中或插在HTML文檔頂部的特殊性相同的規則出現得更晚。（3）重要性可以聲明一條特殊的規則覆蓋整個系統中的規則，這條規則的重要程度要比其他所有規則高。也可以在某條聲明末尾加上!important，例：p{color:red !important;} 不建議屬性的值1、inherit：顯示指出該屬性值與對應父元素對該屬性設定的值相同。p{border:inherit}（IE8之前大部分屬性不支援inherit值）2、預定義值。大多數CSS屬性都有一些可供使用的預定義值。例：float可設定為left，right，none。3、長度和百分數。em，px，pt，百分數。一個em長度大約與對應元素的字型大小相等。（當em用於設定font-size屬性時，它的值繼承自對應父元素的字型大小）4、純數字，只有極少數CSS屬性接收不帶單位的數字，最常見的：line-height，z-index，opacity5、URL6、CSS顏色7、RGB8、十六進位數9、更多CSS3提供的指定顏色方式：RGBA、HSLA、HSLRGBA：在RGB基礎上加了一個代表alpha透明度的A。所有現代瀏覽器都支援，IE9之前的不支援。格式：color:rgb(89,0,127)，color:rgba(89,0,127,0.75)HSL和HSLAHSL：色相（hue）、飽和度（saturation）、亮度（lightness）。色相取值：0-360，飽和度和亮度均為百分數：0-100%格式：property:hsl(hue,saturation,lightness);HSLA格式：property:hsla(hue,saturation,lightness,alpha transparency)第八章，操作樣式表一定要將CSS檔案儲存為以.css為副檔名、用UTF-8編碼的檔案外部樣式表可以通過連結引用，也可以匯入（通過import），不推薦匯入，效能不好連結到外部樣式表文法：
<link rel="stylesheet" href="url.css">可以在頁面中使用多個link元素載入多個樣式表，產生衝突則以後面檔案的規則為準。建立內建樣式表<style>樣式表</style>，放在head部分若且唯若style元素出現在link元素後面的時候，內建樣式表中的樣式才會覆蓋外部樣式表中的樣式。應用內聯樣式表在HTML元素中定義style屬性。內聯樣式優先順序高於其他所有樣式，除非其他地方與之衝突的樣式標記了!important樣式的層疊和順序內建樣式表與任何連結的外部樣式表之間的關係取決於他們在HTML中的相對位置。發生衝突，以出現順序較後的為準。內聯樣式優先順序最高。一旦應用，覆蓋所有與之衝突的樣式。相互衝突的樣式順序對優先順序影響，有一種例外情況，就是標記!important的樣式總是具有最高的優先順序。盡量不使用important，除非不得已使用與媒體相關的樣式表可以指定一個只用於特定輸出的樣式表。如：可以建立一個具有列印和螢幕版本共有特徵的通用樣式表，再建立單獨的只用於列印的屬性和只用於螢幕顯示的屬性。在link或style元素中使用media屬性，例：media="output"，output可以是print，screen，all（這些是最常見的）等第九章，定義選取器建議：盡量不要使用id選取器編寫CSS的一個重要目標就是讓選取器儘可能簡單，僅保持必要的特殊性按名稱選擇元素類型選取器按類或ID選擇元素1、按類選擇要格式化的元素使用.（點號）開頭，不加空格，輸入className2、按ID選擇要格式化的元素使用#（井號）開頭，不加空格，輸入idName除非必須特別針對目標元素，最好不要再id或class選取器中添加元素名稱，降低靈活性 類別選取器與ID選取器的比較建議盡量使用class選取器。id選取器會引入如下問題：1、不可複用2、特殊性強，要覆蓋需要編寫特殊性更強的規則，較難管理按上下文選擇元素1、子選取器：>
.architect > p{ color:red;}這個選取器僅選擇architect類元素的子項目（而非子子項目、子子子項目）的p元素。2、CSS相鄰同胞結合符：+
<body> <h1></h1> <p></p> <h2></h2></body>
h1與p是相鄰同胞，h1與h2不是相鄰同胞，p與h2是相鄰同胞
.architect p+p{ color:red;}
3、普通同胞結合符：~
h1~h2{ color:red;}選擇第一個或最後一個子項目:first-child，:last-child。均為偽類。
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul>
li:first-child{ color:red;}選中的是 <li>1</li>，並不是li的子項目，:last-child類似選擇元素的第一個字母或者第一行:first-letter，:first-line虛擬元素：::first-letter,::first-line,::before,::after偽類：:first-child,:link,:hover按狀態選擇連結元素a:link：從未被啟用或指向，當前也沒有被啟用或指向的連結的外觀a:visited：訪問者已啟用過的連結的外觀a:focus：前提是連結是通過鍵盤選擇並已準備好啟用的a:hover：游標指向連結時連結外觀a:active：啟用過的連結的外觀按屬性選擇元素
| 選取器 | 屬性值 |
| [attribute] | 匹配指定屬性，不論值是什麼 |
| [attribute="value"] | 完全符合指定屬性值 |
| [attribute~="value"] | 屬性值是以空格分隔的多個單詞，其中一個完全符合指定值 |
| [attribute|="value"] | 屬性值以 value- 打頭 |
| [attribute^="value"] | 屬性值以value開頭，value為完整單詞或單詞一部分 |
| [attribute$="value"] | 屬性值以value結尾，value為完整單詞或單詞一部分 |
| [attribute*="value"] | 屬性值為指定值的子字串 |
h1,h2{ color:red;}組合使用選取器
em{ color:red;}.project em{ color:red;}.architect .project em{ color:red;}/* 以上實現相同效果，特殊性由低到高 */第十章，為文本添加樣式選擇字型系列font-family:name對於包含多個單詞的字型名稱，應該用引號（單引號或雙引號）包圍起來。雖然font-family屬性是繼承的，但有幾個元素不會繼承父元素的字型設定，其中有表單的select、textarea、input元素。不過可以強制它們繼承。指定替代字型可以在font-family屬性中列舉一種以上的字型，備用。font-family:name,name2,name3..建立斜體font-style:italic取消斜體font-style:normal應用粗體格式font-weight:bold（粗體）、font-weight:bolder（更粗）、font-weight:light（更細）、或者輸入100~900之間100的倍數，400代表正常粗細，700代表粗體設定字型大小為網頁的文本設定字型大小有兩種方法：直接使用像素指定要使用的特定字型大小，或使用百分數、em或者rem指定相對於父元素文本的大小建議使用em為單位1em總是等於預設字型大小大小，這是em的工作原理rem總是以根項目作為參照系font-size:xx-small、font-size:x-small、font-size:small、font-size:medium、font-size:large、font-size:x-large、font-size:xx-large、或者使用數字加單位，或者百分比設定行高行高指的是段落的行距，即段落內每行之間的距離line-height:n -- 它與元素字型大小相乘，得出需要的行高line-height:a -- 這裡的a是以em、px、pt為單位的值line-height:p% -- 字型大小百分比同時設定所有字型值可以使用font同時設定字型樣式、粗細、變體、大小、行高和字型系列使用font，至少需要包含字型大小和字型系列屬性設定顏色color:red;使用樣式表可以包含顏色名稱、十六進位值、RGB、HSL、RGBA和HSLA值的任意組合來定義顏色設定背景background-color、background-image、background-repeat（重複背景映像）、background-attachment、background-position，還可以使用background簡記法background-repeat：重複背景映像，background-repeat:direction，direction有四個可選值：repeat、repeat-x、repeat-y、no-repeatbackground-attachment：控制背景映像是否隨頁面滾動，fixed：背景映像附著在瀏覽器視窗上，即使訪問者滾動視窗，映像仍會繼續顯示，scroll：訪問者滾動頁面時背景映像會移動，local：只有訪問者滾動背景映像所在元素時，背景映像才會移動。background-position：指定元素背景圖位置控制間距可以增加或減少單詞之間或字母之間的距離，前者稱為字間距，後者稱為字偶距字間距：word-spacing:length字偶距：letter-spacing:length添加縮排text-indent屬性，可以指定段落第一行前面應該空出多大空間對齊文本text-align:left(right,center,justify)，靠左對齊，靠右對齊，居於中間，左右對齊修改文本的大小寫text-transform屬性，可以為樣式定義文字大小寫。text-transform:capitalize -- 每個單字首大寫text-transform:uppercase -- 讓所有字母大寫text-transform:lowercase -- 讓所有字母小寫text-transform:none -- 讓文本保持本來的樣子使用小型大寫字母小型大寫字母：字母是大寫的，但縮小到了小寫字母的大小。使用font-variant控制。使用：font-variant:small-caps取消：font-variant:none裝飾文本text-decoration屬性裝飾文本，添加底線或其他類型線條text-decoration:underline -- 添加底線text-decoration:overline -- 添加上劃線text-decoration:line-through -- 添加刪除線取消：text-decoration:none設定空白屬性使用white-spacewhite-space:pre -- 讓瀏覽器顯示原文本中所有空格和斷行符號
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
