CSS要點記錄

CSS 指層疊樣式表 (Cascading Style Sheets)

多種樣式時的優(yōu)先級問題

數(shù)字越大優(yōu)先級越高

瀏覽器缺省設(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	選擇同時為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	活動的鏈接(鼠標(biāo)點擊時)
:focus	input:focus	獲得焦點的input元素
:first-child	li:first-child	所有作為第一個子元素的li元素

CSS語法

選擇器 {
    屬性:值;
    屬性:值;
}

selector {
    property_1: value1;
    property_2: value2;
}

注意不要在屬性值和單位之間插入空格治唤，如 font-size: 12 px
CSS對大小寫不敏感，但涉及HTML時class和id值對大小寫敏感
CSS屬性具有繼承的特點糙申，如果設(shè)置body字體那么body的子元素將繼承字體的CSS樣式，當(dāng)需要子元素有不同的字體樣式時只需要定義子元素的樣式就好柜裸，對于優(yōu)先級高的樣式會覆蓋優(yōu)先級低的樣式

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)只有一個關(guān)鍵字時另一個關(guān)鍵字默認(rèn)為center，如值設(shè)置為top時等價于top center眶掌，有一點需要注意的是朴爬，百分?jǐn)?shù)值同時應(yīng)用于元素和圖像召噩，也就是說0% 0%表示圖像的左上角位于元素的左上角，100% 100%表示圖像的右下角位于元素的右下角师倔，當(dāng)用像素（長度）表示時疲恢，如10px 20px冈闭，表示圖像的左上角距元素左側(cè)10px萎攒，距元素上部20px：{background-position: 10% 10%;} 或者 {background-position: 10px 10px}
背景關(guān)聯(lián)耍休，可以使背景圖像相對瀏覽器可視區(qū)域固定，屬性值默認(rèn)為scroll喧锦，設(shè)置為fixed可以使背景不隨頁面滾動：{background-attachment: fixed;}
將所有背景屬性寫在一個聲明中：{background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;}

文本

文本縮進(jìn)，text-indent，文本縮進(jìn)無法應(yīng)用于行內(nèi)元素和圖像等，同時文本縮進(jìn)具有繼承性帘皿，文本進(jìn)行負(fù)縮進(jìn)時可以形成懸掛縮進(jìn)奉狈，當(dāng)使用百分比時指縮進(jìn)占父元素寬度百分比：{text-indent: 5em;}
文本對齊跛蛋，text-align理逊，屬性值有l(wèi)eft，right，center，justify，inherit分別對應(yīng)左右中心和兩端對齊翘魄，以及從父元素繼承對齊方式：{text-align: center;}
字（詞）間隔育勺，word-spacing纺非，調(diào)整字與字之間的間隔炕淮，屬性值有正負(fù)值和零：{word-spacing: 0.5em;} 注：CSS 把“字（word）”定義為任何非空白符字符組成的串优妙，并由某種空白字符包圍。這個定義沒有實際的語義，它只是假設(shè)一個文檔包含由一個或多個空白字符包圍的字。支持 CSS 的用戶代理不一定能確定一個給定語言中哪些是合法的字，而哪些不是寒匙。盡管這個定義沒有多大價值，不過它意味著采用象形文字的語言或非羅馬書寫體往往無法指定字間隔。對英文來說word-spacing就是在詞與詞之間的空格
字母間隔，letter-spacing，字母間隔指每個字母之間的空格务甥，取值有正負(fù)和0，{letter-spacing: 0.5em;}
字符轉(zhuǎn)換炊邦，text-transform碘菜，屬性值有none吊骤，lowercase，uppercase拦盹，capitalize，分別對應(yīng)原始大小寫，全部小寫，全部大寫，每個單詞首字母大寫：{text-transform: uppercase;}
文本裝飾拯啦，text-decoration，屬性值有none赛惩，overline，underline勉抓，line-through隐圾，blink符匾，分別對應(yīng)無裝飾焰坪，上劃線，下劃線，中間橫線：{text-decoration: underline;}
空白符處理，white-space辽剧，確定元素內(nèi)處理空白符的方式撞羽，屬性值有normal渡紫，pre唧喉，nowrap干跛，pre-wrap遥赚，pre-line泽腮，inherit碘箍，分別對應(yīng)：忽略多空白符，保留空白符（類似pre標(biāo)簽）职辨，不換行仆邓，保留空白保留換行察署，合并空白保留換行业簿，從父元素繼承屬性值；pre和pre-wrap的區(qū)別在于pre-wrap允許自動換行：{white-space: normal;}
文本方向葱淳，direction毫目，屬性值有l(wèi)tr，rtl，inherit漓摩，分別對應(yīng)從左往右的文本啃炸，從右往左的文本肿嘲，繼承父元素屬性值，注：對于行內(nèi)元素耸采，只有當(dāng) unicode-bidi 屬性設(shè)置為 embed 或 bidi-override 時才會應(yīng)用 direction 屬性：{direction: rtl;}
行間距搓彻，line-height旭贬，屬性值可以為百分比稀轨，像素，數(shù)值：{line-height: 1.5;}

