CSS

css颜色：

css选择器：用于选中要修饰的样式

高级选择器

伪类选择器：无需定义类名的类

常用样式

示例一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#tbl {
				width: 800px;
				height: 300px;
				/* background-color: pink; */
				/* 边框折叠，基本只用在表格 */
				border-collapse: collapse;
				/* 文本水平对齐方式 */
				text-align: center;
			}
			td {
				border: 1px solid #000;
			}
			/* 子代选择器 */
			div>span {
				background-color: pink;
			}
			
			#tbl tr>td>span {
				font-weight: bold;
				color: blue;
			}
		</style>
	</head>
	<body>
		<div><span>测试表格样式</span></div>
		<table id="tbl">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td><span>4</span></td>
				<td><span>5</span></td>
				<td><span>6</span></td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
示例二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ctr~li {
				/* color: red;
				background-color: pink; */
			}
			#ul1>li:last-child,span {
				border-right: 2px dotted red;
			}
			.red {
				color: red;
			}
			/* 交集选择器 */
			span.red {
				font-size: 100px;
			}
			
			ul>li:first-child {
				font-size: 40px;
				color: green;
			}
			/* 选中第3个子元素 */
			ul>li:nth-child(3) {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<ul id="ul1">
			<li class="ctr">1</li>
			<li class="red">2</li>
			<li class="red">3</li>
			<li>4</li>
			<li><span class="red">5</span></li>
		</ul>
		<span>6</span>
	</body>
</html>

在这里插入图片描述
示例三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 默认样式 */
			a:link {
				text-decoration: none;
				color: pink;
			}
			/* 访问之后的样式 */
			a:visited {
				color: gold;
			}
			/* 鼠标滑过时的样式 */
			a:hover {
				background-color: greenyellow;
				font-size: 40px;
			}
			/* 激活后的样式。按下即激活 */
			a:active {
				color: yellow;
			}
		</style>
	</head>
	<body>
		<a href="demo1.html">去百度</a>
	</body>
</html>

示例三

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span {
				font-weight: bold;
				text-decoration: none;
			}
			/* id选择器 */
			#s4 {
				font-style: italic;
			}
			/* 类选择器 */
			.c1 {
				font-family: 隶1书,黑1体,宋1体;
			}
			/* 模糊选择器 */
			* {
				border: 1px solid #000;
			}
		</style>
	</head>
	<body>
	<!-- “#”的意思是链接当前页面。 -->
	<!-- font-weight: bold 属性设置文本的粗细，默认值为bold，cursor：定义了鼠标指针放在一个元素边界范围内所用到的光标形状 -->
		<a href="#" style="font-weight: bold;color: red;text-decoration: none;cursor: move;">去百度</a>
	
		<!-- 块标记 -->
		<div style="width: 60%;height: 100px;background-color: #00f;">文字内容</div>
		
		<br>
		
		<!-- 内联标记 -->
		<span style="color: red;">文字内容</span>
		<span class="c1 c2 c3">一</span>
		<span>二</span>
		<span class="c1">三</span>
		<span id="s4" class="c1">四</span>
		
	</body>
</html>

在这里插入图片描述