CSS要點(diǎn)記錄
CSS 指層疊樣式表 (Cascading Style Sheets)
多種樣式時(shí)的優(yōu)先級(jí)問題
數(shù)字越大優(yōu)先級(jí)越高
- 瀏覽器缺省設(shè)置
- 外部樣式表
- 內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
- 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
在HTML中插入樣式表
插入樣式表的方法有幾種
- 在<head>中插入<link>，如
<head>
<link rel='stylesheet' type='text/css' href='/style.css' />
</head>
- 在<head>中插入內(nèi)部樣式表，如
<head>
<style type='text/css'>
h1 {
color: red;
}
</style>
</head>
- 內(nèi)聯(lián)樣式表，如
<p style='color: red; font-size: 12px;'>hello</p>
CSS選擇器
CSS選擇器可以分為派生選擇器（上下文選擇器），id選擇器，class選擇器，屬性選擇器等
| 選擇器 | 示例 | 說明 |
|---|---|---|
| .class | .ClassName | 類名為ClassName的元素 |
| .class1.class2 | .ClassName1.ClassName2 | 選擇同時(shí)為ClassName1和ClassName2的元素 |
| #id | #IDName | id名為IDName的元素 |
| * | * | 選擇全部元素 |
| element | p | 選擇元素p |
| element1,element2 | div,p | 選擇全部div和p元素 |
| element1 element2 | div p | 選擇div標(biāo)簽中的所有p元素(注意元素間的間隔可以是任意的) |
| element1>element2 | div>p或div > p(可以有空百符) | 選擇div標(biāo)簽中的所有p元素(注意元素間的間隔只能有一層) |
| element1+element2 | div+p | 所有緊接在div后面的p元素 |
| [attr] | [name] | 所有含有name屬性的元素 |
| [attr=value] | [name='Name'] | 所有name屬性值為'Name'的元素 |
| [attr~=value] | [name~='Name'] | 所有name屬性值中含有單詞'Name'的元素 |
| [attr|=value] | [name|='Name'] | 所有name屬性值以'Name'開頭的元素 |
| [attr^=value] | [name^='Name'] | 所有name屬性值以'Name'開頭的元素 |
| [attr$=value] | [name$='Name'] | 所有name屬性值以'Name'結(jié)尾的元素 |
| [attr*=value] | [name*='Name'] | 所有name屬性含有'Name'子串的元素 |
| :link | a:link | 未訪問的鏈接 |
| :visited | a:visited | 已訪問的鏈接 |
| :hover | a:hover | 鼠標(biāo)懸浮在上面的鏈接 |
| :active | a:active | 活動(dòng)的鏈接(鼠標(biāo)點(diǎn)擊時(shí)) |
| :focus | input:focus | 獲得焦點(diǎn)的input元素 |
| :first-child | li:first-child | 所有作為第一個(gè)子元素的li元素 |
CSS語法
選擇器 {
屬性:值;
屬性:值;
}
selector {
property_1: value1;
property_2: value2;
}
- 注意不要在屬性值和單位之間插入空格，如 font-size: 12 px
- CSS對(duì)大小寫不敏感，但涉及HTML時(shí)class和id值對(duì)大小寫敏感
- CSS屬性具有繼承的特點(diǎn)，如果設(shè)置body字體那么body的子元素將繼承字體的CSS樣式，當(dāng)需要子元素有不同的字體樣式時(shí)只需要定義子元素的樣式就好，對(duì)于優(yōu)先級(jí)高的樣式會(huì)覆蓋優(yōu)先級(jí)低的樣式
CSS中的各種屬性：
顏色
三種表示方式：
- 用顏色的名字表示：{color: red;}
- 用16進(jìn)制值表示：{color: #ff0000;} 或用縮寫 {color: #f00}（等同于#ff0000）
- 用rgb表示：{color: rgb(255,0,0);} 或用百分比 {color: rgb(100%,0%,0%);}
- 用rgba表示：{color: rgba(255,0,0,20);}（增加透明通道）
背景
CSS中背景的設(shè)置可以為圖片也可以設(shè)置顏色，顏色默認(rèn)值為transparent，背景圖排尿默認(rèn)值為none，并且背景不能被繼承：
- 背景顏色：{background-color: blue;}
- 元素內(nèi)邊距：{padding: 12px;}
- 背景圖片：{background-image: url(/image.png);}
- 背景重復(fù)，屬性值有repeat-y，repeat-x，no-repeat：{background-repeat: repeat-y;}
- 背景定位，屬性值有top，bottom，left，right，center，百分比（eg. 10% 10%），像素（eg. 10px 10px），當(dāng)只有一個(gè)關(guān)鍵字時(shí)另一個(gè)關(guān)鍵字默認(rèn)為center，如值設(shè)置為top時(shí)等價(jià)于top center，有一點(diǎn)需要注意的是，百分?jǐn)?shù)值同時(shí)應(yīng)用于元素和圖像，也就是說0% 0%表示圖像的左上角位于元素的左上角，100% 100%表示圖像的右下角位于元素的右下角，當(dāng)用像素（長度）表示時(shí)，如10px 20px，表示圖像的左上角距元素左側(cè)10px，距元素上部20px：{background-position: 10% 10%;} 或者 {background-position: 10px 10px}
- 背景關(guān)聯(lián)，可以使背景圖像相對(duì)瀏覽器可視區(qū)域固定，屬性值默認(rèn)為scroll，設(shè)置為fixed可以使背景不隨頁面滾動(dòng)：{background-attachment: fixed;}
- 將所有背景屬性寫在一個(gè)聲明中：{background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;}
文本
- 文本縮進(jìn)，text-indent，文本縮進(jìn)無法應(yīng)用于行內(nèi)元素和圖像等，同時(shí)文本縮進(jìn)具有繼承性，文本進(jìn)行負(fù)縮進(jìn)時(shí)可以形成懸掛縮進(jìn)，當(dāng)使用百分比時(shí)指縮進(jìn)占父元素寬度百分比：{text-indent: 5em;}
- 文本對(duì)齊，text-align，屬性值有l(wèi)eft，right，center，justify，inherit分別對(duì)應(yīng)左右中心和兩端對(duì)齊，以及從父元素繼承對(duì)齊方式：{text-align: center;}
- 字（詞）間隔，word-spacing，調(diào)整字與字之間的間隔，屬性值有正負(fù)值和零：{word-spacing: 0.5em;} 注：CSS 把“字（word）”定義為任何非空白符字符組成的串，并由某種空白字符包圍。這個(gè)定義沒有實(shí)際的語義，它只是假設(shè)一個(gè)文檔包含由一個(gè)或多個(gè)空白字符包圍的字。支持 CSS 的用戶代理不一定能確定一個(gè)給定語言中哪些是合法的字，而哪些不是。盡管這個(gè)定義沒有多大價(jià)值，不過它意味著采用象形文字的語言或非羅馬書寫體往往無法指定字間隔。對(duì)英文來說word-spacing就是在詞與詞之間的空格
- 字母間隔，letter-spacing，字母間隔指每個(gè)字母之間的空格，取值有正負(fù)和0，{letter-spacing: 0.5em;}
- 字符轉(zhuǎn)換，text-transform，屬性值有none，lowercase，uppercase，capitalize，分別對(duì)應(yīng)原始大小寫，全部小寫，全部大寫，每個(gè)單詞首字母大寫：{text-transform: uppercase;}
- 文本裝飾，text-decoration，屬性值有none，overline，underline，line-through，blink，分別對(duì)應(yīng)無裝飾，上劃線，下劃線，中間橫線：{text-decoration: underline;}
- 空白符處理，white-space，確定元素內(nèi)處理空白符的方式，屬性值有normal，pre，nowrap，pre-wrap，pre-line，inherit，分別對(duì)應(yīng)：忽略多空白符，保留空白符（類似pre標(biāo)簽），不換行，保留空白保留換行，合并空白保留換行，從父元素繼承屬性值；pre和pre-wrap的區(qū)別在于pre-wrap允許自動(dòng)換行：{white-space: normal;}
- 文本方向，direction，屬性值有l(wèi)tr，rtl，inherit，分別對(duì)應(yīng)從左往右的文本，從右往左的文本，繼承父元素屬性值，注：對(duì)于行內(nèi)元素，只有當(dāng) unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時(shí)才會(huì)應(yīng)用 direction 屬性：{direction: rtl;}
- 行間距，line-height，屬性值可以為百分比，像素，數(shù)值：{line-height: 1.5;}
字體
CSS字體系列：
字體系列是對(duì)多種變形字體的一個(gè)集合，在CSS中定義了幾個(gè)通用字體系列，它們規(guī)定了系列中字體是否成比例，是否有上下短線，字體寬度等，成比例字體根據(jù)字符大小不同而有不同的寬度，例如，小寫 i 和小寫 m 的寬度就不同；上下短線是字符壁畫末尾的修飾，如I上下的短線：
- Serif字體：成比例字體，有上下短線
- Sans-serif字體：成比例字體，無上下短線
- Monospace字體：非成比例字體，不確定是否有短線
- Cursive字體：模仿手寫體，如花體
- Fantasy字體：包括無法容易用特征定義的字體，包括Western、Woodblock 和 Klingon等
在CSS中定義字體系列：
- 定義通用字體系列
p {font-family: sans-serif;}
- 指定更加具體的字體
p {font-family: Georgia;}
- 使用多種候選字體，當(dāng)系統(tǒng)中沒有首選字體時(shí)可以使用候選字體，當(dāng)系統(tǒng)中所有字體都無法匹配時(shí)會(huì)選擇一種可用的serif字體，當(dāng)字體名中含有空格或者#或$時(shí)才需要在字體名稱外加引號(hào)
p {font-family: Georgia, Times, 'New York', sans-serif;}
CSS字體風(fēng)格（font-style）
字體風(fēng)格的屬性值有三種，normal，italic，oblique，分別對(duì)應(yīng)文本正常顯示，文本斜體顯示，文本傾斜顯示
italic和oblique的區(qū)別：
italic是文本自身擁有的斜體字形，而oblique是將正常的文本傾斜顯示，對(duì)于沒有傾斜屬性的字體要用oblique來表示，而大部分字體的italic和oblique在瀏覽器中看上去完全一樣
小型大寫字母（font-variant）
CSS可以將文本設(shè)置為小型大寫字母，屬性值有normal，small-caps，inherit：{font-variant: small-caps;}字體粗細(xì)和大小（font-weigth font-size）
字體粗細(xì)使用font-weigth設(shè)置，屬性值可以為normal，bold，bolder，lighter或者100-900的粗細(xì)度，其中如果設(shè)置為lighter則設(shè)置一個(gè)比繼承值更粗的字體，lighter則相反，數(shù)值400等價(jià)于normal，700等價(jià)與bold
字體大小使用font-size設(shè)置，屬性值可以是絕對(duì)大小（px），也可以是相對(duì)大小（em），瀏覽器中默認(rèn)的字體大小為16px時(shí)，1em=16px，em=npx/16px，則2em=32px
鏈接
- 鏈接樣式的四個(gè)屬性L：link，visited，hover，active
- 注意：
- a:hover 必須位于 a:link 和 a:visited 之后
- a:active 必須位于 a:hover 之后
列表
列表的主要樣式是列表項(xiàng)的標(biāo)志，即列表項(xiàng)前的圖形樣式，改變列表項(xiàng)的樣式，可以用（list-style-type）
- 列表項(xiàng)圖形，屬性值有square，circle，decimal，upper-roman，lower-alpha等：{list-style-type: square}
- 列表項(xiàng)圖像，屬性值為圖像的url：{list-style-type: url(image.gif);}
列表項(xiàng)位置可以配置列表項(xiàng)在內(nèi)容以內(nèi)或者內(nèi)容以外，通過list-style-position
- 將列表項(xiàng)放在內(nèi)容以內(nèi)：{list-style-position: inside;}
- 放在內(nèi)容以外：{list-style-position: outside;}
簡寫的列表樣式，將列表的所有屬性寫到list-style中
- 如：{list-style: url(image.gif) square inside;}
表格
CSS給表格提供了許多樣式屬性，包括邊框，寬度高度，文本對(duì)齊等
- 表格邊框：為表格標(biāo)題和要素加邊框 table, th, td {border: 1px solid blue;}
- 以上的表格邊框會(huì)顯示兩層邊框，因?yàn)楸砀窀鷥?nèi)部元素都具有邊框，要顯示單線邊框可以設(shè)置border-collapse屬性：{border-collapse: collapse;}
- 表格寬高：使用width和height屬性：table {width: 100%;} th {height: 50px;}
- 表格中的文本對(duì)齊
- 文本水平對(duì)齊：{text-align: center;}
- 文本垂直對(duì)齊：{vertical-align: bottom;}
- 表格內(nèi)容邊距：設(shè)置表格內(nèi)容和table邊框的距離可使用padding
- 給th設(shè)置padding：th {padding: 10px;}
- 給td設(shè)置padding：td {padding: 10px;}
- 表格文本和背景顏色：文本和背景顏色和其他元素一樣
- table {background-color: green; color: red;} th {color: blue;}
- 其他表格屬性：其他表格屬性包括border-collapse，border-spacing，caption-side，empty-cells，table-layout
- border-collapse：設(shè)置邊框是否合為一，屬性值有collapse，separate，inherit：{border-collapse: collapse;}
- border-spacing：設(shè)置元素邊框之間的距離，padding設(shè)置的是元素與元素邊框之間的距離，border-spacing設(shè)置的是邊框與邊框間的距離，屬性值是邊框距離或者水平間距 垂直間距，單位為px，cm等：{border-spacing: 10px 20px;}
- caption-side：設(shè)置表格標(biāo)題位置，屬性值有top，bottom，inherit：{caption-side: bottom;}
- empty-cells：設(shè)置是否顯示空的元素，屬性值有hide，show：{empty-cells: hide;}
- table-layout：設(shè)置表格布局的顯示方法，屬性值有fixed，automatic，inherit，當(dāng)使用fixed時(shí)，表格水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾取卧耖g距，而與單元格的內(nèi)容無關(guān)，當(dāng)使用automatic時(shí)，表格的列寬度有表格中沒有折行的最寬內(nèi)容決定，一般fixed模式運(yùn)算快，而automatic模式觀感更好：{table-layout: fixed;}
- 輪廓（outline）：CSS可以給元素增加輪廓，輪廓的樣式包括輪廓線樣式（outline-style），輪廓線顏色（outline-color），輪廓線寬度（outline-width）
- outline-style：設(shè)置輪廓線樣式，可選的屬性值有none，dotted，dashed，solid，double，groove，ridge，inset，outset，inherit：{outline-style: dashed;}
- outline-color：設(shè)置輪廓線顏色：{outline-color: #121212;}
- outline-width：設(shè)置輪廓線寬度，屬性值可以為thin，medium，thick，長度：{outline-width: thin;} {outline-width: 10px;}
- outline：將屬性值寫在一個(gè)聲明中：{outline: dotted 10px red;}
CSS框模型
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。
[圖片上傳失敗...(image-3ebadc-1539826777681)]
在CSS框模型中，直接包含元素的是內(nèi)邊距，內(nèi)邊距的邊緣是邊框，邊框以外是外邊距，外邊距和內(nèi)邊距是可選的，默認(rèn)為0，邊框內(nèi)顯示的是元素的背景，外邊距默認(rèn)是透明的，因此不會(huì)遮擋后面的元素
當(dāng)不設(shè)置內(nèi)邊距和外邊距時(shí)，它們將由用戶代理設(shè)置默認(rèn)模式，可以使用選擇器覆蓋默認(rèn)行為 * {margin: 0; padding: 0;}
CSS中設(shè)置的width，height指的是內(nèi)容的寬度和高度，假設(shè)將內(nèi)容設(shè)置為寬70px，內(nèi)邊距5px，外邊距10px，則最終元素的寬度是100px，如下
注：外邊距可以為負(fù)，邊距可以同時(shí)設(shè)置四邊邊距也可以單獨(dú)設(shè)置每邊邊距，如：{margin-left: 20px; padding-left: 20px;}
填充padding
padding控制的是邊框與內(nèi)容之間的空白區(qū)域，接受長度和百分比指，但是不接受負(fù)值
- 統(tǒng)一設(shè)置四邊的內(nèi)邊距可以只設(shè)置padding也可以按照上右下左的順序設(shè)置四邊邊距：{padding: 10px} 或 {padding: 10px 10% 0.25em 2ex;}
- 也可以分別設(shè)置各邊的邊距：{padding-left: 10px; padding-top: 15px;}
外邊距margin
外邊距在元素邊框外設(shè)置額外的空白區(qū)域，可以接受長度值和百分比，同時(shí)可以接受負(fù)值和auto
- margin的設(shè)置與padding相似：{margin: 0.5em 1em 0.5em 1em;}
- 同時(shí)可以采用值復(fù)制的方法復(fù)制：{margin: 0.5em 1em;} 這與上面的效果是一樣的
- CSS定義了一些方法可以使的不用為每個(gè)方向的外邊距賦值，它的規(guī)則如下：
- 如果缺少左外邊距的值，則使用右外邊距的值。
- 如果缺少下外邊距的值，則使用上外邊距的值。
- 如果缺少右外邊距的值，則使用上外邊距的值。
- 這樣做有一些情況也無法省略賦值，如把右下邊距設(shè)置為30px，把左上邊距設(shè)置為20px：｛margin: 20px 30px 30px 20px｝或者把左邊距設(shè)置為20px，其他auto：{margin: auto auto auto 20px;}
- 當(dāng)然以上的第二種情況也可以用單獨(dú)設(shè)置的外邊距解決：{margin-left: 20px;}
外邊距的合并問題
- 普通文檔流中塊框的垂直外邊距會(huì)發(fā)生外邊距合并
- 當(dāng)一個(gè)元素位于另一個(gè)元素上方時(shí)，這個(gè)元素的下邊距會(huì)和下方元素的上邊距合并，邊距的大小會(huì)變成他們之中大的那個(gè)
- 當(dāng)一個(gè)元素位于另一個(gè)元素內(nèi)時(shí)，元素的上下外邊框也會(huì)合并
- 沒有邊框和內(nèi)容的元素自身的上下邊距也會(huì)合并
它們的合并看起來會(huì)像這樣
CSS定位屬性
HTML頁面內(nèi)的元素都可以用框來表示，像div，h，p等作為“塊框”，而span，strong等作為“行內(nèi)框”
display屬性可以改變元素框的類型，如display: block可以使a之類的行內(nèi)元素變得像塊狀元素一樣
在某些情況下，不顯示定義也會(huì)創(chuàng)建塊級(jí)元素，如在塊級(jí)元素的開頭直接寫入文本
<div>
in the div
<p>in the paragraph</p>
</div>
CSS定位機(jī)制
- CSS有三種基本定位機(jī)制：普通流，浮動(dòng)，絕對(duì)定位
- 除非專門制定，否則元素都是在普通流中定位，即
- 塊級(jí)元素從上至下垂直排列，行內(nèi)元素水平排列，行內(nèi)元素的間距可以通過水平內(nèi)邊距，邊框，外邊距控制，但是邊框，垂直內(nèi)間距，外間距不影響行間距，行框的高度足夠容納它所包含的所有行內(nèi)框的高度，設(shè)置行高可以改變行框高度
CSS position屬性
定位機(jī)制
position屬性提供了幾種定位機(jī)制，屬性值為static，relative，absolute，fixed
- static：默認(rèn)值，沒有定位，元素框正常生成，作為文檔流的一部分，行內(nèi)元素會(huì)創(chuàng)建行框置于父元素中
- relative：相對(duì)定位，元素保持原有形狀不改變，相對(duì)原有位置進(jìn)行移動(dòng)，原有位置保留，實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置，{position: relative; left: 20px;} 表示在元素左側(cè)添加20像素，即相對(duì)原位置向右移動(dòng)20px
- absolute：絕對(duì)定位，元素從文檔流中完全刪除，原位置關(guān)閉，在相對(duì)與除static定位外第一個(gè)包含元素定位，包含塊可能是元素或者初始包含塊，元素定位后生成一個(gè)塊級(jí)框而不論其原來的框類型
- fixed：相對(duì)與瀏覽器窗口進(jìn)行絕對(duì)定位
內(nèi)容溢出滾動(dòng)條
元素滾動(dòng)條，當(dāng)元素內(nèi)容溢出時(shí)允許用戶代理使用滾動(dòng)機(jī)制
- overflow屬性：屬性值可以為auto，hidden，visible（默認(rèn)），scroll：{overflow: scroll;}
- auto：瀏覽器自動(dòng)判斷如何處理溢出內(nèi)容
- hidden：對(duì)溢出內(nèi)容進(jìn)行修剪
- visible：默認(rèn)值，不對(duì)溢出內(nèi)容進(jìn)行修建，會(huì)顯示在元素外
- scroll：對(duì)元素溢出內(nèi)容進(jìn)行修剪，并提供滾動(dòng)機(jī)制
文本中圖像的垂直排列
對(duì)圖像元素使用vertical-align屬性
- text-top：文字相對(duì)于圖像在上方，文字頂端與圖片頂端平行：{vertical-align: text-top;}
- text-bottom：文字相對(duì)于圖像在下方，文字底端與圖片底端平行：{vertical-align: text-bottom;}
z方向堆疊順序
修改元素的上下關(guān)系使用z-index屬性
- z-index默認(rèn)值為0，數(shù)字越高優(yōu)先級(jí)越高：{z-index: -1;}
CSS元素浮動(dòng)
float屬性
通過float屬性可以使元素脫離文檔流而向上浮動(dòng)
- left：當(dāng)設(shè)置向左浮動(dòng)時(shí)，元素從上方元素開始按順序向上浮動(dòng)，到頂部后向左浮動(dòng)直到碰到框的左邊緣：{float: left;}
- right：當(dāng)設(shè)置向右浮動(dòng)時(shí)，元素從上方元素開始按順序向上浮動(dòng)，到頂部后向右浮動(dòng)直到碰到框的左邊緣：{float: right;}
- 注：當(dāng)框在一行中不夠容納浮動(dòng)的元素時(shí)元素會(huì)依次疊加行，當(dāng)多個(gè)浮動(dòng)的元素高度不同時(shí)會(huì)發(fā)生卡住的現(xiàn)象，當(dāng)默認(rèn)情況下行內(nèi)框會(huì)圍繞在浮動(dòng)元素周圍，更改這種默認(rèn)樣式要用到下方的clear屬性
clear屬性
通過規(guī)定clear屬性規(guī)定元素哪一邊不允許有浮動(dòng)元素，屬性值可以為both，left，right，none（默認(rèn)），inherit
- both：兩側(cè)都不允許有浮動(dòng)元素，不會(huì)圍繞在浮動(dòng)元素周圍
- left：左側(cè)不允許有浮動(dòng)元素
- right：右側(cè)不允許有浮動(dòng)元素
CSS其它屬性
對(duì)齊
對(duì)齊塊元素，塊元素會(huì)占用一行所有寬度，并在其前后都會(huì)換行，如h1，p，div
對(duì)齊塊元素有幾種辦法
- 使用margin進(jìn)行中心對(duì)齊：將左右margin設(shè)置為auto可以讓用戶代理自動(dòng)設(shè)置兩側(cè)邊距對(duì)齊：{margin-left: auto; margin-right: auto; width: 50%;}
- 使用絕對(duì)定位進(jìn)行左右對(duì)齊：右對(duì)齊 {position: absolute; right: 0px;} 左對(duì)齊 {position: absolute; left: left;}
- 使用浮動(dòng)進(jìn)行左右對(duì)齊：左對(duì)齊 {float: left;} 右對(duì)齊 {float: right;}
元素尺寸
CSS允許控制元素寬高，最大最小寬高等
- height：設(shè)置元素高度
- width：設(shè)置元素寬度
- max-height：設(shè)置元素最大高度
- min-height：設(shè)置元素最小高度
- line-height：設(shè)置行高
- max-width：設(shè)置元素最大寬度
- min-width：設(shè)置元素最小寬度
元素分類屬性
通過設(shè)置分類屬性確定元素顯示的方法，包括元素的位置和元素的可見性等
元素顯示樣式
- 將元素設(shè)置為內(nèi)聯(lián)樣式（行內(nèi)元素），inline元素前后不換行，直至行滿，只能包含inline元素：{display: inline;}
- 將元素設(shè)置為塊級(jí)元素，塊級(jí)元素前后換行，且占用一行的所有寬度，可以包含block和inline元素：{display: block;}
- 將元素設(shè)置為inline-block，inline-block既有inline的同行分布特征，又有block元素的寬高度特征：{display: inline-block;}
- 將元素設(shè)置為run-in，此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示：{display: run-in;}
- 將元素設(shè)置為none，元素占用空間從文檔中關(guān)閉：{display: none;}
鼠標(biāo)指針類型
- 通過cursor屬性可以設(shè)置懸浮于元素上方時(shí)指針類型，可選的屬性值有Auto，Crosshair，Default，Pointer，Move，e-resize，ne-resize，nw-resize，n-resize，se-resize，sw-resize，s-resize，w-resize，text，wait，help：{cursor: nw-resize;}
元素可見性，通過visibility屬性設(shè)置
- 默認(rèn)顯示：{visibility: visible;}
- 隱藏顯示：{visibility: hidden;}
- 刪除行列，collapse用于表格時(shí)可以刪除一行或一列，但刪除后表格的寬或高不會(huì)變，布局不變，當(dāng)用于其它元素時(shí)顯示為hidden：{visibility: collapse;}
導(dǎo)航欄
HTML中的導(dǎo)航欄可以使用列表來表示：
<style>
ul{
list-style-type: none;
background-color: green;
color: white;
margin: 0px;
padding: 0px;
}
</style>
<body>
<ul>
<li><a href='#'>home</a></li>
<li><a href='#'>about</a></li>
</ul>
</body>
或者直接用a元素表示
<style>
a {
display: block;
background-color: green;
color: white;
margin: 0px;
padding: 0px;
width: 60px;
text-decoration: none;
}
</style>
<body>
<ul>
<li><a href='#'>home</a></li>
<li><a href='#'>about</a></li>
</ul>
</body>
水平導(dǎo)航欄可以使用inline元素或者float屬性
li {
display: inline;
}
或
li {
float: left;
}
a {
display: block;
width: 60px;
}
CSS2媒介類型
通過設(shè)置CSS2媒介類型可以為不同的輸出媒介定義不同的樣式
通過@media定義輸出類型
<style>
@media screen
p {
font-family: Verdana; font-size: 14px;
}
@media print
p {
font-family: Times; font-size: 10px;
}
@media screen print
p {
font-weight: bold;
}
</style>
CSS中媒介類型有
| 關(guān)鍵字 | 說明 |
|---|---|
| all | 用于所有的媒介設(shè)備 |
| aural | 用于語音和音頻合成器 |
| braille | 用于盲人用點(diǎn)字法觸覺回饋設(shè)備 |
| embossed | 用于分頁的盲人用點(diǎn)字法打印機(jī) |
| handheld | 用于小的手持的設(shè)備 |
| 用于打印機(jī) | |
| projection | 用于方案展示，比如幻燈片 |
| screen | 用于電腦顯示器 |
| tty | 用于使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端 |
| tv | 用于電視機(jī)類型的設(shè)備 |
CSS3內(nèi)容
CSS3邊框
CSS3中可以為邊框添加圓角，陰影和圖片，分別對(duì)應(yīng)border-radius，box-shadow和border-image屬性
border-image：屬性值有四邊分割位置，圖像平鋪方式：div {border-image: url(/image.png) 20 20 20 20 round;} border-image是一個(gè)簡寫，它具有幾個(gè)具體的屬性
border-image-source：邊框圖像文件所在位置
border-image-slice：圖形文件各邊向內(nèi)裁剪，輸入數(shù)值或百分比，數(shù)值的單位默認(rèn)為px
border-image-width：圖片邊框的寬度
border-image-outset：邊框圖像區(qū)域超出邊框的量
border-image-repeat：控制圖像平鋪（repeat），鋪滿（round）或拉伸（stretch）
其中slice指的是圖片被分割的方式，參數(shù)支持值復(fù)制，四個(gè)參數(shù)分別為對(duì)圖像上右下左的分割線位置，最后得到一個(gè)九宮格分別用于填充四角和四邊
border-image-repeat屬性規(guī)定圖像的平鋪方式，round會(huì)湊整填充而進(jìn)行一定的拉伸，repeat不進(jìn)行拉伸且不湊整，stretch拉伸圖像
box-shadow：邊框陰影，屬性值依次為陰影向右偏移量（有負(fù)值），向下偏移量（有負(fù)值），模糊量（可選），陰影大小（可選），內(nèi)陰影（inset，可選）：div {box-shadow: 20px 20px 5px 5px #888888;}
border-radius：邊框圓角，{border-radius: 25px;} 或{border-radius: 25%;}，四個(gè)邊框角落可以分別設(shè)置，如
同時(shí)設(shè)置四個(gè)角落：{border-radius: 25px 25px 25px 25px;}
設(shè)置單個(gè)角的圓角：{border-top-right-radius: 2em;} {border-bottom-left-radius: 2em;}
CSS3背景
CSS3中提供了調(diào)整背景尺寸的屬性background-size和調(diào)整背景定位的屬性background-origin
- background-size：對(duì)背景進(jìn)行拉伸：{background-size: 30% 100%}
- background-origin：設(shè)置背景的定位方式，屬性值有content-box，padding-box（默認(rèn)），border-box，分別對(duì)應(yīng)背景相對(duì)于內(nèi)容區(qū)域，填充（padding）區(qū)域，邊框區(qū)域定位
- 多背景圖像：CSS3允許多背景圖像重疊：{background-image: url(image1.png),url(image2.png);}
CSS3文本
文本陰影text-shadow
- 屬性值為陰影水平偏移，垂直偏移，模糊，陰影顏色：{text-shadow: 5px 5px 5px #FF0000;}
文本換行text-wrap，屬性值為none，normal，unrestricted，suppress
- none：不換行，超出位置的文本會(huì)溢出
- normal：只在允許的換行點(diǎn)換行
- unrestricted：可以在任意點(diǎn)換行
- suppress：壓縮元素中的換行，只在沒有其它有效換行點(diǎn)的時(shí)候換行
- 與word-wrap的區(qū)別：word-wrap屬性值的可選值為normal，break-word，分別對(duì)應(yīng)僅在斷字點(diǎn)換行，可在單詞內(nèi)部換行
- 與word-break的區(qū)別：word-break規(guī)定非中日韓文本的換行規(guī)則，屬性值的可選值為normal，break-all，keep-all，分別對(duì)應(yīng)默認(rèn)換行規(guī)則，可在單詞內(nèi)換行，僅在半角空格或連字符處換行
溢出文本處理text-overflow，屬性值為clip，ellipsis，string
- clip：對(duì)溢出文本進(jìn)行裁剪：{overflow: hidden; text-overflow: clip;}
- ellipsis: 用省略號(hào)代替溢出文本：{overflow: hidden; text-overflow: ellipsis;}
- string：用給定的字符串代替溢出文本
- 注：設(shè)置text-overflow要先設(shè)置overflow屬性為hidden
CSS3字體
在CSS3中允許使用自定義的字體而非必須用戶代理上安裝的字體，在使用時(shí)按需下載，F(xiàn)irefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 類型的字體，Internet Explorer 9+ 支持新的 @font-face 規(guī)則，但是僅支持 .eot 類型的字體 (Embedded OpenType)，使用方法如下
<style>
@font-face
{
font-family: myFont;
src: url(/font.ttf),url(/font1.eot);
}
</style>
當(dāng)需要定義粗體字體時(shí)
<style>
@font-face
{
font-family:myFont;
src: url(font_bold.ttf), url(font1_bold);
font-weight: bold;
}
</style>
當(dāng)使用時(shí)直接使用{font-family: myFont;}
- 其他可選的屬性值有
- font-stretch：定義如何拉伸字體
- font-style：定義字體樣式，屬性值有normal，italic，oblique
- unicode-range：定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"
CSS3轉(zhuǎn)換（transform 2D）
CSS3提供了幾種2D轉(zhuǎn)換的方法，包括translate，rotate，scale，skew，matrix，CSS3的轉(zhuǎn)換方法在某些版本chrome和safari需要加-webkit-前綴，在IE9需要加-ms-前綴
translate：元素的平移：提供水平移動(dòng)距離，垂直移動(dòng)距離：{transform: translate(20px, 20px);}
rotate：元素旋轉(zhuǎn)，提供角度（deg），允許負(fù)數(shù)表示逆時(shí)針旋轉(zhuǎn)：{transform: rotate(20deg);}
scale：元素的縮放，提供寬度放大倍數(shù)，高度放大倍數(shù)：{transform: scale(2,4);}
skew：元素兩邊的旋轉(zhuǎn)，默認(rèn)元素中心位置不改變，提供垂直邊的旋轉(zhuǎn)度數(shù)，第一個(gè)參數(shù)為垂直邊基于上方頂點(diǎn)逆時(shí)針旋轉(zhuǎn)的度數(shù)，第二個(gè)參數(shù)為水平邊基于上方頂點(diǎn)順時(shí)針旋轉(zhuǎn)的度數(shù)：{transform: skew(20deg,30deg);}
-
matrix：可以將所有轉(zhuǎn)換矩陣寫在matrix屬性中，屬性接受6個(gè)參數(shù)：{transform: matrix(a,b,c,d,e,f);} 根據(jù)矩陣運(yùn)算，有如下關(guān)系：x'=ax+cy+e y'=bx+dy+f
matrix 其它的屬性值：scaleX（寬度縮放），scaleY（高度縮放），translateX（水平平移），translateY（垂直平移），skewX（垂直邊旋轉(zhuǎn)），skewY（水平邊旋轉(zhuǎn)）
transform-origin：設(shè)置元素變換相對(duì)點(diǎn)位置
CSS3轉(zhuǎn)換（transform 3D）
3D轉(zhuǎn)換有屬性值transform-style控制3D元素顯示方式，屬性值有flat，preserve-3d，分別對(duì)應(yīng)在平面顯示3d內(nèi)容，保留3d（z軸）空間
- perspective：控制3D元素的透視程度，數(shù)值是元素與視圖的距離，以像素計(jì)
- perspective-origin控制3D元素基點(diǎn)位置，即3D元素所基于的X軸和Y軸，默認(rèn)值為50%，50%
- backface-visibility：規(guī)定元素背對(duì)屏幕時(shí)是否可見，屬性值有visible和hidden
過渡效果transition，通過設(shè)置transition屬性可以規(guī)定動(dòng)畫效果
- transition：屬性值為希望應(yīng)用動(dòng)畫的屬性，動(dòng)畫時(shí)長：{transition: width 1s;}
- transition-property：希望應(yīng)用動(dòng)畫的屬性值
- transition-duration：過渡動(dòng)畫時(shí)長，單位為秒
- transition-delay：動(dòng)畫延遲開始的時(shí)間
- transition-timing-function：過渡動(dòng)畫速度曲線，屬性值有ease，linear，ease-in，ease-out，cubic-bezier(n,n,n,n)分別對(duì)應(yīng)緩入緩出，線性，緩入，緩出，cubiz-bezier函數(shù)（n值在0-1）
- 簡寫的transition屬性：{transotion: width 1s ease 2s;} 延遲2s
動(dòng)畫關(guān)鍵幀（keyframes），通過設(shè)置動(dòng)畫關(guān)鍵幀可以做到多個(gè)動(dòng)畫的連續(xù)播放
@keyframes，自定義動(dòng)畫后使用時(shí)需要制定動(dòng)畫名稱和過渡時(shí)長
- 自定義動(dòng)畫：
@keyframes mytransition {
from {background-color: red;}
to {background-color: blue;}
}
div {
animation: mytransition 2s;
}
同時(shí)也可以通過百分比控制動(dòng)畫時(shí)間
- 通過百分比自定義動(dòng)畫播放時(shí)間
@keyframes myanimation {
0% {background-color: red;left: 0px;}
25% {background-color: blue;left: 10px;}
50 {background-color: green;left: 20px;}
100% {background-color: yellow;left 30px;}
}
使用animation時(shí)可選的屬性值有animation: name duration timing-function delay iteration-count direction; 其中各屬性值可分開賦值
- animation-duration：動(dòng)畫過渡間隔
- animation-timing-function：過渡動(dòng)畫時(shí)間曲線
- animation-delay：動(dòng)畫執(zhí)行前的延時(shí)
- animation-iteration-count：動(dòng)畫循環(huán)次數(shù)，屬性值為n次或infinite
- animation-direction：動(dòng)畫播放的方向，屬性值有normal和alternate，分別對(duì)應(yīng)正常播放和輪流反向播放
- animation-play-state：動(dòng)畫播放狀態(tài)，控制動(dòng)畫播放和暫停，屬性值有paused和running
- animation-fill-mode：在動(dòng)畫時(shí)間以外的樣式，分別有none，forwards，backwards，both
- none：不改變默認(rèn)行為
- forwards：向前填充，即動(dòng)畫完成后保持最后一個(gè)關(guān)鍵幀狀態(tài)
- backwords：向后填充，即動(dòng)畫開始前，在delay時(shí)間內(nèi)應(yīng)用第一個(gè)關(guān)鍵幀的屬性
- both：前后都填充屬性
CSS3多列文本布局
多列的可設(shè)置屬性有column-count，column-gap，column-rule，column-span，column-width
- column-count：規(guī)定列數(shù)
- column-gap：規(guī)定列之間的間隔
- column-rule：規(guī)定多列的分隔的顏色，樣式，寬度，是column-rule-*的簡寫
- column-rule-color：多列分隔的顏色
- column-rule-style：多列分隔的樣式，屬性值與邊框樣式相似
- column-rule-width：多列分隔的寬度
- column-span：規(guī)定元素可以橫跨的列數(shù)，屬性值為1或all，如標(biāo)題可以設(shè)置為all
- column-width：列的寬度
- columns：多列的簡寫屬性，規(guī)定column-width和column-count：{columns: 100px 3;}
CSS3新的用戶界面屬性
調(diào)整大小元素(resize）
- 通過resize屬性可以設(shè)置元素為用戶可調(diào)整大小：{resize: both; overflow: auto;}
Box-Sizing，允許定義元素大小布局
- content-box：調(diào)整大小時(shí)以content內(nèi)容為基準(zhǔn)：{box-sizing: content-box;}
- border-box：調(diào)整大小時(shí)以border范圍為基準(zhǔn)，content內(nèi)容大小自動(dòng)調(diào)整：{box-sizing: border-box;}
輪廓向外偏移（outline-offset）
- 屬性值為向外偏移量：{outline: 1px solid red; outline-offset: 15px;}
appearance
設(shè)置元素標(biāo)準(zhǔn)外觀，屬性值有button，icon，normal，window，field，menu
nac-index，nav-down等
定義四方向?qū)Ш芥I分別向何處導(dǎo)航，以及tab鍵切換順序如
button#b1 {
nav-index: 1;
nav-down: #b2;
}
button#b2 {
nav-index: 2;
nav-up: #b1;
}