字體

CSS字體系列：
字體系列是對多種變形字體的一個集合佣谐，在CSS中定義了幾個通用字體系列狭魂，它們規(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)中沒有首選字體時可以使用候選字體摘刑，當(dāng)系統(tǒng)中所有字體都無法匹配時會選擇一種可用的serif字體舞终，當(dāng)字體名中含有空格或者#或$時才需要在字體名稱外加引號

p {font-family: Georgia, Times, 'New York', sans-serif;}

CSS字體風(fēng)格（font-style）
字體風(fēng)格的屬性值有三種，normal隘擎，italic歼指，oblique孟害，分別對應(yīng)文本正常顯示丁侄，文本斜體顯示，文本傾斜顯示

italic和oblique的區(qū)別：
italic是文本自身擁有的斜體字形掏秩，而oblique是將正常的文本傾斜顯示摧莽，對于沒有傾斜屬性的字體要用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è)置一個比繼承值更粗的字體纵菌，lighter則相反笛辟，數(shù)值400等價于normal手幢，700等價與bold
字體大小使用font-size設(shè)置弯菊，屬性值可以是絕對大小（px）软舌，也可以是相對大小（em）超营，瀏覽器中默認(rèn)的字體大小為16px時演闭，1em=16px米碰，em=npx/16px，則2em=32px

鏈接

鏈接樣式的四個屬性L：link瘪板，visited锣枝，hover惊橱，active
注意：
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后

列表

列表的主要樣式是列表項的標(biāo)志税朴，即列表項前的圖形樣式泡一，改變列表項的樣式鼻忠，可以用（list-style-type）

列表項圖形帖蔓，屬性值有square，circle埋酬，decimal写妥，upper-roman珍特，lower-alpha等：{list-style-type: square}
列表項圖像，屬性值為圖像的url：{list-style-type: url(image.gif);}

列表項位置可以配置列表項在內(nèi)容以內(nèi)或者內(nèi)容以外砸琅，通過list-style-position

將列表項放在內(nèi)容以內(nèi)：{list-style-position: inside;}
放在內(nèi)容以外：{list-style-position: outside;}

簡寫的列表樣式症脂，將列表的所有屬性寫到list-style中

如：{list-style: url(image.gif) square inside;}

表格

CSS給表格提供了許多樣式屬性壶唤，包括邊框闸盔，寬度高度，文本對齊等

表格邊框：為表格標(biāo)題和要素加邊框 table, th, td {border: 1px solid blue;}
以上的表格邊框會顯示兩層邊框击费，因為表格跟內(nèi)部元素都具有邊框蔫巩，要顯示單線邊框可以設(shè)置border-collapse屬性：{border-collapse: collapse;}
表格寬高：使用width和height屬性：table {width: 100%;} th {height: 50px;}
表格中的文本對齊
文本水平對齊：{text-align: center;}
文本垂直對齊：{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時，表格水平布局僅取決于表格寬度精绎、列寬度、表格邊框?qū)挾雀橄拧卧耖g距堕仔，而與單元格的內(nèi)容無關(guān)摩骨，當(dāng)使用automatic時，表格的列寬度有表格中沒有折行的最寬內(nèi)容決定灾馒，一般fixed模式運算快睬罗，而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：將屬性值寫在一個聲明中：{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)是透明的病曾，因此不會遮擋后面的元素

