CSS 指層疊樣式表 (Cascading Style Sheets)
CSS (Cascading Style Sheets) 用于渲染HTML元素標(biāo)簽的樣式
樣式定義如何顯示 HTML 元素
樣式通常存儲(chǔ)在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲(chǔ)在 CSS 文件中
多個(gè)樣式定義可層疊為一
:
如果你要在HTML元素中設(shè)置CSS樣式，你需要在元素中設(shè)置"id" 和 "class"選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來(lái)設(shè)置id選擇器,CSS 中 id 選擇器以 "#" 來(lái)定義
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個(gè)元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個(gè)點(diǎn)"."號(hào)顯示：
類名的第一個(gè)字符不能使用數(shù)字！它無(wú)法在 Mozilla 或 Firefox 中起作用
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個(gè)屬性和一個(gè)值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)
:
css樣式三種調(diào)用使用方式：
插入樣式表的方法有三種:
外部樣式表(External style sheet)：語(yǔ)法：
內(nèi)部樣式表(Internal style sheet)：在頭部寫樣式
內(nèi)聯(lián)樣式(Inline style)：直接在元素中寫(不推薦)
*全局標(biāo)記{ }
：
為了避免Internet Explorer 中無(wú)法調(diào)整文本的問(wèn)題，使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當(dāng)前字體大小相等。在瀏覽器中默認(rèn)的文字大小是16px。
因此，1em的默認(rèn)大小是16px，可以換算。
:
css背景樣式：
background-color：背景顏色
background-image：url("圖片")：背景圖片(默認(rèn)情況下，背景圖像進(jìn)行平鋪重復(fù)顯示，以覆蓋整個(gè)元素實(shí)體)
background-repeat：背景平鋪 on-repeat不平鋪 -x橫向平鋪-y垂直平鋪
background-position：背景定位屬性
background-attachment:背景附件屬性 fixed(固定背景屬性)
background：# url（#）有背景有圖片輸入 列子
：
css文本樣式值：
font-size：#px； 文字大小
font-family：字體樣式,如:微軟雅黑
font-style：文字狀態(tài)如 斜體等
font-weight：文字粗細(xì)
text-align：文本對(duì)齊
font-variant ：字體之間的轉(zhuǎn)變，以小型大寫字體或者正常字體顯示文本。
line-height：行高 上下距離會(huì)有變化，也可以用于行與行之間的空間(%)
text-decoration：文本裝飾 underline下劃線 none去除下劃線
text-decoration: overline：上劃線
text-decoration:line-through：刪除線
text-transform: uppercase：英文大寫
text-transform:lowercase：英文小寫
text-transform:capitalize：首字母大寫
text-align：設(shè)置為"justify"，每一行被展開(kāi)為寬度相等，左，右外邊距是對(duì)齊
text-indent：第一行的文本縮進(jìn)
text-shadow：文本陰影，(1.左右2.上下3.模糊程度4.顏色)
letter-spacing：字符之間的空間
direction：文字方向
word-spacing：增加在字符之間空白的空間
white-space:nowrap:在元素內(nèi)禁止文字環(huán)繞
字體屬性定義字體，加粗，大小，文字樣式。
font-family 屬性設(shè)置文本的字體系列。
font-family 屬性應(yīng)該設(shè)置幾個(gè)字體名稱作為一種"后備"機(jī)制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
font-style：這個(gè)屬性有三個(gè)值：normal(正常)，italic(斜體)，oblique(斜體)
font-size 屬性設(shè)置文本的大小。
能否管理文字的大小，在網(wǎng)頁(yè)設(shè)計(jì)中是非常重要的。但是，你不能通過(guò)調(diào)整字體大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。
請(qǐng)務(wù)必使用正確的HTML標(biāo)簽，就

- 表示標(biāo)題和

表示段落：
字體大小的值可以是絕對(duì)或相對(duì)的大小。
絕對(duì)大?。涸O(shè)置一個(gè)指定大小的文本，不允許用戶在所有瀏覽器中改變文本大小
確定了輸出的物理尺寸時(shí)絕對(duì)大小很有用
相對(duì)大?。合鄬?duì)于周圍的元素來(lái)設(shè)置大小，允許用戶在瀏覽器中改變文字大小
：
css列表樣式：
在HTML中，有兩種類型的列表：

無(wú)序列表 - 列表項(xiàng)標(biāo)記用特殊圖形（如小黑點(diǎn)、小方框等）

