CSS鏈接-CSS輪廓

設置鏈接的四種情況下的屬性

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:}可以對三種進行設置

  1. 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}
  1. list-style-image 可以將標誌設置成圖片
{list-style-image: url( )}
  1. list-style-position 可以設置標誌出現在列表內容的外面還是裏面(是否在原本位置的後面)
{list-style-position: outside}
{list-style-position: inside}

CSS表格

  1. 摺疊邊框

由於 table、th 以及 td 元素都有獨立的邊框

如果想要摺疊成單邊框,使用該屬性

{border-collapse:collapse;} 單
{border-collapse:separate;} 雙
  1. 水平對齊方式直接用 text-align
  2. vertical-align 屬性是用於設置垂直對齊方式
{vertical-align:bottom;}
  1. empty-cells 屬性用於設置是否顯示空單元格
{empty-cells:hide;}
{empty-cells:show;}
  1. border-spacing 屬性用於設置表格單元邊框之間的空白
  2. caption-side 屬性用於設置表格標題的位置 ,標題是在表格外的

CSS輪廓

輪廓(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用,可以設置的有:

  1. 樣式
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}
  1. 顏色
{outline-color: ;}
  1. 寬度
{ outline-width: ;}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章