CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

Mtreellen

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量196

点赞数

分类专栏： web 文章标签： HTML CSS选择器

本文链接：https://blog.csdn.net/qq_44057443/article/details/87981535

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一个CSS代码

<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
		body {color:red}
		h1 {color:#00ff00}
		p.ex {color:rgb(0,0,255)}
	</style>
	</head>
	<body>
		<h1>第一个CSS程序</h1>
		<p>hello my first css code</p><p class="ex">该标签class字段为ex，显示为蓝色</p>
	</body>
</html>

CSS：样式层叠表，就是HTML的外衣！

使用内部CSS样式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部样式单</title>
		<style type="text/css">
			table {
				background-color:#003366;
				width: 400px;
			 }
			 td {
				background-color:#fff;
				font-family:"楷体_GB2312";
				font-size:20px;
				text-shadow:-8px 6px 2px #333;
			 }
			 .title {
				font-size: 18px;
				color: #60C;
				height: 30px;
				width: 200px;
				border-top: 3px solid #CCCCCC;
				border-left: 3px solid #CCCCCC;
				border-bottom: 3px solid #000000;
				border-right: 3px solid #000000;
			 }
		 </style>
	</head>		
	<body>
		<div class="title">
			前端课程体系:
		</div><hr />
		<table>
			<tr>
				<td>HTML从入门到精通</td>
			</tr>
			<tr>
				<td>CSS从入门到精通</td>
			</tr>
			<tr>
	 			<td>JavaScript从入门到精通</td>
			</tr>
		</table>
	</body>
</html>

使用CSS内联样式：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>内联样式</title>
	</head>
	<body>
		<div style="font-size: 18px;
 			color: #60C;
			height: 30px;
			width: 200px;
			border-top: 3px solid #CCCCCC;
			border-left: 3px solid #CCCCCC;
			border-bottom: 3px solid #000000;
			border-right: 3px solid #000000;"
		>
				前端课程体系:
		</div><hr />
		<table style="background-color:#003366;
		<div class="title">
			前端课程体系:
		</div><hr />
		<table>
			<tr>
				<td>HTML从入门到精通</td>
			</tr>
			<tr>
				<td>CSS从入门到精通</td>
			</tr>
			<tr>
				<td>JavaScript从入门到精通</td>
			</tr>
		</table>
	</body>
</html>

使用元素选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素选择器</title>
		<style type="text/css">
			/* 定义对div元素起作?的CSS样式 */
			div {
				background-color: grey;
				font: italic normal bold 14pt normal 楷体_GB2312;
			}
			/* 定义对p元素起作?的CSS样式 */
			p {
				background-color: #444;
				color: #fff;
				font: normal small-caps bold 20pt normal 宋体;
			}
		</style>
	</head>
	<body>
		<div>div 内的文字</div>
		<p>p内的文字</p>
	</body>
</html>

使用属性选择器：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>属性选择器</title>
	<style type="text/css">
		div {
			width: 300px;
			height: 30px;
			background-color: #eee;
			border: 1px solid black;
			padding: 10px;
		}
		/* 对所有id属性的div元素起作? */
		div[id] {
			background-color: #aaa;
		}
		/* 对所有id属性值包含xx的div元素起作用 */
		div[id*=xx] {
			background-color: #999;
		}
		/* 对所有id属性值以xx开头的div元素起作用 */
		div[id^=xx] {
			background-color: #555;
		}
		/* 对所有id属性值等于xx的div元素起作用 */
		div[id=xx] {
			background-color: #111;
			color: #fff;
		}
	</style>
	</head>
	<body>
		<div>没有任何属性的div元素</div>
		<div id="a">带id属性的div元素</div>
		<div id="zzxx">id属性值包含xx字符串的div元素</div>
		<div id="xxyy">id属性值以xx开头的div元素</div>
		<div id="xx">id属性值等于xx的div元素</div>
	</body>
</html>

使用id选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 30px;
				background-color: #ddd;
				padding: 3px; 
			}
			#xx {
				border:2px dotted black;
				background-color: #888;
			} 
		</style>
	</head>
	<body>
		<div>没有任何属性的div元素</div>
		<div id="xx">id属性值为xx的div元素</div>
	</body>
</html>