| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style type="text/css"> | |
| ul{ | |
| list-style-type:decimal; | |
| border:1px solid gray; | |
| } | |
| .first{ | |
| border:1px solid green; | |
| padding-left:10px; | |
| margin-left:0; | |
| } | |
| .second{ | |
| list-style-position: outside; | |
| border:1px solid red; | |
| } | |
| a[href]:before{content:attr(href);} | |
| h2:before{ | |
| content:open-quote; | |
| } | |
| h2:after{ | |
| content:close-quote; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li class="first">你好</li> | |
| <li class="second">你好</li> | |
| <li>你好</li> | |
| <li>你好</li> | |
| <li>你好</li> | |
| <li>你好</li> | |
| <li>你好</li> | |
| </ul> | |
| <li>我靠</li> | |
| <a href="http://www.baidu.com">新浪</a> | |
| <a href="http://www.baidu.com">網易</a> | |
| <a href="http://www.baidu.com">百度</a> | |
| <h2></h2> | |
| <scrip> | |
| CSS名詞解釋 | |
| --元素： | |
| 元素是文檔結構的基礎，文檔中的每個元素都對文檔的表現起一定的作用.。每個元素都會生成一個框，其中包含元素的內容。 | |
| --替換和非替換元素 | |
| 並非所有的元素都以同樣的方式創建，圖像和段落就不是同類元素，span和div也不同，在css中元素通常有兩種形式：替換和非替換， | |
| --替換元素 | |
| 替換元素指的是用來替換元素內容的部分，並非由文檔內容直接表示；最熟悉的例子就是img，它由文檔本身之外的一個圖像文件來替換，input元素與之類似，取決於input的類型，要由一個單選鈕，復選框或文本輸入框替換，替換元素顯示時也生成框； | |
| --非替換元素 | |
| 大多數html元素都是非替換元素，這意味着其內容由瀏覽器在元素本身生成的框中顯示，例如<span>hi there</span>就是一個非替換元素，文本hi there將由瀏覽器顯示。 | |
| --元素顯示角色 | |
| 除了替換元素和非替換元素，css還使用另外兩種基本元素類型，塊級元素和行內元素。 | |
| --塊級元素 | |
| 塊級元素生成一個元素框，默認他會填充其父元素的內容區，旁邊不能有其他元素，也就是他會獨占一行，替換元素可以是塊級元素，不過通常都不是 ； | |
| 列表項是塊級元素的一個特例，列表項會生成一個標記符，無序列表中通常是一個點，有序列表中是一個數字，這個標記符會關聯到，元素框，除了這個標記符外，列表項的所有其他地方都與塊級元素相同； | |
| --行內元素 | |
| 行內元素在一個文本框內生成元素框，而不會打斷這行文本，可以出現在另一個元素的內容而不會破壞其顯示。因為他之前或之后沒有分隔符，而塊級元素之前或之后是有分隔符的所有他獨占一行。 | |
| display： | |
| 由於display的默認值是inline,默認地其內容會顯示為行內文本。 | |
| css具有影響顯示角色的基本功能， 例如吧p變成行內元素 吧span變成塊級元素，、 | |
| 對於link標簽屬性的定義：可以參考css權威指南第21頁。 | |
| @import url(fuck.css); | |
| CSS要求@import指令出現在樣式表其他規則之前， | |
| 特定屬性類型選擇器 | |
| *[lang|="en"]{color:white;} | |
| 這個規則會選擇lang屬性等於en或者以en-開頭的所有元素， | |
| 一般地[attr|="val"]可以用於任何屬性及其值， | |
| img[src|="figure"]{border:1px solid gray;} | |
| 這個規則會選擇圖片地址以figure開發或等於figure的所有圖片； | |
| 關於后台選擇器，兩個元素之間的層次間隔是可以無限的。 | |
| 實際上有兩種個基本的錨類型：已訪問的和未訪問的。這些類型稱為偽類使用這些偽類的選擇器則稱為偽類選擇器 | |
| 動態偽類 | |
| ：focus 只是當前擁有輸入焦點的元素； | |
| ：hover | |
| :active | |
| 靜態偽類 | |
| ：link | |
| :visited | |
| 偽類的順序很重 link-visted-focus-hover-active | |
| 動態偽類可以應用到任何元素而靜態偽類只可以應用到a標簽 | |
| 靜態偽類：first-child | |
| 從對應的模式來講 ：lang()偽類就像是|=屬性選擇器 | |
| *：lang(fr){font-style:italic;} | |
| 表示吧所有的法語元素變成斜體 | |
| 在html中語言由lang屬性和meta元素的組合來確定， | |
| 因此偽類比屬性選擇器稍微健壯一些在需要語言特定的樣式時，大多數情況下偽類都是更好的選擇 | |
| 偽元素選擇器 | |
| ：first-letter 用於設置一個塊級元素首字母的樣式而且僅對應該首字母設置樣式 | |
| ：first-line 設置第一行樣式 | |
| 這兩個選擇器都只能應用於標記或段落之類的塊級元素而不能應用於超鏈接等的行內元素 | |
| ：before :after設置之前和之后元素的樣式 | |
| 每個選擇器的特殊性對於每個規則瀏覽器會選擇計算選擇器的特殊性，並將這個特殊性附加到規則中的各個聲明如果一個元素有兩個或多個沖突屬性聲明，那么具有最高特殊性的聲明將會勝出。 | |
| 所有樣式沖突的解決都由層疊來處理。 | |
| 選擇器的特殊性由選擇器本身的組件確定，特殊性值表述為4個部分如 0 0 0 | |
| 一個選擇器的具體特殊性由下確定 | |
| 如果兩個規則的權重，來源和特殊性完全相同，那么在樣式表中后出現的一個會勝出， | |
| 正在"點擊"的未訪問鏈接可以與其中3個規則匹配即：：link:hover和：active所以這三個規則當中最后聲明的一個將會勝出， | |
| 沖突的聲明要通過這個層疊過程排序，並由此確定最終的文檔顯示，這個過程的核心是選擇器及其相關聲明的特殊性，以及集繼承機制。 | |
| *{color:red;} | |
| p { | |
| color:gray; | |
| } | |
| <p>wo kao <em>我艹</em></p> | |
| 如果有這樣一段樣式這樣一段代碼，那么em中的顏色為紅色，因為繼承的屬性沒有特殊性，而通配符選擇器的特殊性是0所以通配符選擇器會勝出 | |
| 一個1em等於當前元素字體的大小比如當前元素的字體大小是16px那么如果設置margin-top:1em;就是說元素的上外邊距為16px; | |
| 如果設置font-size：1em那么這個字體的大小繼承自他父元素字體的大小； | |
| css定義了五種通用字體系列 | |
| serif字體（襯線體） | |
| 這些字體成比例而且有上下短線如果字體中的所有字符根據其不同大小有不同的寬度，則稱該字體是成比例的。例子有Georgia; | |
| sans-serif字體（無襯線字體） | |
| 這些字體是成比例的，而且沒有上下短線 例子有verdana; | |
| monospace字體（等寬字體） | |
| 字體不是成比例的，每個字符的寬度都完全相同，可能有上下短線 也可能沒有，如果一個字體的的字符寬度完全相同，則歸類為monospace字體通常用於模擬打自己打出的文本，例子courier | |
| cursive字體（手寫體） | |
| 這些字體試圖模仿人的手寫體，通常他們主要由曲線和 serif字體中沒有的筆划裝飾組成 例子:author | |
| fantasy字體(幻想體) | |
| 這些字體無法用任何特征來定義，只有一點是確定的那就是我們無法很容易的將其划歸為任何一種其他的字體系列當中例子western | |
| <p style="font-family:Georgia;">abcdefghiABCEDFG</p> | |
| <p style="font-family:verdana;">abcdefghiABCEDFG</p> | |
| <p style="font-family:courier;">abcdefghiABCEDFG</p> | |
| <p style="font-family:author;">abcdefghiABCEDFG</p> | |
| <p style="font-family:western;">abcdefghiABCEDFG</p> | |
| 理論上來講用戶安裝的任何字體都會落入上面描述的某種通用系列當中。 | |
| 只有當一個字體中有一個或多個空格時才需要在font-family聲明中添加引號 | |
| 字體設計中一個很常見的特性就是9級 加粗度， | |
| font-size：如果是百分數的話 ，百分數值總是根據從父元素繼承的大小來計算， | |
| css中font-size是可以繼承的，不過集成的是計算值不是百分數， | |
| font-family; | |
| font-bold | |
| font-size | |
| font-style:normal,italic,oblique | |
| normal表示非斜體或傾斜的文本，或豎直字體 | |
| italic:斜體是一種單獨的的字體風格，對每個字母的結構有一些小改動，來反映變化的外觀，對於serif字體尤其如此，除了文本字符有些斜以外serifs | |
| 可以修改為一種傾斜字體， | |
| oblique:傾斜文本則是正常豎直字體的一個傾斜版本 | |
| 如果沒有italic字體，但是有一種oblique字體，則要在需要前者的地方使用后者；如果反過來則不會這樣使用。用戶代理可能只是計算豎直字體的一個傾斜版本來生成oblique字體 | |
| 通常italic和oblique看上去完全一樣； | |
| 字體變形 | |
| font-variant:small-caps | normal |inherit | |
| 拉伸和調整字體 | |
| font-stretch | |
| <strong style="font-stretch:wider;font-family:serif;">fuckme</strong> | |
| font-size-adjust 127頁 | |
| font簡寫 | |
| font:italic 900 small-caps 30px verdana,serif; | |
| 規則就是font-size必須要在font-family前面而且是作為聲明中的最后兩個值，而且font聲明中必須有這兩個值font還可以設置行高 | |
| line-height是一個文本屬性而不是一個字體屬性 | |
| 行高是可選的但是他格式是這樣寫的 font-size/line-height | |
| 例子：font:12px/12px serif; | |
| p 131頁使用系統字體 | |
| p132 字體匹配 | |
| text-indent:文本縮進無法應用到行內元素； 圖像之類的替換元素上也無法應用,如果設置為百分數，相對的是其父元素的寬度 | |
| line-height指的是文本行基線之間的距離而不是字體的大小，他確定了將各個元素框的高度增加或減少了多少。 | |
| line-height控制了行間距，這是文本行之間超出字體大小的額外空間。 換句話說line-height值和字體大小之差就是行間距 | |
| 在應用到塊級元素時， line-height定義了元素中文本基線之間的最下距離， | |
| line-height的默認值通常都是字體大小的1.2倍 | |
| 當line-height值從父元素繼承的時候，要從父元素計算，而不是在子元素上計算， | |
| 但是當line-height的值是指定的的一個數時， 縮放因子將是繼承值而不是計算值，這個數會應用到該元素及其所有子元素所以各元素都根據其自己的font-szie來計算line-height | |
| vertical-align：屬性只應用於行內元素和替換元素 和表格單元 該屬性不能繼承 | |
| baseline|sub|super|top| text-top|middle|bottom|text-bottom|percentage |length|inherit | |
| text-transform:uppercase|lowercase|capitalize|none|inherit | |
| capitalize會對每個單詞的首字母大寫； | |
| text-decoration:none|underline|overline|line-through|blink|inherit 不能繼承 | |
| overline會在元素的頂端畫一個上划線 | |
| word-sapcing:字間隔 | |
| letter-sapcing:字符間隔 | |
| text-shadow:每個陰影都由一個顏色和3個長度值來定義，可以設置多個陰影 | |
| 前兩個長度決定了陰影與文本的偏移距離，第三個長度可選定義了陰影的模糊半徑 | |
| 模糊半徑定義為從陰影輪廓到模糊效果邊界的距離。 | |
| white-space:noraml|nowrap|pre|pre-wrap|pre-line|inherit | |
| direction:ltr|rtl|inherit 屬性影響塊級元素中文本的書寫方向；表中列布局的方向，內容水平填充其元素框的方向。以及兩端對齊元素中最后一行的位置，對於行內元素只有當 | |
| unicode-bidi屬性設置為embed或bidi-override時才會應用direction屬性。 | |
| 盡管css試圖處理書寫方向，但是Unicode有一種更強壯的方案來處理方向性，利用屬性unicode-bidi，CSS創作人員可以充分利用Unicode的某些功能。 | |
| unicode-bidi:normal|embed|bidi-override|inherit; p164 | |
| normal：元素不會對雙向算法打開附加的一層個嵌套，對於行內元素，順序的隱式重排會跨越元素邊界進行。 | |
| embed:如果是一個行內元素，這個值對於雙向算法會打開附加的一層嵌套，這個嵌套層的方向由direction屬性指定，會在元素內部隱式的完成順序重排， | |
| bidi-override: | |
| 這會為行內元素創建一個覆蓋，對於塊級元素，將為不在另一塊中的行內后代創建一個覆蓋，這說明，順序重排在元素內部嚴格按direction屬性進行，忽略雙向算法的隱式部分 | |
| 每個元素都相對於其包含塊擺放，可以這么說包含快就是一個元素的“布局上下文”對於正常的西方語言文本流中的的一個元素，包含快由最近的塊級祖先框，表單元格或 | |
| 行內塊祖先框的內容邊界構成， | |
| 可以設置為auto的水平屬性有witdh margin-right margin-left | |
| 一般地一個元素的width被定義為從左內邊界到右內邊界的距離，height則是從上內邊界到下內邊界的距離。這些屬性都可以應用到元素 | |
| </scrip> | |
| </body> | |
| </html> |
css名詞解釋
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。