有序列表 - 列表項(xiàng)的標(biāo)記有數(shù)字或字母
list-style-type：列表符號(hào)
list-style-image：圖像符號(hào)(可以自定義)
list-style-position：位置符號(hào)
list-style:復(fù)合屬性(可以多種屬性在一起)
list-style: none：清除默認(rèn)小黑點(diǎn)
circle圓圈
disc正方形
：
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語(yǔ)是用來(lái)設(shè)計(jì)和布局時(shí)使用。
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。
margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的, Margin可以使用負(fù)值，重疊的內(nèi)容。Margin: # auto(自動(dòng))居中：放大縮小 #上下自動(dòng)
border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。top上, left左, right右, bottom下，(color顏色, width寬, solid實(shí)線，dashed虛線)
padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。
最終元素的總寬度計(jì)算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計(jì)算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
border-style：用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式，如下所示：
none : 默認(rèn)無(wú)邊框
dotted : 定義一個(gè)點(diǎn)線邊框
dashed : 定義一個(gè)虛線邊框
solid : 定義實(shí)線邊框
double : 定義兩個(gè)邊框。 兩個(gè)邊框的寬度和 border-width 的值相同
groove : 定義3D溝槽邊框。效果取決于邊框的顏色值
ridge : 定義3D脊邊框。效果取決于邊框的顏色值
inset : 定義一個(gè)3D的嵌入邊框。效果取決于邊框的顏色值
outset : 定義一個(gè)3D突出邊框。 效果取決于邊框的顏色值
。。。。。。。。。。。
border-right：分割線
border：用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。
border-width：用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。
border-color：設(shè)置元素的所有邊框中可見(jiàn)部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。
border-bottom：用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-bottom-color：設(shè)置元素的下邊框的顏色。
border-bottom-style：設(shè)置元素的下邊框的樣式。
border-bottom-width：設(shè)置元素的下邊框的寬度。
border-left：用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-left-color：設(shè)置元素的左邊框的顏色。
border-left-style：設(shè)置元素的左邊框的樣式。
border-left-width：設(shè)置元素的左邊框的寬度。
border-right：用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-right-color：設(shè)置元素的右邊框的顏色。
border-right-style：設(shè)置元素的右邊框的樣式。
border-right-width：設(shè)置元素的右邊框的寬度。
border-top：用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。
border-top-color： 設(shè)置元素的上邊框的顏色。
border-top-style：設(shè)置元素的上邊框的樣式。
border-top-width：設(shè)置元素的上邊框的寬度。
為邊框指定寬度有兩種方法：可以指定長(zhǎng)度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個(gè)關(guān)鍵字之一，它們分別是 thick(厚的) 、(中等)medium（默認(rèn)值） 和 thin(薄的)。
：
CSS 輪廓（outline）
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。
輪廓（outline）屬性指定元素輪廓的樣式、顏色和寬度
outline：在一個(gè)聲明中設(shè)置所有的輪廓屬性
outline-color：設(shè)置輪廓的顏色
outline-style：設(shè)置輪廓的樣式
outline-width：設(shè)置輪廓的寬度
：
CSS margin(外邊距)
margin(外邊距)屬性定義元素周圍的空間。
margin 清除周圍的（外邊框）元素區(qū)域。margin 沒(méi)有背景顏色，是完全透明的。
margin 可以單獨(dú)改變?cè)氐纳希?，左，右邊距，也可以一次改變所有的屬性?br/>margin可以使用負(fù)值，重疊的內(nèi)容。
auto ：設(shè)置瀏覽器邊距，這樣做的結(jié)果會(huì)依賴于瀏覽器
length：定義一個(gè)固定的margin（使用像素，pt，em等）
% ：定義一個(gè)使用百分比的邊距
為了縮短代碼，有可能使用一個(gè)屬性中margin指定的所有邊距屬性。這就是所謂的簡(jiǎn)寫屬性，所有邊距屬性的簡(jiǎn)寫屬性是 margin :
margin：屬性可以有一到四個(gè)值：(邊距是順時(shí)針旋轉(zhuǎn)：上右下左)
margin：在一個(gè)聲明中設(shè)置所有外邊距屬性。
margin-bottom：設(shè)置元素的下外邊距。
margin-left：設(shè)置元素的左外邊距。
margin-right：設(shè)置元素的右外邊距。
margin-top：設(shè)置元素的上外邊距。
：
CSS padding（填充）
length：定義一個(gè)固定的填充(像素, pt, em,等)
%：使用百分比值定義一個(gè)填充
http:/ /www.i is7.co m/a/l m/y czm ljgj/
padding（填充）是一個(gè)簡(jiǎn)寫屬性，定義元素邊框與元素內(nèi)容之間的空間，即上下左右的內(nèi)邊距。
當(dāng)元素的 padding（填充）內(nèi)邊距被清除時(shí)，所釋放的區(qū)域?qū)?huì)受到元素背景顏色的填充。
單獨(dú)使用 padding 屬性可以改變上下左右的填充。
為了縮短代碼，它可以在一個(gè)屬性中指定的所有填充屬性，這就是所謂的簡(jiǎn)寫屬性。所有的填充屬性的簡(jiǎn)寫屬性是 padding :
padding：屬性可以有一到四個(gè)值：(邊距是順時(shí)針旋轉(zhuǎn)：上右下左)
padding：使用簡(jiǎn)寫屬性設(shè)置在一個(gè)聲明中的所有填充屬性
padding-bottom：設(shè)置元素的底部填充
padding-left：設(shè)置元素的左部填充
padding-right：設(shè)置元素的右部填充
padding-top：設(shè)置元素的頂部填充
:
CSS 尺寸 (Dimension)
尺寸 (Dimension) 屬性允許你控制元素的高度和寬度。同樣，它允許你增加行間距。
height：設(shè)置元素的高度。
width 設(shè)置元素的寬度。
line-height：設(shè)置行高。
max-height：設(shè)置元素的大高度。
max-width：設(shè)置元素的大寬度。
min-height：設(shè)置元素的最小高度。
min-width：設(shè)置元素的最小寬度。
：
CSS Display(顯示) 與 Visibility（可見(jiàn)性）
display：屬性設(shè)置一個(gè)元素應(yīng)如何顯示。
visibility：屬性指定一個(gè)元素應(yīng)可見(jiàn)還是隱藏。
隱藏元素 - display:none 或 - visibility:hidden
隱藏一個(gè)元素可以通過(guò)把display屬性設(shè)置為"none"，或把visibility屬性設(shè)置為"hidden"。
display:none可以隱藏某個(gè)元素，且隱藏的元素不會(huì)占用任何空間。也就是說(shuō)，該元素不但被隱藏了，而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失。
visibility:hidden可以隱藏某個(gè)元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說(shuō)，該元素雖然被隱藏了但仍然會(huì)影響布局。
display(不占空間)：隱藏。none不顯示 block顯示
visibility(占空間)：隱藏。 hidden不顯示 visitle顯示
display:inline：可以把塊級(jí)元素變成內(nèi)聯(lián)元素
display:block：可以把內(nèi)聯(lián)元素變成塊級(jí)元素，不允許有它內(nèi)部的嵌套塊元素。
塊級(jí)元素(block)特性：
總是獨(dú)占一行，表現(xiàn)為另起一行開(kāi)始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：
和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;
塊級(jí)元素主要有：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
內(nèi)聯(lián)元素主要有：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
可變?cè)?根據(jù)上下文關(guān)系確定該元素是塊元素還是內(nèi)聯(lián)元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中塊級(jí)、內(nèi)聯(lián)元素的應(yīng)用：利用CSS我們可以擺脫上面表格里HTML標(biāo)簽歸類的限制，自由地在不同標(biāo)簽/元素上應(yīng)用我們需要的屬性。
主要用的CSS樣式有以下三個(gè)：
display:block -- 顯示為塊級(jí)元素
display:inline -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將
元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。
:
CSS Position(定位)
position 屬性指定了元素的定位類型。
position 屬性的五個(gè)值：
static：默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的流中，靜態(tài)定位的元素不會(huì)受到 top, bottom, left, right影響。
absolute：絕對(duì)定位，相對(duì)于最近的已定位父元素，如果元素沒(méi)有已定位的父元素，那么它的位置相對(duì)于，元素和其他元素重疊。
relative：相對(duì)定位，相對(duì)其正常位置，(相對(duì)靈活，按元素自己的位置)
fixed：固定定位，即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)
sticky：可以把它稱之為粘性定位，依賴于用戶的滾動(dòng)，在 position:relative 與 position:fixed 定位之間切換
元素可以使用的頂部，底部，左側(cè)和右側(cè)屬性定位。然而，這些屬性無(wú)法工作，除非是先設(shè)定position屬性。他們也有不同的工作方式，這取決于定位方法
z-index：指定了一個(gè)元素的堆疊順序（哪個(gè)元素應(yīng)該放在前面，或后面），一個(gè)元素可以有正數(shù)或負(fù)數(shù)的堆疊順序，具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
clip:rect：裁剪元素，先有定位
overflow:scroll：內(nèi)容溢出時(shí)，顯示隱藏內(nèi)容
overflow:hidden：內(nèi)容溢出時(shí)，隱藏
overflow:auto：自動(dòng)處理溢出內(nèi)容
overflow-x：指定如何處理右邊/左邊邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域。值：auto，hidden，scroll，visible，no-display，no-content
overflow-y：指定如何處理頂部/底部邊緣的內(nèi)容溢出元素的內(nèi)容區(qū)域。值：auto，hidden，scroll，visible，no-display，no-content
:
CSS float(浮動(dòng))
浮動(dòng)，可以讓行內(nèi)和塊變成行內(nèi)塊
浮動(dòng)，會(huì)使元素向左或向右移動(dòng)，其周圍的元素也會(huì)重新排列。
浮動(dòng)，往往是用于圖像，但它在布局時(shí)一樣非常有用
元素的水平方向浮動(dòng)，意味著元素只能左右移動(dòng)而不能上下移動(dòng)。
一個(gè)浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?br/>浮動(dòng)元素之后的元素將圍繞它。
浮動(dòng)元素之前的元素將不會(huì)受到影響。
如果圖像是右浮動(dòng)，下面的文本流將環(huán)繞在它左邊
如果你把幾個(gè)浮動(dòng)的元素放到一起，如果有空間的話，它們將彼此相鄰
1.
浮動(dòng)清除
2.overflow：hiddc，auto
：
光標(biāo)懸停時(shí)，外形變化
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：原形+問(wèn)號(hào)
cursor:pointer：手指
cursor:progress：原形+加載
cursor:wait：加載
cursor:crosshair：十字
：
CSS 偽類(Pseudo-classes)：
光標(biāo)經(jīng)過(guò)顯示狀態(tài)：
a:link：未訪問(wèn)過(guò)的鏈接
a:hover：當(dāng)用戶鼠標(biāo)懸停在鏈接上時(shí)
a:visited：用戶已訪問(wèn)過(guò)的鏈接
a:active：鏈接被點(diǎn)擊的那一刻
a:focus：選擇元素輸入后具有焦點(diǎn)
所有CSS偽類/元素：
:checked input:checked：選擇所有選中的表單元素
:disabled input:disabled：選擇所有禁用的表單元素
:empty p:empty：選擇所有沒(méi)有子元素的p元素
:enabled input:enabled：選擇所有啟用的表單元素
:first-of-type p:first-of-type：選擇每個(gè)父元素是p元素的第一個(gè)p子元素
:in-range input:in-range：選擇元素指定范圍內(nèi)的值
:invalid input:invalid：選擇所有無(wú)效的元素
:last-child p:last-child：選擇所有p元素的最后一個(gè)子元素
:last-of-type p:last-of-type：選擇每個(gè)p元素是其母元素的最后一個(gè)p元素
:not(selector) :not(p)：選擇所有p以外的元素
:nth-child(n) p:nth-child(2)：選擇所有p元素的第二個(gè)子元素
:nth-last-child(n) p:nth-last-child(2)：選擇所有p元素倒數(shù)的第二個(gè)子元素
:nth-last-of-type(n) p:nth-last-of-type(2)：選擇所有p元素倒數(shù)的第二個(gè)為p的子元素
:nth-of-type(n) p:nth-of-type(2)：選擇所有p元素第二個(gè)為p的子元素
:only-of-type p:only-of-type ：選擇所有僅有一個(gè)子元素為p的元素
:only-child p:only-child：選擇所有僅有一個(gè)子元素的p元素
:optional input:optional：選擇沒(méi)有"required"的元素屬性
:out-of-range input:out-of-range：選擇指定范圍以外的值的元素屬性
:read-only input:read-only：選擇只讀屬性的元素屬性
:read-write input:read-write：選擇沒(méi)有只讀屬性的元素屬性
:required input:required ：選擇有"required"屬性指定的元素屬性
:root root ：選擇文檔的根元素
:target #news:target：選擇當(dāng)前活動(dòng)#news元素(點(diǎn)擊URL包含錨的名字)
:valid input:valid：選擇所有有效值的屬性
:focus input:focus：選擇元素輸入后具有焦點(diǎn)
:first-letter p:first-letter：選擇每個(gè)

