第1篇：CSS基本选择器（CSS)

最新推荐文章于 2024-07-22 20:38:06 发布

HaanLen

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量1.4k

点赞数

分类专栏： CSS/CSS3

本文链接：https://blog.csdn.net/weixin_40119412/article/details/95618119

版权

CSS/CSS3 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

css介绍

1、CSS（层叠样式表）是一种格式化网页的标准方式，用于设置网页的样式，并允许样式信息与网页内容分离的一种技术。

2、好处：

（1）将格式和结构分离

（2）精确控制页面布局

（3）制作体积更小、下载更快的网页

（4）可以实现许多网页同时更新

基本选择器

元素选择器

元素选择器是最常用的一种选择器，元素选择器声明了网页中所有相同元素的显示效果

基本语法：HTML元素{属性1：属性值1；属性2：属性值2；...}

类选择器

对相同元素的某些元素做特殊效果设置。

基本语法：.类选择器名{属性1：属性值1；属性2：属性值2；...}

说明：类选择器名称的第1个字符不能使用数字;类选择器的优先级高于元素选择器，所以相同属性的样式，类选择器的样式会覆盖元素选择器的样式，

类名在HTML页面中可以重名。

ID选择器

ID名称站在HTML页面中必须唯一。

基本语法：#id选择器名{属性1：属性值1；属性2：属性值2；...}

说明：id选择器名称的第一个字符不能使用数字；id选择器名不能有空格。

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css基本选择器的使用</title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
				}
			p{color: goldenrod;}
			h3{color: blueviolet;}
			h4{color: rosybrown;}
			
			.txt01{
				color: #8A2BE2;
			}
			.txt02{
				color: tomato;
			}
			.txt03{
				color: saddlebrown;
			}
			.txt04{
				color: sienna;
			}
			
			#txt01{
				text-align: center;
				color: rosybrown;
				
			}
			#txt02{
				text-align: center;
				font: 楷体;
				color: goldenrod;
			}
			#txt03{
				font: 楷体;
				font-size: 22px;
				align-content: center;
				text-align: center;
				color: chocolate;
				margin: auto;
			}
			#txt04{
				text-align: center;
				color: forestgreen;
			}			
		</style>
	</head>
	<body>
		<h3>this is the head title!</h3>
		<h4>this is the second title!</h4>
		<p>古诗词鉴赏</p>
		
		<h1 class="txt01">欢迎来到类选择器</h1>
		<h2 class="txt02">数据分析总结表</h2>
		<table class="txt03" border="2" width="200" cellspacing="0">
			<tr>
				<td>01</td>
				<td>02</td>
				<td>03</td>
				<td>04</td>
				<td>05</td>
			</tr>
			<tr>
				<td>12.9</td>
				<td>12.4</td>
				<td>13.9</td>
				<td>12.3</td>
				<td>11.9</td>
			</tr>
		</table>
		<p class="txt04">分析结果</p>
		
		<table id="txt03" border="1" cellpadding="8" cellspacing="0" width="400"> 
			<tr>
				<td>第一期</td>
				<td>第二期</td>
				<td>第三期</td>
				<td>第四期</td>
				<td>第五期</td>
			</tr>
			<tr>
				<td>34.90</td>
				<td>46.97</td>
				<td>35.15</td>
				<td>45.33</td>
				<td>50.01</td>
			</tr>
			<tr>
				<td>34.90</td>
				<td>46.97</td>
				<td>35.15</td>
				<td>45.33</td>
				<td>50.01</td>
			</tr>
		</table>
		<p id="txt04">总结分析：</p>

	</body>
</html>

通用选择器

通用选择器用通配符“*”表示，可以选择文档中的所有元素。通用选择器主要用于重置文档各元素的默认样式，一般用来重置文档元素的内、外边距。

基本语法：*{属性1：属性值1；属性2：属性值2；...}

