CSS样式引入与选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40933663/article/details/88077347

CSS的引入方式

1 CSS的行内方式

在每一个html标签中有style属性：里面书写样式

<div style="font-size:24px; xx:xx;"> xxx </div>

弊端：

样式代码和标签代码混合到一起，不利于维护；
每次只能修饰一个标签中的样式。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS入门</title>
	</head>
	<body>
		<div style="color:#F00;font-size:24px;background: lightskyblue;">div1的内容</div>
	</body>
</html>

结果展示：
在这里插入图片描述

2 内部方式

在head标签体中，去指定style标签

<style type="text/CSS">
    标签选择器/类选择器/id选择器{
        font-size:24px;
        xxx:xx;
    }
</style>

弊端：演示代码和标签代码混合到一起，不利于维护。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS入门</title>
		<style>
			div{
				color: lightskyblue;
				font-size: 25px;
				background: lightgoldenrodyellow;
			}
		</style>
	</head>
	<body>
		<div>举头望明月</div>
		<div>低头思故乡</div>
	</body>
</html>

结果展示：
在这里插入图片描述

3 外部方式（开发中，使用这种）

引入外部CSS文件（xx.css）
rel属性：关联层叠样式表

在head标签中<link href="xx.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入外部CSS文件-->
		<link href="外部方式.css" rel="stylesheet" />
	</head>
	<body>
		<a href="#">超链接</a><br />
		<a href="#">超链接</a><br />
		<a href="#">超链接</a><br />
	</body>
</html>

外部方式.css：

a{
	color: blue;
	font-size: 20px;
	/*字符间距*/
	letter-spacing: 10px;
}

结果展示：
在这里插入图片描述

CSS选择器

1 标签（元素）选择器

内部方式：
    标签名称 {
        书写样式；
    }

2 类选择器

特点：多个标签中可以指定同名的class属性值。
类选择器的优先级高于标签选择器

在标签中指定class属性 <div class="dl"></div>
<syle>
    .dl{
        书写样式;
    }
</style>

３ ID选择器

特点：在标签中指定ID属性（每个标签的id属性是唯一的），解决浏览器兼容问题
id选择器优先级高于类选择器，高于标签选择器

在标签中指定id属性 <div id="dl"></div> 
<style>
    #dl{
        书写样式;
    }
</style>

4 并集选择器

在标签中指定id属性 <div class="dl" id="m"></div> 
<style>
    .dl,#m{
        书写样式;
    }
</style>

5 交集选择器

选择器和选择器之间用空格隔开。

在标签中指定id属性 <div class="dl"><span></span></div>
<style>
    div span{
        书写样式;
    }
</style>

6 通用选择器

*{
    书写样式;
}

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/*标签选择器*/
			div{
				color: #0000FF;
				font-size: 20px;
			}
			
			/*类选择器
			 * 特点：多个标签中可以指定同名的class属性值
			 *类选择器的优先级高于标签选择器
			 * */
			.lei{
				color: bisque;
				font-size: 30px;
			}
			
			/*id选择器
			 * 特点：在标签中指定ID属性（每个标签的id属性是唯一的），解决浏览器兼容问题
			 * id选择器优先级高于类选择器，高于标签选择器*/
			#dl{
				color: aquamarine;
				font-size: 40px;
			}
			
			/*并集选择器*/
			.lei,#bing{
				color: beige;
				font-size: 50px;
			}
			
			/*交集选择器
			 * 选择器和选择器之间用空格隔开*/
			div span{
				color: cadetblue;
				font-size: 20px;
			}
			
			/*通用选择器*/
			*{
				color: darkseagreen;
				font-size: 15px;
				font-family: "楷体";
			}
		</style>
	</head>
	<body>
		<div>div1</div>
		<div class="lei">div2</div>
		<div class="lei" id="dl">div3</div>
		<div class="lei" id="bing">div4</div>
		<div class="lei"><span>span标签的内容</span>div5</div>
	</body>
</html>

结果展示：
1）标签/类/id选择器
在这里插入图片描述
2）并集选择器

3）交集选择器

7 伪类选择器

当前鼠标对标签的状态：

link状态：鼠标没有访问过的状态
hover状态：鼠标经过的状态
active状态：鼠标激活状态的状态：点击了，但是没有松开
visited状态：鼠标已经访问过了的状态（鼠标点击并且松开的）

（text-decoration:none——超链接没有下划线， text-decoration:underline——下划线）

注意：

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；
在 CSS定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类选择器的使用方式：

<style>
    a:link/hover/active/visited{
        书写样式
    }
</style>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS伪类选择器</title>
		<style type="text/css">
			/*link状态:没有访问过的状态*/
			a:link{
				font-size: 26px;
				color: blue;
			}
			/*visited:鼠标访问过的状态:点击了,并且松开的状态*/
			a:visited{
				font-size: 26px;
				color: #CCC;
				text-decoration: none;
			}
			
			/*鼠标经过的状态:hover*/
			a:hover{
				font-size: 26px;
				color: yellowgreen;
				/*css的文本修饰*/
				text-decoration:none ;
			}
			/*active:鼠标激活状态:点击了,但是没有松开*/
			a:active{
				font-size: 36px;
				color: #F00;
				text-decoration: underline;
			}
			
		</style>
	</head>
	<body>
		<!--
			伪类选择器的使用方式:
			     <style>
			     	  a:link/hover/active/visited{
			     	  	  书写样式
			     	  }
			     </style>
		-->
		<a href="CSS选择器.html">跳转链接</a>
	</body>
</html>