CSS 实例
CSS 實例
CSS背景
設置頁面的背景顏色
設置不同元素的背景顏色
設置一個圖像作為頁面的背景
錯誤的的背景圖片
如何在水平方向重復背景圖像
如何定位背景圖像
一個固定的背景圖片（這個圖片不會隨頁面的其余部分滾動）
在一個聲明的所有背景屬性
高級的背景例子
背景屬性的解釋
CSS文本
設置不同元素的文本顏色
文本對齊
移除鏈接下劃線
裝飾文字
控制文本中的字母
縮進文本
指定了字符之間的空間
指定了行與行之間的空間
設置元素的文本方向
增加單詞之間的空格
在一個元素內禁用文字換行
內部文字圖像的垂直對齊
?
Text屬性的解釋
CSS的字體
設置文本的字體
設置字體大小
用px設置的字體的大小
用em設置的字體的大小
用百分比和em設置字體的大小
設置字體樣式
設置字體的異體
設置字體的粗細
在一個聲明的所有字體屬性
?
Font屬性的解釋
CSS鏈接
為訪問/未訪問鏈接添加不同的顏色
在鏈接上使用文本裝飾
指定鏈接的背景顏色
超鏈接添加其他樣式
高級 - 創建鏈接框
?
鏈接屬性的解釋
CSS列表
列表中所有不同的列表項標記
設置作為列表項標記的圖像
使用Crossbrowser解決方案設置一個列表項標記的圖像
在一個聲明中的所有列表屬性
?
列表屬性的解釋
CSS表格
指定一個表的Th，TD元素和黑色邊框
使用border-collapse
指定表格的寬度和高度
設置內容的水平對齊方式（文本對齊）
設置內容的垂直對齊（垂直對齊）
指定TH和TD元素的填充
指定表格邊框的顏色
設置表格標題的位置
創建一個奇特的表
?
表格屬性的解釋
CSS盒模型
指定元素的總寬度為250像素
使用Crossbrowser解決方案指定元素的總寬度為250像素的
?
盒模型的解釋
CSS邊框
設置四個邊框的寬度
設置上邊框的寬度
設置底部邊框的寬度
設置左邊框的寬度
設置右邊框的寬度
?
設置四個邊框的樣式
設置上邊框的樣式
設置下邊框的樣式
設置左邊框的樣式
設置右邊框的樣式
?
設置四個邊框的顏色
設置上邊框的顏色
設置下邊框的顏色
設置左邊框的顏色
設置右邊框的顏色
?
在一個聲明中的所有邊框屬性
?
每邊設置不同的邊框
在一個聲明中的所有頂部邊框屬性
在一個聲明中的所有下邊框屬性
在一個聲明中的所有左邊框屬性
在一個聲明中的所有右邊框屬性
?
邊框屬性的解釋
CSS輪廓
圍繞一個元素（outline），繪制一條線
設置輪廓的樣式
設置輪廓顏色
設置輪廓的寬度
?
輪廓屬性的解釋
CSS邊距
指定一個元素的邊距
邊距縮寫屬性
文本頂部邊距設置的值使用厘米
使用百分比值設置文本的底部邊緣
使用厘米值設置文本的左邊距
?
Margin屬性的解釋
CSS填充
設置元素的左部填充
設置元素的右部填充
設置元素的頂部填充
設置元素的底部填充
在一個聲明中的所有填充屬性
?
padding屬性的解釋
CSS分組和嵌套
組選擇器
嵌套選擇器
?
分組和嵌套解釋
CSS尺寸
使用像素值設置圖像的高度
使用百分比設置圖像的高度
使用像素值來設置元素的寬度
使用百分比來設置元素的寬度
設置元素的最大高度
使用像素值設置元素的最大寬度
使用百分比來設置元素的最大寬度
設置元素的最低高度
使用像素值來設置元素的最小寬度
使用百分比來設置元素的最小寬度
?
尺寸屬性的解釋
CSS顯示
如何隱藏一個元素(visibility:hidden)
如何不顯示元素(display:none)
如何顯示一個元素的內聯元素
如何顯示一個元素的塊元素
H如何使用表格的collapse屬性
?
Display屬性的解釋
CSS定位
元素相對瀏覽器窗口的位置
元素的相對定位
元素的絕對定位
重疊的元素
設置元素的形狀
如何使用滾動條來顯示元素內溢出的內容
如何設置瀏覽器自動溢出處理
使用像素值設置圖像的頂部
使用像素值設置圖像的底部
使用像素值設置圖像的左邊
使用像素值設置圖像的右邊
更改光標
?
定位屬性的解釋
CSS浮動
簡單的使用float屬性
為圖像添加邊框和邊距并浮動到段落的左側
標題和圖片向右側浮動
讓段落的第一個字母浮動到左側
使用float屬性創建一個圖片廊
開啟float - clear屬性
創建一個水平菜單
創建一個沒有表格的網頁
?
Float屬性的解釋
CSS對齊元素
使用margin的中間調整
左/右位置對齊
使用Crossbrowser解決方案，設置左/右位置對齊
左/右對齊，浮動
使用Crossbrowser解決方案，設置左/右位置對齊，浮動
?
對齊屬性解釋
CSS生成的內容
把括號內的URL用content屬性插入到每個鏈接后面
章節和分節的編號是"第1節"，"1.1"，"1.2"等
quotes 屬性指定了引號
CSS偽類
添加不同顏色的超鏈接
給超鏈接添加其他樣式
使用：焦點
:first-child - 匹配了第一個p元素
:first-child - 匹配了第一個p元素中的I元素
:first-child - 匹配了第一個p元素中的所有I元素
使用:lang
?
偽類的解釋
CSS偽元素
把文本的第一個字母設為特殊的字母
把第一行文字設置為特殊
把第一行文字的第一個字母設置為特殊
使用：在一個元素之前插入一些內容
使用：在一個元素之后插入一些內容
?
偽元素的解釋
CSS導航欄
垂直導航欄的全樣式
水平導航欄的全樣式
?
導航欄的解釋
CSS圖片廊
圖片廊
?
圖片廊解釋
CSS圖像的不透明度
創建透明圖像 - 鼠標懸停效果
創建一個背景圖像與文本的透明框
?
圖像的不透明度解釋
CSS圖像拼合
圖像拼合
圖像拼合-導航列表
懸停效果與圖像拼合
?
圖像拼合解釋
CSS屬性選擇器
選擇具有title屬性的元素
選擇標題=一個特定值的元素
選擇標題=一個特定值的元素(使用（~）分隔屬性和值)
選擇標題=一個特定值的元素(使用（|）分隔屬性和值)
?
屬性選擇器解釋
轉載于:https://www.cnblogs.com/zhiupping8/p/4871919.html
總結
- 上一篇： 使用Docker镜像和仓库
- 下一篇： 梦到亲人去世一定要说破吗