CSS样式引入方式&选择器

最新推荐文章于 2023-08-02 23:14:04 发布

熬夜且瞌睡

最新推荐文章于 2023-08-02 23:14:04 发布

阅读量478

点赞数 1

分类专栏： web前端文章标签： css html web

本文链接：https://blog.csdn.net/qq_50646296/article/details/117533448

版权

web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

引入方式

CSS的引入方式一般有四种，分别是行内样式，内嵌样式，外链样式，导入样式，具体使用哪种可根据具体情况和个人习惯而定

行内样式

在标签里面结合style,在加上相对应的样式

<p style = "color:red" > 这是一个p标签 </p>

内嵌样式

在页面样式里面，在head标签里面使用style标签，在style标签里面设置样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		p{
			color: green;
		}

	</style>
</head>
<body >
	<p>这是一个p标签</p>
</body>
</html>

运行结果如下：

外链样式

link标签写在head标签内，通过href=".css"的方式引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="001.css">
</head>
<body >
	<p>link标签是我最常用的</p>
</body>
</html>

运行结果如下

导入样式

导入样式与内嵌样式写入的位置相同，都是写在head的style标签中，通过导入外部的css来设置页面的样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style type="text/css">
			@import url(001.css)
		</style>
</head>
<body >
	<p>link标签是我最常用的</p>
</body>
</html>

运行结果如下：

引入方式的优先级

一般为行内 > 内嵌 > 外链 > 导入（不严谨）,优先级根据就近原则

通过上面的讲解，CSS的基本四个的引入方式就这些，需要注意的是它们的使用时的位置

CSS的选择器

CSS选择器用的最为广泛的为以下四种：

1.标签选择器（根据标签名获取）

2.id选择器（在标签内设置id，再根据id属性获取）

3.类选择器（与id选择器类似，在标签内设置class，在根据class属性获取）

4.通用选择器（不建议使用）（用*代替全部）

注：选择器的优先级为：id > 类 > 标签 > 通配符

标签选择器是根据标签名来设置相应标签内的属性：

如设置p标签内的格式，使用方式如下：

p {
  text-align: center;
  color: red;
}

id选择器是在标签内设置id属性来进行设置

如设置标签内含有id="para1"的属性：

#para1 {
  text-align: center;
  color: red;
}

类选择器是在标签内设置class属性进行控制

如设置标签内含有class="center"的属性：

.center {
  text-align: center;
  color: red;
}

通配符选择器是作用于整个<body>里面，使用方式如下：

* {
  text-align: center;
  color: blue;
}

这将作用于整个<body>里面

CSS伪类

css伪类用于定义元素的特殊状态

例如：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}