當(dāng)不設(shè)置內(nèi)邊距和外邊距時，它們將由用戶代理設(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青扔，如下

Box Model Exmaple

注：外邊距可以為負(fù)谈息，邊距可以同時設(shè)置四邊邊距也可以單獨設(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ū)域，可以接受長度值和百分比屏积，同時可以接受負(fù)值和auto

margin的設(shè)置與padding相似：{margin: 0.5em 1em 0.5em 1em;}
同時可以采用值復(fù)制的方法復(fù)制：{margin: 0.5em 1em;} 這與上面的效果是一樣的
CSS定義了一些方法可以使的不用為每個方向的外邊距賦值，它的規(guī)則如下：
如果缺少左外邊距的值渣聚，則使用右外邊距的值奕枝。
如果缺少下外邊距的值症歇，則使用上外邊距的值。
如果缺少右外邊距的值德频，則使用上外邊距的值。
這樣做有一些情況也無法省略賦值钞护，如把右下邊距設(shè)置為30px，把左上邊距設(shè)置為20px：｛margin: 20px 30px 30px 20px｝或者把左邊距設(shè)置為20px距辆，其他auto：{margin: auto auto auto 20px;}
當(dāng)然以上的第二種情況也可以用單獨設(shè)置的外邊距解決：{margin-left: 20px;}

外邊距的合并問題

普通文檔流中塊框的垂直外邊距會發(fā)生外邊距合并
當(dāng)一個元素位于另一個元素上方時余佃，這個元素的下邊距會和下方元素的上邊距合并，邊距的大小會變成他們之中大的那個
當(dāng)一個元素位于另一個元素內(nèi)時跨算，元素的上下外邊框也會合并
沒有邊框和內(nèi)容的元素自身的上下邊距也會合并

它們的合并看起來會像這樣

margin_collapsing_example_1

margin_collapsing_example_2

margin_collapsing_example_3

margin_collapsing_example_4

CSS定位屬性

HTML頁面內(nèi)的元素都可以用框來表示爆土，像div，h诸蚕，p等作為“塊框”，而span，strong等作為“行內(nèi)框”

display屬性可以改變元素框的類型，如display: block可以使a之類的行內(nèi)元素變得像塊狀元素一樣

在某些情況下，不顯示定義也會創(chuàng)建塊級元素，如在塊級元素的開頭直接寫入文本

<div>
in the div
<p>in the paragraph</p>
</div>

CSS定位機(jī)制

CSS有三種基本定位機(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)元素會創(chuàng)建行框置于父元素中
relative：相對定位，元素保持原有形狀不改變，相對原有位置進(jìn)行移動，原有位置保留，實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置赖草，{position: relative; left: 20px;} 表示在元素左側(cè)添加20像素侵歇，即相對原位置向右移動20px
absolute：絕對定位，元素從文檔流中完全刪除侄榴，原位置關(guān)閉，在相對與除static定位外第一個包含元素定位咧最，包含塊可能是元素或者初始包含塊栽惶，元素定位后生成一個塊級框而不論其原來的框類型
fixed：相對與瀏覽器窗口進(jìn)行絕對定位

內(nèi)容溢出滾動條

元素滾動條次泽，當(dāng)元素內(nèi)容溢出時允許用戶代理使用滾動機(jī)制

overflow屬性：屬性值可以為auto捐寥，hidden，visible（默認(rèn)）壳炎，scroll：{overflow: scroll;}
auto：瀏覽器自動判斷如何處理溢出內(nèi)容
hidden：對溢出內(nèi)容進(jìn)行修剪
visible：默認(rèn)值稼病，不對溢出內(nèi)容進(jìn)行修建拆檬，會顯示在元素外
scroll：對元素溢出內(nèi)容進(jìn)行修剪持际，并提供滾動機(jī)制

文本中圖像的垂直排列

對圖像元素使用vertical-align屬性

text-top：文字相對于圖像在上方殿衰，文字頂端與圖片頂端平行：{vertical-align: text-top;}
text-bottom：文字相對于圖像在下方悟衩，文字底端與圖片底端平行：{vertical-align: text-bottom;}

z方向堆疊順序

修改元素的上下關(guān)系使用z-index屬性

z-index默認(rèn)值為0来氧，數(shù)字越高優(yōu)先級越高：{z-index: -1;}

CSS元素浮動

float屬性

通過float屬性可以使元素脫離文檔流而向上浮動

left：當(dāng)設(shè)置向左浮動時，元素從上方元素開始按順序向上浮動鸟蜡，到頂部后向左浮動直到碰到框的左邊緣：{float: left;}
right：當(dāng)設(shè)置向右浮動時狂丝，元素從上方元素開始按順序向上浮動具壮，到頂部后向右浮動直到碰到框的左邊緣：{float: right;}
注：當(dāng)框在一行中不夠容納浮動的元素時元素會依次疊加行，當(dāng)多個浮動的元素高度不同時會發(fā)生卡住的現(xiàn)象俊庇，當(dāng)默認(rèn)情況下行內(nèi)框會圍繞在浮動元素周圍译株，更改這種默認(rèn)樣式要用到下方的clear屬性

clear屬性

通過規(guī)定clear屬性規(guī)定元素哪一邊不允許有浮動元素，屬性值可以為both，left筷频，right，none（默認(rèn)）锯厢，inherit

both：兩側(cè)都不允許有浮動元素斋否，不會圍繞在浮動元素周圍
left：左側(cè)不允許有浮動元素
right：右側(cè)不允許有浮動元素

CSS其它屬性

對齊

對齊塊元素评凝，塊元素會占用一行所有寬度，并在其前后都會換行填硕，如h1，p，div

對齊塊元素有幾種辦法

使用margin進(jìn)行中心對齊：將左右margin設(shè)置為auto可以讓用戶代理自動設(shè)置兩側(cè)邊距對齊：{margin-left: auto; margin-right: auto; width: 50%;}
使用絕對定位進(jìn)行左右對齊：右對齊 {position: absolute; right: 0px;} 左對齊 {position: absolute; left: left;}
使用浮動進(jìn)行左右對齊：左對齊 {float: left;} 右對齊 {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è)置為塊級元素铐料，塊級元素前后換行计盒，且占用一行的所有寬度宇植，可以包含block和inline元素：{display: block;}
將元素設(shè)置為inline-block，inline-block既有inline的同行分布特征唉侄，又有block元素的寬高度特征：{display: inline-block;}
將元素設(shè)置為run-in同眯，此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示：{display: run-in;}
將元素設(shè)置為none目溉，元素占用空間從文檔中關(guān)閉：{display: none;}

鼠標(biāo)指針類型

通過cursor屬性可以設(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用于表格時可以刪除一行或一列肪笋，但刪除后表格的寬或高不會變，布局不變度迂，當(dāng)用于其它元素時顯示為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	用于盲人用點字法觸覺回饋設(shè)備
embossed	用于分頁的盲人用點字法打印機(jī)
handheld	用于小的手持的設(shè)備
print	用于打印機(jī)
projection	用于方案展示藤乙，比如幻燈片
screen	用于電腦顯示器
tty	用于使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端
tv	用于電視機(jī)類型的設(shè)備

CSS3內(nèi)容

CSS3邊框

CSS3中可以為邊框添加圓角惭墓，陰影和圖片坛梁，分別對應(yīng)border-radius，box-shadow和border-image屬性

border-image：屬性值有四邊分割位置腊凶，圖像平鋪方式：div {border-image: url(/image.png) 20 20 20 20 round;} border-image是一個簡寫划咐，它具有幾個具體的屬性
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ù)制风瘦，四個參數(shù)分別為對圖像上右下左的分割線位置队魏，最后得到一個九宮格分別用于填充四角和四邊

border-image-slice

border-image-slice1

border-image-repeat屬性規(guī)定圖像的平鋪方式攻旦，round會湊整填充而進(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%;}意敛，四個邊框角落可以分別設(shè)置馅巷，如
同時設(shè)置四個角落：{border-radius: 25px 25px 25px 25px;}
設(shè)置單個角的圓角：{border-top-right-radius: 2em;} {border-bottom-left-radius: 2em;}

CSS3背景

CSS3中提供了調(diào)整背景尺寸的屬性background-size和調(diào)整背景定位的屬性background-origin

background-size：對背景進(jìn)行拉伸：{background-size: 30% 100%}
background-origin：設(shè)置背景的定位方式，屬性值有content-box草姻，padding-box（默認(rèn)）钓猬，border-box，分別對應(yīng)背景相對于內(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：不換行，超出位置的文本會溢出
normal：只在允許的換行點換行
unrestricted：可以在任意點換行
suppress：壓縮元素中的換行拢锹，只在沒有其它有效換行點的時候換行
與word-wrap的區(qū)別：word-wrap屬性值的可選值為normal谣妻，break-word，分別對應(yīng)僅在斷字點換行面褐，可在單詞內(nèi)部換行
與word-break的區(qū)別：word-break規(guī)定非中日韓文本的換行規(guī)則拌禾，屬性值的可選值為normal，break-all展哭，keep-all，分別對應(yīng)默認(rèn)換行規(guī)則闻蛀，可在單詞內(nèi)換行匪傍，僅在半角空格或連字符處換行

溢出文本處理text-overflow，屬性值為clip觉痛，ellipsis役衡，string

clip：對溢出文本進(jìn)行裁剪：{overflow: hidden; text-overflow: clip;}
ellipsis: 用省略號代替溢出文本：{overflow: hidden; text-overflow: ellipsis;}
string：用給定的字符串代替溢出文本
注：設(shè)置text-overflow要先設(shè)置overflow屬性為hidden

CSS3字體

在CSS3中允許使用自定義的字體而非必須用戶代理上安裝的字體，在使用時按需下載薪棒，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)需要定義粗體字體時

<style>
@font-face
{
    font-family:myFont;
    src: url(font_bold.ttf), url(font1_bold);
    font-weight: bold;
}
</style>

當(dāng)使用時直接使用{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：元素的平移：提供水平移動距離肋层，垂直移動距離：{transform: translate(20px, 20px);}
rotate：元素旋轉(zhuǎn)，提供角度（deg）翎迁，允許負(fù)數(shù)表示逆時針旋轉(zhuǎn)：{transform: rotate(20deg);}
scale：元素的縮放栋猖，提供寬度放大倍數(shù)，高度放大倍數(shù)：{transform: scale(2,4);}
skew：元素兩邊的旋轉(zhuǎn)汪榔，默認(rèn)元素中心位置不改變蒲拉，提供垂直邊的旋轉(zhuǎn)度數(shù)，第一個參數(shù)為垂直邊基于上方頂點逆時針旋轉(zhuǎn)的度數(shù)痴腌，第二個參數(shù)為水平邊基于上方頂點順時針旋轉(zhuǎn)的度數(shù)：{transform: skew(20deg,30deg);}
matrix：可以將所有轉(zhuǎn)換矩陣寫在matrix屬性中雌团，屬性接受6個參數(shù)：{transform: matrix(a,b,c,d,e,f);} 根據(jù)矩陣運算，有如下關(guān)系：x'=ax+cy+e y'=bx+dy+f

matrix
其它的屬性值：scaleX（寬度縮放）士聪，scaleY（高度縮放）锦援，translateX（水平平移），translateY（垂直平移）剥悟，skewX（垂直邊旋轉(zhuǎn)）灵寺，skewY（水平邊旋轉(zhuǎn)）

transform-origin：設(shè)置元素變換相對點位置

CSS3轉(zhuǎn)換（transform 3D）

3D轉(zhuǎn)換有屬性值transform-style控制3D元素顯示方式，屬性值有flat区岗，preserve-3d略板，分別對應(yīng)在平面顯示3d內(nèi)容，保留3d（z軸）空間

perspective：控制3D元素的透視程度慈缔，數(shù)值是元素與視圖的距離叮称，以像素計
perspective-origin控制3D元素基點位置，即3D元素所基于的X軸和Y軸藐鹤，默認(rèn)值為50%瓤檐，50%
backface-visibility：規(guī)定元素背對屏幕時是否可見，屬性值有visible和hidden

過渡效果transition娱节，通過設(shè)置transition屬性可以規(guī)定動畫效果

transition：屬性值為希望應(yīng)用動畫的屬性挠蛉，動畫時長：{transition: width 1s;}
transition-property：希望應(yīng)用動畫的屬性值
transition-duration：過渡動畫時長，單位為秒
transition-delay：動畫延遲開始的時間
transition-timing-function：過渡動畫速度曲線括堤，屬性值有ease碌秸，linear，ease-in悄窃，ease-out讥电，cubic-bezier(n,n,n,n)分別對應(yīng)緩入緩出，線性轧抗，緩入恩敌，緩出，cubiz-bezier函數(shù)（n值在0-1）
簡寫的transition屬性：{transotion: width 1s ease 2s;} 延遲2s

動畫關(guān)鍵幀（keyframes）横媚，通過設(shè)置動畫關(guān)鍵幀可以做到多個動畫的連續(xù)播放

@keyframes纠炮，自定義動畫后使用時需要制定動畫名稱和過渡時長

自定義動畫：

@keyframes mytransition {
    from {background-color: red;}
    to {background-color: blue;}
}
div {
    animation: mytransition 2s;
}

同時也可以通過百分比控制動畫時間

通過百分比自定義動畫播放時間

@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時可選的屬性值有animation: name duration timing-function delay iteration-count direction; 其中各屬性值可分開賦值

animation-duration：動畫過渡間隔
animation-timing-function：過渡動畫時間曲線
animation-delay：動畫執(zhí)行前的延時
animation-iteration-count：動畫循環(huán)次數(shù)月趟，屬性值為n次或infinite
animation-direction：動畫播放的方向，屬性值有normal和alternate恢口，分別對應(yīng)正常播放和輪流反向播放
animation-play-state：動畫播放狀態(tài)孝宗，控制動畫播放和暫停，屬性值有paused和running
animation-fill-mode：在動畫時間以外的樣式耕肩，分別有none因妇，forwards，backwards猿诸，both
none：不改變默認(rèn)行為
forwards：向前填充婚被，即動畫完成后保持最后一個關(guān)鍵幀狀態(tài)
backwords：向后填充，即動畫開始前梳虽，在delay時間內(nèi)應(yīng)用第一個關(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)整大小時以content內(nèi)容為基準(zhǔn)：{box-sizing: content-box;}
border-box：調(diào)整大小時以border范圍為基準(zhǔn)啥繁，content內(nèi)容大小自動調(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;
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末捣辆，一起剝皮案震驚了整個濱河市蔬螟，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌汽畴，老刑警劉巖旧巾，帶你破解...
沈念sama閱讀 219,366評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件耸序，死亡現(xiàn)場離奇詭異鲁猩，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)搅窿，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,521評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來疾棵，“玉大人，你說我怎么就攤上這事殉了。” “怎么了拟枚？”我有些...
開封第一講書人閱讀 165,689評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵薪铜，是天一觀的道長隔箍。經(jīng)常有香客問我脚乡，道長，這世上最難降的妖魔是什么俯艰？我笑而不...
開封第一講書人閱讀 58,925評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任竹握，我火速辦了婚禮辆飘，結(jié)果婚禮上蜈项，老公的妹妹穿的比我還像新娘。我一直安慰自己充边，他們只是感情好，可當(dāng)我...
茶點故事閱讀 67,942評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著肘习，像睡著了一般漂佩。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上养葵，一...
開封第一講書人閱讀 51,727評論 1贊 305
城市分裂傳說
那天关拒，我揣著相機(jī)與錄音庸娱，去河邊找鬼熟尉。笑死，一個胖子當(dāng)著我的面吹牛剧包，可吹牛的內(nèi)容都是我干的玄捕。我是一名探鬼主播棚放，決...
沈念sama閱讀 40,447評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼飘蚯，長吁一口氣：“原來是場噩夢啊……” “哼局骤！你這毒婦竟也來了暴凑？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,349評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤犬辰，失蹤者是張志新（化名）和其女友劉穎幌缝，沒想到半個月后诫欠，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荒叼，經(jīng)...
沈念sama閱讀 45,820評論 1贊 317
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡被廓，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,990評論 3贊 337
?白月光啟示錄
正文我和宋清朗相戀三年伊者，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挖诸。...
茶點故事閱讀 40,127評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡多律，死狀恐怖狼荞，靈堂內(nèi)的尸體忽然破棺而出帮碰，到底是詐尸還是另有隱情殉挽，我是刑警寧澤，帶...
沈念sama閱讀 35,812評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布一死，位于F島的核電站投慈，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏加袋。R本人自食惡果不足惜锁荔，卻給世界環(huán)境...
茶點故事閱讀 41,471評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一阳堕、第九天我趴在偏房一處隱蔽的房頂上張望择克。院中可真熱鬧肚邢，春花似錦、人聲如沸贱纠。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,017評論 0贊 22
一樁弒父案浦夷，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽劈狐。三九已至，卻和暖如春肥缔，著一層夾襖步出監(jiān)牢的瞬間续膳，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,142評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留炮车，地道東北人瘦穆。一個月前我還...
沈念sama閱讀 48,388評論 3贊 373
代替公主和親
正文我出身青樓扛或，卻偏偏與公主長得像，于是被迫代替她去往敵國和親悲伶。傳聞我的和親對象是個殘疾皇子麸锉，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,066評論 2贊 355

CSS要點記錄