設置鏈接的四種情況下的屬性
a:link {color:;} <!-- 未被訪問的鏈接 -->
a:visited {color:;} <!-- 已被訪問的鏈接 -->
a:hover {color:;} <!-- 鼠標指針移動到鏈接上 -->
a:active {color:;} <!-- 正在被點擊的鏈接 -->
a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後
text-decoration 屬性
text-decoration 屬性大多數是用於去掉鏈接中的下劃線
{text-decoration:none;}
background-color 屬性
高級:創建鏈接框
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
font-weight:bold;
font-size:16px;
color:white;
background-color:green;
width:130px;
text-align:center;
padding:5px;
text-decoration:none;
}
a:hover,a:active{background-color:grey;}
</style>
</head>
<body>
<a href="https://blog.csdn.net/qq_41027897" target="_blank">LambBlog</a>
</body>
</html>
CSS列表
可以使用list-style屬性來設置列表項的標誌 (marker)
直接使用{list-style:}
可以對三種進行設置
- list-style-type 可以設置標誌的樣式
所有樣式
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
- list-style-image 可以將標誌設置成圖片
{list-style-image: url( )}
- list-style-position 可以設置標誌出現在列表內容的外面還是裏面(是否在原本位置的後面)
{list-style-position: outside}
{list-style-position: inside}
CSS表格
- 摺疊邊框
由於 table、th 以及 td 元素都有獨立的邊框
如果想要摺疊成單邊框,使用該屬性
{border-collapse:collapse;} 單
{border-collapse:separate;} 雙
- 水平對齊方式直接用 text-align
- vertical-align 屬性是用於設置垂直對齊方式
{vertical-align:bottom;}
- empty-cells 屬性用於設置是否顯示空單元格
{empty-cells:hide;}
{empty-cells:show;}
- border-spacing 屬性用於設置表格單元邊框之間的空白
- caption-side 屬性用於設置表格標題的位置 ,標題是在表格外的
CSS輪廓
輪廓(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用,可以設置的有:
- 樣式
dotted {outline-style: dotted}
dashed {outline-style: dashed}
solid {outline-style: solid}
double {outline-style: double}
groove {outline-style: groove}
ridge {outline-style: ridge}
inset {outline-style: inset}
outset {outline-style: outset}
- 顏色
{outline-color: ;}
- 寬度
{ outline-width: ;}