第四章初识CSS_第四章,初始css-优快云博客

博客介绍了CSS样式的引入方式，包括行内、内部和外部样式，指出其优先级为行内>内部>外部。还介绍了基本选择器，如标签、类和ID选择器，优先级为ID>类>标签，此外还提及高级选择器，如层次、结构伪类和属性选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式

行内样式：使用style属性引入CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<!--行内样式-->
	<body>
		<h1 style="color: red;">行内样式</h1>
		<p style="color: blue; font-size: 20;">style属性应用</p>
	</body>
</html>

内部样式：CSS代码写在<head>的<style>标签中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				color: green;
				font: "楷体";
			}
		</style>
	</head>
	<!--内部样式-->

	<body>
		<h3>天净沙&nbsp;秋思</h3>
		<p>枯藤老树昏鸦</p>
		<p>小桥流水人家</p>
		<p>古道西风瘦马</p>
		<p>夕阳西下</p>
		<p>断肠人在天涯</p>
	</body>
</html>

外部样式：CSS代码保存在扩展名为.css的样式表中；HTML文件引用扩展名为.css的样式表。

one.css

p{
	color: yellow;
	font-size: 15;
}

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--方式一：链接式-->
		<link href="css/one.css" rel="stylesheet" type="text/css" />
	</head>

	<!--外部样式-->
	<body>
		<h3>天净沙&nbsp;秋思</h3>
		<p>枯藤老树昏鸦</p>
		<p>小桥流水人家</p>
		<p>古道西风瘦马</p>
		<p>夕阳西下</p>
		<p>断肠人在天涯</p>
	</body>
</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--方式二：导入式-->
		<style type="text/css">
			@import url("css/one.css");
		</style>
	</head>

	<!--外部样式-->
	<body>
		<h3>天净沙&nbsp;秋思</h3>
		<p>枯藤老树昏鸦</p>
		<p>小桥流水人家</p>
		<p>古道西风瘦马</p>
		<p>夕阳西下</p>
		<p>断肠人在天涯</p>
	</body>
</html>

CSS样式优先级：

行内样式>内部样式表>外部样式表

基本选择器

标签选择器：HTML标签作为标签选择器的名称

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器的用法</title>
		<style type="text/css">
			p{
				color:pink;
				font-size: 13;
			}
			h2{
				color: green;
			}
		</style>
	</head>
	<body>
		<h2>墨渐生微</h2>
		<p>人生若只如初见</p>
		<p>莫使金樽空对月</p>
		<hr />
		<p>身无彩凤双飞翼</p>
		<p>心有灵犀一点通</p>
	</body>
</html>

类选择器：HTML标签的class属性值作为选择器的名称

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>类选择器的用法</title>
		<style type="text/css">
			.one {
				color: darkmagenta;
				font-size: 25px;
			}
		</style>
	</head>

	<body>
		<h2>墨渐生微</h2>
		<p class="one">人生若只如初见</p>
		<p>莫使金樽空对月</p>
		<hr />
		<p class="one">身无彩凤双飞翼</p>
		<p>心有灵犀一点通</p>
	</body>

</html>

ID选择器：HTML标签的id属性值作为选择器的名称

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ID选择器的用法</title>
		<style type="text/css">
			#firsst{
				color:red;
			}
			#second{
				font-size: 25px;
			}
		</style>
	</head>

	<body>
		<h2>墨渐生微</h2>
		<p id="firsst">人生若只如初见</p>
		<p>莫使金樽空对月</p>
		<hr />
		<p>身无彩凤双飞翼</p>
		<p id="second">心有灵犀一点通</p>
	</body>

</html>

选择器的优先级：

ID选择器>类选择器>标签选择器

高级选择器

层次选择器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>层次选择器</title>
		<style type="text/css">
			
			
			/*1.后代选择器*/
			/*body p{
				color: red;
				font-size: 19px;
			}*/
			
			
			/*2.子选择器*/
			/*body>p{
				color: green;
				font-size: 25px;
			}*/
			
			
			/*3.相邻兄弟选择器*/
			/*.brother+p{
				color: blue;
				font-size: 15px;
			}*/
			
			
			/*4.通用兄弟选择器*/
			/*.brother~p{
				color: brown;
				font-size: 17px;
			}*/
			
			
		</style>
	</head>

	<body>
		<p>不忘初心</p>
		<p class="brother">方得始终</p>
		<p>高处不胜寒</p>
		<p>前进的路上总是孤独的</p>
		<ul>
			<li>
				<p>坚持</p>
			</li>
			<li>
				<p>加油</p>
			</li>
			<li>
				<p>不放弃</p>
			</li>
		</ul>
	</body>

</html>

结构伪类选择器

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>结构伪类选择器</title>
		<style type="text/css">
			
			/*父类的第一个子类元素li*/
			/*li:first-child{
				color: red;
				font-size: 24px;
			}*/
			
			
			/*父类的最后一个子类元素li*/
			/*li:last-child{
				color: blue;
				font-size: 14px;
			}*/
			
			
			/*父类的第n个子类元素li*/
			/* li:nth-child(2){
				color: gray;
				font-size: 26px;
			}*/
			
			
			/*父类的li类型第一个元素*/
			/*li:first-of-type{
				color: red;
				font-size: 24px;
			}*/
			
			
			/*父类的li类型最后一个元素*/
			/*li:last-of-type{
				color: blue;
				font-size: 14px;
			}*/
			
			
			/*父类body的p类型第2个元素*/
			/*p:nth-of-type(2){
				color: gray;
				font-size: 26px;
			}*/
		
		</style>
	</head>

	<body>
		<p>不忘初心</p>
		<p class="brother">方得始终</p>
		<p>高处不胜寒</p>
		<p>前进的路上总是孤独的</p>
		<ul>
			<li>
				<p>坚持</p>
			</li>
			<li>
				<p>加油</p>
			</li>
			<li>
				<p>不放弃</p>
			</li>
		</ul>
	</body>

</html>

属性选择器

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>属性选择器的使用</title>
		<style type="text/css">
			/*此段代码只是让结构更美观，后续会详细讲解*/
			
			.demo a {
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				text-align: center;
				background: #aac;
				color: blue;
				font: bold 20px/50px Arial;
				margin-right: 5px;
				text-decoration: none;
				margin: 5px;
			}
			
			/*存在属性id的元素*/
			/*a[id] {
				background: yellow;
			}*/
			
			
			/*/!*属性id=first的元素*!/*/
			/*a[id=first] {
				background: red;
			}*/
				
			
			/*/!*属性class里包含links字符串的元素*!/*/
			/*a[class*=links] {
				background: red;
			}*/
			
			
			/*/!*属性href里以http开头的元素*!/*/
			/*a[href^=http] {
				background: red;
			}*/
			
			
			/*/!*属性href里以png结尾的元素*!/*/
			/*a[href$=png] {
				background: red;
			}*/
			
		</style>
	</head>

	<body>
		<p class="demo">
			<a href="http://www.baidu.com" class="links item first" id="first">1</a>
			<a href="" class="links active item" title="test website" target="_blank">2</a>
			<a href="sites/file/test.html" class="links item">3</a>
			<a href="sites/file/test.png" class="links item"> 4</a>
			<a href="sites/file/image.jpg" class="links item">5</a>
			<a href="efc" class="links item" title="website link">6</a>
			<a href="/a.pdf" class="links item">7</a>
			<a href="/abc.pdf" class="links item">8</a>
			<a href="abcdef.doc" class="links item">9</a>
			<a href="abd.doc" class="linksitem last" id="last">10</a>
		</p>
	</body>

</html>