HTML5与CSS3基础教程第八版学习笔记7~10章
生活随笔
收集整理的這篇文章主要介紹了
HTML5与CSS3基础教程第八版学习笔记7~10章
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第七章，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，opacity 5、URL 6、CSS顏色 7、RGB 8、十六進制數 9、更多CSS3提供的指定顏色方式：RGBA、HSLA、HSL RGBA：在RGB基礎上加了一個代表alpha透明度的A。所有現代瀏覽器都支持，IE9之前的不支持。格式：color:rgb(89,0,127)，color:rgba(89,0,127,0.75) HSL和HSLA HSL：色相（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、按類選擇要格式化的元素 使用.（點號）開頭，不加空格，輸入className 2、按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-repeat background-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-space white-space:pre -- 讓瀏覽器顯示原文本中所有空格和回車轉載于:https://www.cnblogs.com/TwinklingZ/p/5299955.html
總結
以上是生活随笔為你收集整理的HTML5与CSS3基础教程第八版学习笔记7~10章的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux程序包管理（yum）
- 下一篇： 妙味课堂——HTML+CSS(第一课)