常用：*{margin:0px;padding:0px;}//重置文档所有元素的内、外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通用选择器</title>
		<style type="text/css">
			*{
				text-align: center;
				font-size: 24px;
				color: chocolate;
				font: "楷体";
				margin: auto;
				}
		</style>
	</head>
	<body>
		<p> 欢迎来到通用选择器页面</p>
		<table border="2">
			<tr>
				<td>01</td>
				<td>02</td>
				<td>03</td>
				<td>04</td>
				<td>05</td>
			</tr>
			<tr>
				<td>12.9</td>
				<td>12.4</td>
				<td>13.9</td>
				<td>12.3</td>
				<td>11.9</td>
			</tr>
		</table>
	</body>
</html>

伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器的使用</title>
		<style type="text/css">
			
			a:link{
				color: green;
				text-decoration: none;
				/*无下划线*/
			}
			
			a:visited{
				color: darkblue;
			}
			a:hover{
				color: #D2691E;
			}
			a:active{
				color: mediumvioletred;
			}
			
			input:focus{
				background: #BC8F8F;
			}
			p:first-child{
				font-size: 30px;
				color: firebrick;
			}
			li:first-child{
				color: slateblue;
			}
			q:lang(no){
				color: cornflowerblue;
				font-size: 30px;
			}
			q:lang(zh){
				color: darkmagenta;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<a href="https://blog.csdn.net/weixin_40119412/article/details/103562086">html基础-图片标签</a>
		<br />
		<a href="https://blog.csdn.net/weixin_40119412/article/details/103561685">html基础-列表标签</a>
		<br />
		<a href="https://blog.csdn.net/weixin_40119412/article/details/103570161">htnl基础-表格</a>
		<br />		
		<a href="https://blog.csdn.net/weixin_40119412/article/details/103570404">html基础-表单</a>
		
		<form action="">
			姓名：<input type="text"/>
			<br />
			性别：<input type="radio" checked="checked" name="sex"/>男
			<input type="radio" name="sex"/>女
		</form>
		<p >reckon<q lang="no">interpre</p>
		<p>think<q lang="zh">interpre</p>
		<p>consider</p>
		<p>deem</p>
		
		<ol type="A">
			<li>vitical</li>
			<li>impotant</li>
			<li>essential,paramount</li>
		</ol>
		<div id="">
			<p>reckon</p>
			<p>think</p>
			<p>consider</p>
			<p>deem</p>
			</div>
	</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素选择器的使用</title>
		<style type="text/css">
			p:first-letter{
				font-size: 22px;
				color: saddlebrown;
				text-decoration:underline;
			}
			/*p:line{
				color: slateblue;
			}
			p:before{
				content: url(../img/bg.JPG);
			}
			p:after{
				content: url(../img/bg.JPG);
			}*/
		</style>
	</head>
	<body>
		<p>伪元素选择器：当选择器是类选择器时，为了限定某类元素，也可以在类选择器名前加上元素名，即将选择器名写成：元素名.类选择器名。</p>
		<p>
		伪类选择器说明：当选择器是类选择器时，为了限定某类元素，也可以在类选择器名前加上元素名，即将选择器名写成：元素名.类选择器名。				
		</p>
		<p>层叠样式表（Casading Style Sheet)是一种格式化网页的标准方式，用于设置网页的样式，并允许样式信息与网页内容分离的一种技术。</p>
		<p>元素选择器是最常用的一种选择器，元素选择器声明了网页中所有相同元素的显示效果</p>

	</body>
</html>

HaanLen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
第1篇：CSS基本选择器（CSS)

css介绍1、CSS（层叠样式表）是一种格式化网页的标准方式，用于设置网页的样式，并允许样式信息与网页内容分离的一种技术。2、好处：（1）将格式和结构分离（2）精确控制页面布局（3）制作体积更小、下载更快的网页（4）可以实现许多网页同时更新基本选择器元素选择器元素选择器是最常用的一种选择器，元素选择器声明了网页中所有相同元素的显示效果基本语法：HTML元素{...
复制链接

扫一扫

专栏目录