CSS的三种声明方式和选择器（具体代码实现）

最新推荐文章于 2025-03-18 00:30:00 发布

北城落花雨

最新推荐文章于 2025-03-18 00:30:00 发布

阅读量6.7k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44095460/article/details/91047882

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS的三种声明方式，包括在head标签内使用style标签、在标签上使用style属性以及通过link标签引入外部CSS文件，并强调了同一页面声明方式的就近原则。同时，文章详细讲解了CSS的选择器，如标签选择器、id选择器、类选择器、全选选择器、组合选择器和子标签选择器，每个都提供了相关示例和效果展示。

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

一：声明方式

三种声明方式

一：在head标签中使用style标签声明：

			 作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式

二：在标签上使用style属性进行声明：

			 作用：此声明会将css样式直接作用于当前标签。

三：3、在head标签中使用link标签引入外部声明好的css文件

			作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
						一次声明，随处使用

注意：在同一页面使用不同声明方式则遵循就近原则

举例：

<!DOCTYPE html>
<html>
	<head>		
		<meta charset="utf-8">
		<title></title>
	<!--方式一声明-->
		<style type="text/css">
			hr{
				width: 100%;
				height: 50px;
				color: #000000;
				background: #808080;
			}
		</style>
		<!--方式三声明-->
		<link rel="stylesheet" type="text/css" href="my.css"/>
	</head>
			
	<body>
		测试声明方式一
		<hr > </hr>
		<!--方式二声明-->
		<h1 style="background: #151515;color: aqua;">测试声明方式二</h1>
		<h2>测试声明方式三</h2>
	</body>
</html>

定义的my.css如下

h2{
	width: 100%;
	height: 50px;
	color: #000000;
	background: #808080;
	}

效果图：

在这里插入图片描述

二：css中的选择器

标签选择器：

				标签名{样式名1：样式值1;……}
				作用：会将当前网页内的所有该标签增加相同的样式

id选择器:

				#标签的id属性值{样式名1：样式值1;……}
				作用：给某个指定的标签添加指定的样式

类选择器：

				.类选择器名{样式名1：样式值1;……}
				作用：给不同的标签添加相同的样式

全部选择选择器：

	*{样式名1：样式值1;……}			作用：选择所有的HTML标签，并添加相同的样式

组合选择器：

				选择器1,选择器2,……{样式名1：样式值1;……}
				作用：解决不同的选择器之间重复样式的问题

子标签选择器

		选择器1 子标签选择器{样式名1：样式值1;……}
		作用：缩小范围选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--1：标签选择器
			作用：会将当前网页内的所有该标签增加相同的样式-->
		<style type="text/css">
			table{				
				width: 500px;
				height: 300px;
				border: solid 5px;
				color: aqua;
				background-color: #808080;
				}
		h1{
			
			border: solid 5px;
			color: #FF0000;
			background-color: #808080;
		}
		/*2.id选择器
			作用：给某个指定的标签添加指定的样式
			*/
		 #x1{
			 
			 width: 100px;
			 height: 20px;
			 color: chartreuse;
			background: #4791FF;
		 }
		/*3.类选择器
			作用：给不同的标签添加相同的样式
			*/
		.common{ 
			width: 100px;
			 height: 20px;
			 color:  #FF7F50;
			background: #FFA500;
			
		}
		/*4.组合选择器
			作用：解决不同的选择器之间重复样式的问题
			*/
		/* .common,table{
			background: #000000;
		} */
		/* 子标签选择器 */
		ul li a{
			
			color: #0000FF;
		}
		#p1 a{
			color: yellow;
			
		}
		input[type=text]{
			background-color: red;
		}
		</style>
		
		
	</head>
	<body>
		<table>
			<tr>
				<td>测试标签选择器——table</td>
				<td></td>
			</tr>
			<tr>
				<td>哈哈哈</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>成功了吧</td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<table class="common">
			<tr>
				<td>测试组合选择器</td>
				<td></td>
			</tr>
			<tr>
				<td>昨夜西风凋敝树</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<h1>测试标签选择器——h1</h1>
		测试id选择器<input type="text" name="" id="x1" value="" />
		
		<h5 class="common">测试类标签</h5>
		<a href="" class="common">测试类标签</a>
		<ul>
			<a href="">有你的清欢渡，我有我的不归路</a>
			<li><a href="">经沧海难为水，除却巫山不是云</a></li>
		</ul>
		<input type="text" name="" id="" value="" />r
	</body>
</html>