元素的第一個(gè)字母
:first-line p:first-line：選擇每個(gè)

元素的第一行
:first-child p:first-child：選擇器匹配屬于任意元素的第一個(gè)子元素的

元素
:before p:before：在每個(gè)

元素之前插入內(nèi)容
:after p:after：在每個(gè)

元素之后插入內(nèi)容
:lang(language) p:lang(it)：為

元素的lang屬性選擇一個(gè)開(kāi)始值
：
CSS 偽元素
"first-line" 偽元素用于向文本的首行設(shè)置特殊樣式
"first-line" 偽元素只能用于塊級(jí)元素。
注意： 下面的屬性可應(yīng)用于 "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" 偽元素用于向文本的首字母設(shè)置特殊樣式：
注意： "first-letter" 偽元素只能用于塊級(jí)元素。
注意： 下面的屬性可應(yīng)用于 "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：偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。
:after：偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
：
CSS 布局 - 水平 & 垂直對(duì)齊
要水平居中對(duì)齊一個(gè)元素(如

), 可以使用 margin: auto;。
設(shè)置到元素的寬度將防止它溢出到容器的邊緣。
元素通過(guò)指定寬度，并將兩邊的空外邊距平均分配
要讓圖片居中對(duì)齊, 可以使用 margin: auto; 并將它放到 塊 元素中。
除了使用 padding 和 line-height 屬性外,我們還可以使用 transform 屬性來(lái)設(shè)置垂直居中。
讓圖片自動(dòng)居中先把它變成塊級(jí)元素。
：
CSS 組合選擇符
在 CSS3 中包含了四種組合方式:
1.后代選擇器(以空格分隔)
2.子元素選擇器(以大于號(hào)分隔）
3.相鄰兄弟選擇器（以加號(hào)分隔）
4.普通兄弟選擇器（以破折號(hào)分隔）
：
CSS 導(dǎo)航欄
作為標(biāo)準(zhǔn)的HTML基礎(chǔ)一個(gè)導(dǎo)航欄是必須的。
在我們的例子中我們將建立一個(gè)標(biāo)準(zhǔn)的HTML列表導(dǎo)航欄。
導(dǎo)航條基本上是一個(gè)鏈接列表，所以使用
和
• 元素非常有意義
  有兩種方法創(chuàng)建橫向?qū)Ш綑凇Ｊ褂脙?nèi)聯(lián)(inline)或浮動(dòng)(float)的列表項(xiàng)。
  這兩種方法都很好，但如果你想鏈接到具有相同的大小，你必須使用浮動(dòng)的方法。
  display:block - 顯示塊元素的鏈接，讓整體變?yōu)榭牲c(diǎn)擊鏈接區(qū)域（不只是文本），它允許我們指定寬度
  ：
  CSS 下拉菜單
  使用 CSS 創(chuàng)建一個(gè)鼠標(biāo)移動(dòng)上去后顯示下拉菜單的效果
  設(shè)置好樣式和位置關(guān)系。
  ：
  CSS 提示工具(Tooltip)
  提示工具在鼠標(biāo)移動(dòng)到指定元素后觸發(fā)
  ::after：偽元素，可以創(chuàng)建一個(gè)三角形用于"提示工具"
  content:""：必不可少的
  transparent (一個(gè)是漏斗形)
  transparent (兩個(gè)三角形)
  transparent (三個(gè)也是三角形)
  一個(gè)排在顏色前面，三角形方向，向左
  兩個(gè)排在顏色前面，三角形方向，向上
  三個(gè)排在顏色后面，三角形方向，向下
  三個(gè)排在顏色前面，三角形方向，向右
  transition 屬性及 opacity 屬性來(lái)實(shí)現(xiàn)淡入效果
  寫入淡入效果，效果更好
  ：
  CSS 圖片廊
  :
  CSS 圖像透明/不透明
  使用CSS很容易創(chuàng)建透明的圖像。
  CSS Opacity屬性是W3C的CSS3建議的一部分
  CSS3中屬性的透明度是 opacity。
  Opacity屬性值從0.0 - 1.0。值越小，使得元素更加透明。
  opacity 屬性通常與 :hover 選擇器一起使用
  ：
  CSS 圖像拼合技術(shù)
  圖像拼合就是單個(gè)圖像的集合。
  有許多圖像的網(wǎng)頁(yè)可能需要很長(zhǎng)的時(shí)間來(lái)加載和生成多個(gè)服務(wù)器的請(qǐng)求。
  使用圖像拼合會(huì)降低服務(wù)器的請(qǐng)求數(shù)量，并節(jié)省帶寬
  創(chuàng)建一個(gè)導(dǎo)航列表：
  background:url("圖片")
  位置設(shè)置相對(duì)定位，讓里面的絕對(duì)定位
  margin和padding設(shè)置為0
  所有圖像的高度統(tǒng)一，具體分布樣式
  懸停效果：
  :hover 選擇器用于鼠標(biāo)懸停在元素上的顯示的效果
  :hover 選擇器可以運(yùn)用于所有元素。
  ：
  CSS 媒體類型
  媒體類型允許你指定文件將如何在不同媒體呈現(xiàn)。該文件可以以不同的方式顯示在屏幕上，在紙張上，或聽(tīng)覺(jué)瀏覽器等等
  @media 規(guī)則
  @media 規(guī)則允許在相同樣式表為不同媒體設(shè)置不同的樣式。
  ：
  CSS3 @keyframes 規(guī)則使用@keyframes規(guī)則，你可以創(chuàng)建動(dòng)畫。
  br/>使用@keyframes規(guī)則，你可以創(chuàng)建動(dòng)畫。
  在動(dòng)畫過(guò)程中，您可以更改CSS樣式的設(shè)定多次。
  指定的變化時(shí)發(fā)生時(shí)使用％，或關(guān)鍵字"from"和"to"，這是和0％到100％相同。
  0％是開(kāi)頭動(dòng)畫，100％是當(dāng)動(dòng)畫完成。
  為了獲得最佳的瀏覽器支持，您應(yīng)該始終定義為0％和100％的選擇器。
  注意: 使用animation屬性來(lái)控制動(dòng)畫的外觀，還使用選擇器綁定動(dòng)畫
  ：
  CSS 上下左右四個(gè)方向箭頭(^v<>)
  

  和來(lái)做
  實(shí)線
  用邊框?qū)挾龋?1.形狀 2.厚度 3.厚度 4.形狀)
  display: inline-block
  內(nèi)邊距：Padding：#
  上：transform: rotate(-135deg)
  下：transform: rotate(45deg)
  左：transform: rotate(135deg)
  右：transform: rotate(-45deg)
  ：
  翻頁(yè)符：
  左雙箭頭(<<)：?。
  左單箭頭(<)：?。?
  右雙箭頭(>>)：?。
  右單箭頭(>)：?。?
  ：
  用邊框畫圓，先確定高和寬。在寫其他樣式
  ：
  長(zhǎng)度單位
  em：一般瀏覽器字體大小默認(rèn)為16px，則2em == 32px
  rem：根據(jù)元素（html）的 font-size
  ex：依賴于英文子母小 x 的高度
  ch：數(shù)字 0 的寬度
  vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%
  vh：viewpoint height，視窗高度，1vh=視窗高度的1%
  vmin：vw和vh中較小的那個(gè)
  vmax：vw和vh中較大的那個(gè)
  %：百分比
  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)

  

  我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、邳州ssl等。為近1000家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的邳州網(wǎng)站制作公司

  后加內(nèi)容：
  position:absolute與float:left，兩者有兩大共性：包裹性，破壞性。
  包裹性
  包裹性換種說(shuō)法就是讓元素inline-block化，例如一個(gè)div標(biāo)簽?zāi)J(rèn)寬度是100%顯示的，但是一旦被absolute屬性纏上，則100%默認(rèn)寬度就會(huì)變成自適應(yīng)內(nèi)部元素的寬度。
  float也是典型的inline-block化元素，這種元素的inline-block化適用于任何水平的標(biāo)簽。例如平時(shí)我們要讓span標(biāo)簽支持width屬性，可能要設(shè)置。想重構(gòu)高質(zhì)量的頁(yè)面，少用絕對(duì)定位布局！

  另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

  
  本文標(biāo)題：CSS層疊樣式表-創(chuàng)新互聯(lián)
  URL分享：http://weahome.cn/article/disojh.html