CSS样式引入方式和选择器

最新推荐文章于 2022-11-11 20:56:32 发布

@牛二

最新推荐文章于 2022-11-11 20:56:32 发布

阅读量170

点赞数 1

文章标签： web html css

本文链接：https://blog.csdn.net/qq_50931436/article/details/117589246

版权

1、什么是CSS?

CSS 指的是层叠样式表(Cascading Style Sheets),也称级联样式表;

2、层叠样式表

2.1、引入方式

行内样式
内嵌样式
外链样式
导入样式

2.1.1、行内样式

行内样式（也称内联样式）可用于为单个元素应用唯一的样式

标签样式，行内样式在相关元素的 "style" 属性中定义

实例

<h2 style="color:pink">这是一个标题标签</h2>

2.1.2、内嵌样式

页面样式，内嵌样式是在 head 部分的 <style> 元素中进行定义。

实例

<style type="text/css"></style>

<!DOCTYPE html> 
<html lang="en">
 <head><meta charset="UTF-8">
 <title>样式</title> 
<style type="text/css">
 h2{color: blue }</style> 
</head> 
<body>
<h2>这是一个标题标签</h2> 
</body>
</html>

2.1.3外链样式

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义

把 css 的样式单独写在 .css 的文件中，通过 link 标签中的 href属性进行引入把 css 的样式单独写在 .css 的文件中，通过 link 标签中的 href 属性进行引入

实例

<link rel="stylesheet" type="text/css" href="">

2.1.4导入样式

导入式也是写在head标签内的style标签

@import()

<style type="text/css">
            @import url(文件名.css);
</style>

四种引入方式的优先级

行内、内嵌、外链、导入这种说法不严谨

引入方式的优先级应该遵循 “就近原则“；

3、选择器

3.1基本选择器

id选择器(根据id属性获取)
类选择器(根据class属性获取)
标签选择器(根据标签名获取)
通用选择器(根据通配符*)

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css">
		/*通用选择器*/
		*{
			color: red;
		}
		/*id选择器*/
		#p1{
			color: pink;
		}
		/*类选择器*/
		.p2{
			color: green;
		}
		/*标签选择器*/
		p{color: darkred;}
	</style>
</head>
<body>
	<p>这是一个p标签</p>
	<p id="p1">这是一个p标签,设置了id</p>
	<p class="p2">这是一个p标签,设置了类名</p>
	<p>这是一个p标签</p>
	<p>这是一个p标签</p>
</body>
</html>

四种基本选择器的优先级

id 类标签通用(从大到小)

我认为越具体的优先，越广泛的越不优先

3.2包含选择器

子代选择器（获取某个标签的第一级子标签）
后代选择器（获取某个标签里的所有子标签）
分组选择器（逗号选择器，使用逗号给多个标签设置样式）

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
	<style type="text/css">
		/*子代选择器*/
		.user>.user1{
			border: 2px solid red;
		}
		/*后代选择器*/
		.user li{
			border:2px solid blue;
		}
		/*分组选择器(逗号选择器)*/
		.username,#username1,.username2{
			border: 1px dotted pink;
		}

	</style>
</head>
<body>
	<div class="username">这是一个div</div>
	<div id="username1">这也是一个div</div>
	<p class="username2">这是一个p标签</p>
	<div class="user">
		<ul class="user1">
			<li>列表数据1</li>
			<li>列表数据1</li>
			<li>列表数据1</li>
			<li>列表数据1</li>
			<li>列表数据1</li>
		</ul>
		<ul class="user2">
			<li>列表数据2</li>
			<li>列表数据2</li>
			<li>列表数据2</li>
			<li>列表数据2</li>
			<li>列表数据2</li>
		</ul>
		<ul class="user3">
			<li>列表数据3</li>
			<li>列表数据3</li>
			<li>列表数据3</li>
			<li>列表数据3</li>
			<li>列表数据3</li>
		</ul>
	</div>
</body>
</html>

3.3属性选择

实例

<!DOCTYPE html> 
<html lang="en">
 <head><meta charset="UTF-8"> 
<title>属性选择器</title> 
<style type="text/css"> 
/* 某个标签里面的某个属性值 */
 .container[class]{ color:red; }
/* div[title]{ color: red } */ 
/* 确切到某一个值 */ 
input[type*="e"]{ color: red }
/* 以什么为开始 */ 
input[type^="e"]{ color: blue }
/* 以什么为结束 */
 input[type$="rl"]{
 color: green 
}
/* 表示下一个标签 */
.msg+p{ color: yellow }
/* 属性名称可以等于某一个值 */
 [title="这是一个标题"]{ color: blue }
</style> 
</head>
<body>
<div class="container">这是一个div</div> 
<div title="这是一个标题">这是第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="王五"> 
<input type="url" name="" id="" value="李四"> <hr>
<div class="msg">这是第三个div</div> <p id="msg2">这是一个段落</p>
</body> 
</html>

3.4伪类选择器

同一个标签，不同的状态，有不同的样式，这就叫做"伪类"。伪类是使用冒号表示 时候的样式

:link -------- 链接点击之前
:visited ------- 链接被访问过后
:hover ------- ”悬停“ 鼠标放到标签上
:active ------ "激活" 鼠标点击标签但是不松手
:focus ------- 某个标签获得焦点

实例

<!DOCTYPE html> 
<html lang="en"> 
<head><meta charset="UTF-8"> 
<title>伪类选择器</title> 
<style type="text/css"> 
/* 让链接点击之前是红色 */ 
a:link{ color: red }
/* 让链接点击之前是橙色 */ 
a:visited{ color: orange }
/* 鼠标悬停时候是绿色 */ 
a:hover{ color: green }
/* 鼠标点击但是不松手的时候是蓝色 */ 
a:active{ color: blue }
</style> 
</head> 
<body><a href="#">点击</a> 
</body> 
</html>

注意：伪类选择器的顺序是固定