CSS層疊樣式表

CSS 指層疊樣式表 (Cascading Style Sheets)
CSS (Cascading Style Sheets) 用于渲染HTML元素標簽的樣式
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊為一
:
如果你要在HTML元素中設置CSS樣式，你需要在元素中設置"id" 和 "class"選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開
:
css樣式三種調用使用方式：
插入樣式表的方法有三種:
外部樣式表(External style sheet)：語法：<link rel="stylesheet" type="text/css" href="mystyle.css">
內部樣式表(Internal style sheet)：在頭部寫樣式
內聯樣式(Inline style)：直接在元素中寫(不推薦)
*全局標記{ }
：
為了避免Internet Explorer 中無法調整文本的問題，使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px，可以換算。
:
css背景樣式：
background-color：背景顏色
background-image：url("圖片")：背景圖片(默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體)
background-repeat：背景平鋪 on-repeat不平鋪 -x橫向平鋪-y垂直平鋪
background-position：背景定位屬性
background-attachment:背景附件屬性 fixed(固定背景屬性)
background：# url（#）有背景有圖片輸入 列子
：
css文本樣式值：
font-size：#px； 文字大小
font-family：字體樣式,如:微軟雅黑
font-style：文字狀態如 斜體等
font-weight：文字粗細
text-align：文本對齊
font-variant ：字體之間的轉變，以小型大寫字體或者正常字體顯示文本。
line-height：行高 上下距離會有變化，也可以用于行與行之間的空間(%)
text-decoration：文本裝飾 underline下劃線 none去除下劃線
text-decoration: overline：上劃線
text-decoration:line-through：刪除線
text-transform: uppercase：英文大寫
text-transform:lowercase：英文小寫
text-transform:capitalize：首字母大寫
text-align：設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊
text-indent：第一行的文本縮進
text-shadow：文本陰影，(1.左右2.上下3.模糊程度4.顏色)
letter-spacing：字符之間的空間
direction：文字方向
word-spacing：增加在字符之間空白的空間
white-space:nowrap:在元素內禁止文字環繞
字體屬性定義字體，加粗，大小，文字樣式。
font-family 屬性設置文本的字體系列。
font-family 屬性應該設置幾個字體名稱作為一種"后備"機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
font-style：這個屬性有三個值：normal(正常)，italic(斜體)，oblique(斜體)
font-size 屬性設置文本的大小。
能否管理文字的大小，在網頁設計中是非常重要的。但是，你不能通過調整字體大小使段落看上去像標題，或者使標題看上去像段落。
請務必使用正確的HTML標簽，就<h2> - <h7>表示標題和<p>表示段落：
字體大小的值可以是絕對或相對的大小。
絕對大小：設置一個指定大小的文本，不允許用戶在所有瀏覽器中改變文本大小
確定了輸出的物理尺寸時絕對大小很有用
相對大小：相對于周圍的元素來設置大小，允許用戶在瀏覽器中改變文字大小
：
css列表樣式：
在HTML中，有兩種類型的列表：
<ul>無序列表 - 列表項標記用特殊圖形（如小黑點、小方框等）
<ol>有序列表 - 列表項的標記有數字或字母
list-style-type：列表符號
list-style-image：圖像符號(可以自定義)
list-style-position：位置符號
list-style:復合屬性(可以多種屬性在一起)
list-style: none：清除默認小黑點
circle圓圈
disc正方形
：
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
margin(外邊距) - 清除邊框外的區域，外邊距是透明的, Margin可以使用負值，重疊的內容。Margin: # auto(自動)居中：放大縮小 #上下自動
border(邊框) - 圍繞在內邊距和內容外的邊框。top上, left左, right右, bottom下，(color顏色, width寬, solid實線，dashed虛線)
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
最終元素的總寬度計算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
border-style：用于設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式，如下所示：
none : 默認無邊框
dotted : 定義一個點線邊框
dashed : 定義一個虛線邊框
solid : 定義實線邊框
double : 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
groove : 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge : 定義3D脊邊框。效果取決于邊框的顏色值
inset : 定義一個3D的嵌入邊框。效果取決于邊框的顏色值
outset : 定義一個3D突出邊框。 效果取決于邊框的顏色值
。。。。。。。。。。。
border-right：分割線
border：用于把針對四個邊的屬性設置在一個聲明。
border-width：用于為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
border-color：設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
border-bottom：用于把下邊框的所有屬性設置到一個聲明中。
border-bottom-color：設置元素的下邊框的顏色。
border-bottom-style：設置元素的下邊框的樣式。
border-bottom-width：設置元素的下邊框的寬度。
border-left：用于把左邊框的所有屬性設置到一個聲明中。
border-left-color：設置元素的左邊框的顏色。
border-left-style：設置元素的左邊框的樣式。
border-left-width：設置元素的左邊框的寬度。
border-right：用于把右邊框的所有屬性設置到一個聲明中。
border-right-color：設置元素的右邊框的顏色。
border-right-style：設置元素的右邊框的樣式。
border-right-width：設置元素的右邊框的寬度。
border-top：用于把上邊框的所有屬性設置到一個聲明中。
border-top-color： 設置元素的上邊框的顏色。
border-top-style：設置元素的上邊框的樣式。
border-top-width：設置元素的上邊框的寬度。
為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick(厚的) 、(中等)medium（默認值） 和 thin(薄的)。
：
CSS 輪廓（outline）
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度
outline：在一個聲明中設置所有的輪廓屬性
outline-color：設置輪廓的顏色
outline-style：設置輪廓的樣式
outline-width：設置輪廓的寬度
：
CSS margin(外邊距)
margin(外邊距)屬性定義元素周圍的空間。
margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的。
margin 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
margin可以使用負值，重疊的內容。
auto ：設置瀏覽器邊距，這樣做的結果會依賴于瀏覽器
length：定義一個固定的margin（使用像素，pt，em等）
% ：定義一個使用百分比的邊距
為了縮短代碼，有可能使用一個屬性中margin指定的所有邊距屬性。這就是所謂的簡寫屬性，所有邊距屬性的簡寫屬性是 margin :
margin：屬性可以有一到四個值：(邊距是順時針旋轉：上右下左)
margin：在一個聲明中設置所有外邊距屬性。
margin-bottom：設置元素的下外邊距。
margin-left：設置元素的左外邊距。
margin-right：設置元素的右外邊距。
margin-top：設置元素的上外邊距。
：
CSS padding（填充）
length：定義一個固定的填充(像素, pt, em,等)
%：使用百分比值定義一個填充
http:/ /www.i is7.co m/a/l m/y czm ljgj/
padding（填充）是一個簡寫屬性，定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
單獨使用 padding 屬性可以改變上下左右的填充。
為了縮短代碼，它可以在一個屬性中指定的所有填充屬性，這就是所謂的簡寫屬性。所有的填充屬性的簡寫屬性是 padding :
padding：屬性可以有一到四個值：(邊距是順時針旋轉：上右下左)
padding：使用簡寫屬性設置在一個聲明中的所有填充屬性
padding-bottom：設置元素的底部填充
padding-left：設置元素的左部填充
padding-right：設置元素的右部填充
padding-top：設置元素的頂部填充
:
CSS 尺寸 (Dimension)
尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。
height：設置元素的高度。
width 設置元素的寬度。
line-height：設置行高。
max-height：設置元素的最大高度。
max-width：設置元素的最大寬度。
min-height：設置元素的最小高度。
min-width：設置元素的最小寬度。
：
CSS Display(顯示) 與 Visibility（可見性）
display：屬性設置一個元素應如何顯示。
visibility：屬性指定一個元素應可見還是隱藏。
隱藏元素 - display:none 或 - visibility:hidden
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了但仍然會影響布局。
display(不占空間)：隱藏。none不顯示 block顯示
visibility(占空間)：隱藏。 hidden不顯示 visitle顯示
display:inline：可以把塊級元素變成內聯元素
display:block：可以把內聯元素變成塊級元素，不允許有它內部的嵌套塊元素。
塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;
塊級元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h2 , h3 , h4 , h5 , h6 , h7 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
內聯元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可變元素(根據上下文關系確定該元素是塊元素還是內聯元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級、內聯元素的應用：利用CSS我們可以擺脫上面表格里HTML標簽歸類的限制，自由地在不同標簽/元素上應用我們需要的屬性。
主要用的CSS樣式有以下三個：
display:block -- 顯示為塊級元素
display:inline -- 顯示為內聯元素
display:inline-block -- 顯示為內聯塊元素，表現為同行顯示并可修改寬高內外邊距等屬性
我們常將<ul>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。
:
CSS Position(定位)
position 屬性指定了元素的定位類型。
position 屬性的五個值：
static：默認值，沒有定位，元素出現在正常的流中，靜態定位的元素不會受到 top, bottom, left, right影響。
absolute：絕對定位，相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>，元素和其他元素重疊。
relative：相對定位，相對其正常位置，(相對靈活，按元素自己的位置)
fixed：固定定位，即使窗口是滾動的它也不會移動
sticky：可以把它稱之為粘性定位，依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換
元素可以使用的頂部，底部，左側和右側屬性定位。然而，這些屬性無法工作，除非是先設定position屬性。他們也有不同的工作方式，這取決于定位方法
z-index：指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面），一個元素可以有正數或負數的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
clip:rect：裁剪元素，先有定位
overflow:scroll：內容溢出時，顯示隱藏內容
overflow:hidden：內容溢出時，隱藏
overflow:auto：自動處理溢出內容
overflow-x：指定如何處理右邊/左邊邊緣的內容溢出元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
overflow-y：指定如何處理頂部/底部邊緣的內容溢出元素的內容區域。值：auto，hidden，scroll，visible，no-display，no-content
:
CSS float(浮動)
浮動，可以讓行內和塊變成行內塊
浮動，會使元素向左或向右移動，其周圍的元素也會重新排列。
浮動，往往是用于圖像，但它在布局時一樣非常有用
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環繞在它左邊
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰
1.<div style="clear:both;"></div>浮動清除
2.overflow：hiddc，auto
：
光標懸停時，外形變化
cursor:move：四方拉伸
cursor:e-resize：左右拉伸
cursor:w-resize：左右拉伸
cursor:n-resize：上下拉伸
cursor:s-resize：上下拉伸
cursor:ne-resize：右上角+左下角
cursor:sw-resize：右上角+左下角
cursor:nw-resize：左上角+右下角
cursor:se-resize：左上角+右下角
cursor:auto：文本
cursor:text：文本
cursor:default：原形
cursor:help：原形+問號
cursor:pointer：手指
cursor:progress：原形+加載
cursor:wait：加載
cursor:crosshair：十字
：
CSS 偽類(Pseudo-classes)：
光標經過顯示狀態：
a:link：未訪問過的鏈接
a:hover：當用戶鼠標懸停在鏈接上時
a:visited：用戶已訪問過的鏈接
a:active：鏈接被點擊的那一刻
a:focus：選擇元素輸入后具有焦點
所有CSS偽類/元素：
:checked input:checked：選擇所有選中的表單元素
:disabled input:disabled：選擇所有禁用的表單元素
:empty p:empty：選擇所有沒有子元素的p元素
:enabled input:enabled：選擇所有啟用的表單元素
:first-of-type p:first-of-type：選擇每個父元素是p元素的第一個p子元素
:in-range input:in-range：選擇元素指定范圍內的值
:invalid input:invalid：選擇所有無效的元素
:last-child p:last-child：選擇所有p元素的最后一個子元素
:last-of-type p:last-of-type：選擇每個p元素是其母元素的最后一個p元素
:not(selector) :not(p)：選擇所有p以外的元素
:nth-child(n) p:nth-child(2)：選擇所有p元素的第二個子元素
:nth-last-child(n) p:nth-last-child(2)：選擇所有p元素倒數的第二個子元素
:nth-last-of-type(n) p:nth-last-of-type(2)：選擇所有p元素倒數的第二個為p的子元素
:nth-of-type(n) p:nth-of-type(2)：選擇所有p元素第二個為p的子元素
:only-of-type p:only-of-type ：選擇所有僅有一個子元素為p的元素
:only-child p:only-child：選擇所有僅有一個子元素的p元素
:optional input:optional：選擇沒有"required"的元素屬性
:out-of-range input:out-of-range：選擇指定范圍以外的值的元素屬性
:read-only input:read-only：選擇只讀屬性的元素屬性
:read-write input:read-write：選擇沒有只讀屬性的元素屬性
:required input:required ：選擇有"required"屬性指定的元素屬性
:root root ：選擇文檔的根元素
:target #news:target：選擇當前活動#news元素(點擊URL包含錨的名字)
:valid input:valid：選擇所有有效值的屬性
:focus input:focus：選擇元素輸入后具有焦點
:first-letter p:first-letter：選擇每個<p> 元素的第一個字母
:first-line p:first-line：選擇每個<p> 元素的第一行
:first-child p:first-child：選擇器匹配屬于任意元素的第一個子元素的 <p> 元素
:before p:before：在每個<p>元素之前插入內容
:after p:after：在每個<p>元素之后插入內容
:lang(language) p:lang(it)：為<p>元素的lang屬性選擇一個開始值
：
CSS 偽元素
"first-line" 偽元素用于向文本的首行設置特殊樣式
"first-line" 偽元素只能用于塊級元素。
注意： 下面的屬性可應用于 "first-line" 偽元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 偽元素
"first-letter" 偽元素用于向文本的首字母設置特殊樣式：
注意： "first-letter" 偽元素只能用于塊級元素。
注意： 下面的屬性可應用于 "first-letter" 偽元素：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
:before：偽元素可以在元素的內容前面插入新內容。
:after：偽元素可以在元素的內容之后插入新內容。
：
CSS 布局 - 水平 & 垂直對齊
要水平居中對齊一個元素(如 <div>), 可以使用 margin: auto;。
設置到元素的寬度將防止它溢出到容器的邊緣。
元素通過指定寬度，并將兩邊的空外邊距平均分配
要讓圖片居中對齊, 可以使用 margin: auto; 并將它放到 塊 元素中。
除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來設置垂直居中。
讓圖片自動居中先把它變成塊級元素。
：
CSS 組合選擇符
在 CSS3 中包含了四種組合方式:
1.后代選擇器(以空格分隔)
2.子元素選擇器(以大于號分隔）
3.相鄰兄弟選擇器（以加號分隔）
4.普通兄弟選擇器（以破折號分隔）
：
CSS 導航欄
作為標準的HTML基礎一個導航欄是必須的。
在我們的例子中我們將建立一個標準的HTML列表導航欄。
導航條基本上是一個鏈接列表，所以使用 <ul> 和 <li>元素非常有意義
有兩種方法創建橫向導航欄。使用內聯(inline)或浮動(float)的列表項。
這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動的方法。
display:block - 顯示塊元素的鏈接，讓整體變為可點擊鏈接區域（不只是文本），它允許我們指定寬度
：
CSS 下拉菜單
使用 CSS 創建一個鼠標移動上去后顯示下拉菜單的效果
設置好樣式和位置關系。
：
CSS 提示工具(Tooltip)
提示工具在鼠標移動到指定元素后觸發
::after：偽元素，可以創建一個三角形用于"提示工具"
content:""：必不可少的
transparent (一個是漏斗形)
transparent (兩個三角形)
transparent (三個也是三角形)
一個排在顏色前面，三角形方向，向左
兩個排在顏色前面，三角形方向，向上
三個排在顏色后面，三角形方向，向下
三個排在顏色前面，三角形方向，向右
transition 屬性及 opacity 屬性來實現淡入效果
寫入淡入效果，效果更好
：
CSS 圖片廊
:
CSS 圖像透明/不透明
使用CSS很容易創建透明的圖像。
CSS Opacity屬性是W3C的CSS3建議的一部分
CSS3中屬性的透明度是 opacity。
Opacity屬性值從0.0 - 1.0。值越小，使得元素更加透明。
opacity 屬性通常與 :hover 選擇器一起使用
：
CSS 圖像拼合技術
圖像拼合就是單個圖像的集合。
有許多圖像的網頁可能需要很長的時間來加載和生成多個服務器的請求。
使用圖像拼合會降低服務器的請求數量，并節省帶寬
創建一個導航列表：
background:url("圖片")
位置設置相對定位，讓里面的絕對定位
margin和padding設置為0
所有圖像的高度統一，具體分布樣式
懸停效果：
:hover 選擇器用于鼠標懸停在元素上的顯示的效果
:hover 選擇器可以運用于所有元素。
：
CSS 媒體類型
媒體類型允許你指定文件將如何在不同媒體呈現。該文件可以以不同的方式顯示在屏幕上，在紙張上，或聽覺瀏覽器等等
@media 規則
@media 規則允許在相同樣式表為不同媒體設置不同的樣式。
：
CSS3 @keyframes 規則使用@keyframes規則，你可以創建動畫。
br/>使用@keyframes規則，你可以創建動畫。
在動畫過程中，您可以更改CSS樣式的設定多次。
指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。
0％是開頭動畫，100％是當動畫完成。
為了獲得最佳的瀏覽器支持，您應該始終定義為0％和100％的選擇器。
注意: 使用animation屬性來控制動畫的外觀，還使用選擇器綁定動畫
：
CSS 上下左右四個方向箭頭(^v<>)
<p>和<i>來做
實線
用邊框寬度：(1.形狀 2.厚度 3.厚度 4.形狀)
display: inline-block
內邊距：Padding：#
上：transform: rotate(-135deg)
下：transform: rotate(45deg)
左：transform: rotate(135deg)
右：transform: rotate(-45deg)
：
翻頁符：
左雙箭頭(<<)：?。
左單箭頭(<)：?。?
右雙箭頭(>>)：?。
右單箭頭(>)：?。?
：
用邊框畫圓，先確定高和寬。在寫其他樣式
：
長度單位
em：一般瀏覽器字體大小默認為16px，則2em == 32px
rem：根據元素（html）的 font-size
ex：依賴于英文子母小 x 的高度
ch：數字 0 的寬度
vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%
vh：viewpoint height，視窗高度，1vh=視窗高度的1%
vmin：vw和vh中較小的那個
vmax：vw和vh中較大的那個
%：百分比
px：像素 (1px = 1/96th of 1in)
cm：厘米
mm：毫米
in：英寸 (1in = 96px = 2.54cm)
pt：point，大約1/72英寸； (1pt = 1/72in)
pc：pica，大約6pt，1/6英寸； (1pc = 12 pt)

后加內容：
position:absolute與float:left，兩者有兩大共性：包裹性，破壞性。
包裹性
包裹性換種說法就是讓元素inline-block化，例如一個div標簽默認寬度是100%顯示的，但是一旦被absolute屬性纏上，則100%默認寬度就會變成自適應內部元素的寬度。
float也是典型的inline-block化元素，這種元素的inline-block化適用于任何水平的標簽。例如平時我們要讓span標簽支持width屬性，可能要設置。想重構高質量的頁面，少用絕對定位布局！