《css的四种引入方式和选择器》

最新推荐文章于 2022-05-30 17:55:34 发布

弓长九日。。

最新推荐文章于 2022-05-30 17:55:34 发布

阅读量193

点赞数 2

文章标签： css

本文链接：https://blog.csdn.net/weixin_51746436/article/details/117526793

版权

1css有四种引入方式

css的四种引入方式
行内样式	直接在在标签内结合style加上样式
内嵌样式	style元素位于head标签内部，type属性指定CSS代码的文档类型。在style内定义样式
外链样式	把css的样式单独写在.css的文件中，通过link标签中的href属性进行引入
导入样式	把css的样式在写在.css的文件中，写在head标签内的style标签内

1.1行内样式

在某个元素内使用style属性引入样式，它只针对这个元素，而不会影响整个文件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 style="color: "red">这是第一个的引入方式</h1>
	<h1>这是第一个的引入方式</h1>
</body>
</html>

代码运行结果如下

1.2内嵌样式

在head内设置style元素，type属性指定CSS代码的文档类型。在style内用选择器设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	h1{
		color: blue;
	}
	</style>
</head>
<body>
	<h1>这是第二个的引入方式</h1>
</body>
</html>

代码运行结果如下

1.3外链样式

在css的文件中写如样式，在同过link内写入head引入，且必须有href属性，通过href指定css文件的路径。

css文件

h1{
	color: green;
}

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<h1>这是第三个的引入方式</h1>
	
</body>
</html>

代码运行结果如下

1.4导入样式

在css文件写入样式，通过@import在head引入。

css文件

h1{
	color: yellow;
}

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
@import url("1.css");
	</style>
</head>
<body>
	<h1>这是第四个的引入方式</h1>
	
</body>
</html>

运行结果如下

2选择器

2.1四种基本选择器

四种基本选择器
标签选择器	在style元素内写入标签，引入样式
id选择器	通过定义id属性进行获取
类选择器	通过class的属性进行获取
通用选择器	通过*定义样式

2.1.1标签选择器

指定标签，使标签内的内容具有样式。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		h1{
			color: pink;
		}
	</style>
</head>
<body>
	<h1>标签选择器</h1>
</body>
</html>

代码运行结果如下

2.1.2id选择器

在style元素内写入id的属性定义样式，需要在属性前叫#。标签一个id来加入样式。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#a{
			color: gray;
		}
	</style>
</head>
<body>
	<h1 id="a">id选择器</h1>
</body>
</html>

代码运行结果如下

2.1.3类选择器

在style元素内写入class的属性定义样式，需要在属性前叫.。标签通过class来加入样式。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.b{
			color: purple;
		}
	</style>
</head>
<body>
	<h1 class="b">类选择器</h1>
</body>
</html>

代码运行结果如下

2.1.4通用选择器

通配符可以匹配任意的标签。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			color:pink;
		}
	</style>
</head>
<body>
	<h1>通用选择器</h1>
</body>
</html>

代码运行结果如下

2.2包含选择器

子代选择器	用于指定目标选择器必须是某个选择器对应的元素的第一级子元素
后代选择器	用于指定目标选择器必须是某个选择器对应的元素的所以子元素
分组选择器	可以定义多个样式

2.2.1子代选择器

父类>子代的方式在style元素内定义子代。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
div>p{
	color: red;
}	
	</style>
</head>
<body>
<div>
<h1>子代选择器</h1>
<p>子代选择器</p>
</div>
</body>
</html>

代码运行结果如下

2.2.3后代选择器

用父类空格子代的格式在style元素内定义样式。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
.a li{
	color: green;
}	
	</style>
</head>
<body>
<div class="a">
<ul>
<li>子代选择器</li>
<li>子代选择器</li>
<li>子代选择器</li>
<li>子代选择器</li>
</ul>
</div>
</body>
</html>

代码运行结果如下

2.2.4分组选择器

用逗号隔开选择器，使这些选择器具有同样的样式。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	h1,p{
		color: pink;
	}
	</style>
</head>
<body>
<div >
<h1>分组选择器</h1>
<p>分组选择器</p>
</div>
</body>
</html>

运行结果如下

2.3伪类选择器

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

介绍部分选择器

:link选择器	链接点击之前的样式
:hover选择器	”悬停“ 鼠标放到标签上的样式
:visited 选择器	链接被访问过后的样式
:active 选择器	"激活" 鼠标点击标签但是不松手的样式

<!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="demo04.html">伪类选择器</a>
</body>
</html>

代码运行结果如下