CSS 實(shí)例大全

CSS文字

• 設(shè)置文字顏色

• 文字對(duì)齊

• 文字縮進(jìn)

• 裝飾文字

• 設(shè)置字符之間的間距

• 設(shè)置單詞之間的間距

• 設(shè)置文本行之間的間距

• 保留空格和換行符

• 元素內(nèi)的文字換行

• 圖片在文字中的垂直對(duì)齊

CSS字體

• 設(shè)置文本的字體

• 設(shè)置字體大小

• 設(shè)置字體樣式

• 設(shè)置字體的變體

• 設(shè)置字體的粗體

• 在單個(gè)聲明中設(shè)置所有字體屬性-字體簡寫屬性

CSS鏈接

• 設(shè)置鏈接不同狀態(tài)的樣式

• 從超鏈接中刪除默認(rèn)下劃線

• 從超鏈接中刪除虛線輪廓

• 創(chuàng)建鏈接框

• 圖像翻轉(zhuǎn)

CSS列表

• 在列表中指定項(xiàng)目符號(hào)和編號(hào)

• 設(shè)置列表項(xiàng)標(biāo)記的位置

• 將圖像設(shè)置為列表項(xiàng)標(biāo)記

• 創(chuàng)建一個(gè)簡單的下拉菜單

• 在單個(gè)聲明中設(shè)置所有列表屬性-列表樣式的簡寫屬性

CSS表

• 設(shè)置表格的邊框

• 指定表格的尺寸

• 通過折疊表格邊框來創(chuàng)建更好的表格

• 設(shè)置表格單元格內(nèi)文本的水平對(duì)齊方式

• 設(shè)置內(nèi)容的垂直對(duì)齊

• 指定應(yīng)如何顯示空單元格

• 指定表格單元格的填充

• 指定表布局算法-自動(dòng)或固定

• 設(shè)置表格標(biāo)題的位置

CSS背景

• 設(shè)置元素的背景色

• 將圖像設(shè)置為元素的背景

• 水平或垂直重復(fù)背景圖像

• 指定背景圖片的位置

• 固定的背景圖片，不會(huì)與其包含的元素一起滾動(dòng)

• 一次設(shè)置所有背景屬性-背景速記屬性

• 設(shè)置背景圖像的尺寸

• 設(shè)置背景裁剪

• 設(shè)置背景原點(diǎn)

• 向元素添加多個(gè)背景

CSS單位

• 使用絕對(duì)單位（例如px，pt，cm等）

• 使用相對(duì)單位（例如，em，ex，％等）

CSS尺寸

• 設(shè)置元素的寬度和高度

• 設(shè)置元素的最大寬度和高度

• 設(shè)置元素的最小寬度和高度

• 控制溢出

CSS對(duì)齊

• 文本和內(nèi)嵌元素在塊級(jí)元素內(nèi)的對(duì)齊

• 使用邊距屬性對(duì)塊元素進(jìn)行中心對(duì)齊

• 使用float屬性水平對(duì)齊元素

• 使用position屬性在水平和垂直方向上對(duì)齊元素

• 防止父項(xiàng)與clear屬性崩潰

• 創(chuàng)建一個(gè)簡單的水平菜單

CSS定位

• 相對(duì)于瀏覽器窗口放置元素

• 相對(duì)于其父元素定位元素

• 相對(duì)于其正常位置定位元素

• 使用z-index屬性重疊元素

CSS顯示

• 使用可見性屬性隱藏元素

• 使用display屬性從DOM中刪除元素

• 將元素顯示為嵌入式元素

• 將元素顯示為塊元素

• 折疊表格元素

CSS邊框和輪廓

• 在元素周圍繪制邊框

• 在元素的各個(gè)邊上繪制邊框

• 為邊框設(shè)置不同的樣式

• 一次設(shè)置所有邊框?qū)傩?邊框速記屬性

• 在元素周圍創(chuàng)建圓角

• 使用圖像創(chuàng)建邊框

• 在元素周圍繪制輪廓

• 在元素周圍繪制邊框而不影響周圍的元素

CSS邊距和填充

• 設(shè)置元素各邊的邊距

• 在單個(gè)聲明中設(shè)置所有邊距屬性-邊距速記屬性

• 設(shè)置元素各個(gè)邊的填充

• 一次設(shè)置所有填充屬性-填充速記屬性

CSS不透明度

• 設(shè)置元素的透明度

• 圖像翻轉(zhuǎn)效果和透明度

• 透明框中的文字

CSS生成的內(nèi)容

• 指定引號(hào)

• 自動(dòng)編號(hào)的部分和類別

• 使用CSS插入生成的內(nèi)容

CSS偽類

• 為超鏈接的不同狀態(tài)設(shè)置樣式

• 使用：focus偽類為焦點(diǎn)中的表單元素設(shè)置樣式

• 使用：first-child偽類為元素的第一個(gè)子元素設(shè)置樣式

• 使用：first-child偽類為元素的最后一個(gè)子元素設(shè)置樣式

• 使用：nth-child偽類為元素的nth-child設(shè)置樣式

• 使用：lang()偽類為特定語言設(shè)置樣式

• 將偽類與選擇器一起使用

CSS偽元素

• 使用:: first-letter偽元素創(chuàng)建首字下沉效果

• 使用:: first-line偽元素以不同方式設(shè)置文本的第一行

• 使用:: before或:: after偽元素在元素之前或之后插入一些內(nèi)容

• 在類中使用偽元素

CSS3漸變

• 從頂部到底部創(chuàng)建線性漸變

• 從左到右創(chuàng)建線性漸變

• 沿對(duì)角線創(chuàng)建線性漸變

• 使用角度設(shè)置線性漸變的方向

• 使用多個(gè)色標(biāo)創(chuàng)建線性漸變

• 創(chuàng)建漸變時(shí)設(shè)置顏色的位置停止

• 重復(fù)線性漸變

• 創(chuàng)建徑向漸變

• 設(shè)置徑向漸變的形狀

• 設(shè)置徑向漸變的大小

• 重復(fù)徑向漸變

• 對(duì)漸變使用透明度

CSS3陰影

• 創(chuàng)建框陰影效果

• 將多個(gè)框陰影添加到元素的框

• 創(chuàng)建文字陰影效果

CSS3 2D轉(zhuǎn)換

• 使用translate()方法移動(dòng)元素

• 使用Rotate()方法旋轉(zhuǎn)元素

• 使用scale()方法增大或減小元素的大小

• 使用matrix()方法應(yīng)用2D變換

• 將多重轉(zhuǎn)換應(yīng)用于元素

CSS3 3D轉(zhuǎn)換

• 使用translate3d()方法在三維空間中移動(dòng)元素

• 使用rotate3d()方法在三維空間中旋轉(zhuǎn)元素

• 使用scale3d()方法在三維空間中縮放元素

• 使用matrix3d()方法應(yīng)用3D變換

• 將多個(gè)3D變換應(yīng)用于元素

CSS3過渡

• 將過渡效果應(yīng)用于背景色

• 將過渡效果應(yīng)用于多個(gè)屬性

• 一次設(shè)置所有過渡屬性-過渡速記屬性

CSS3動(dòng)畫

• 網(wǎng)頁上的動(dòng)畫元素

• 在創(chuàng)建動(dòng)畫時(shí)定義關(guān)鍵幀

• 一次設(shè)置所有動(dòng)畫屬性-動(dòng)畫速記屬性

CSS3多列布局

• 創(chuàng)建多列布局

• 設(shè)置列數(shù)或?qū)挾?/a>

• 設(shè)置列之間的間隙

• 在列之間添加規(guī)則或垂直線