css样式引入方式和选择器

一.css样式引入方式

1.引入方式

1.1行内样式

行内样式也是标签样式,结合style,再加上对应样式。
行内样式添加在要修改样式的标签位置

<h1 style="color:red">标题标签</h1>
在h1标题里添加 style="color:red"对样式进行设置

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内样式</title>

</head>
<body>
	<h1 style="color:red">标题标签</h1>
	<!--style行内样式 -->
</body>
</html>

结果:
在这里插入图片描述

1.2内嵌样式

页面样式,使用style标签嵌套head标签内

<style type="text/css">(样式设置)</style>
添加到head部分即可

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内嵌样式</title>
	 <style type="text/css">
	h1{
	color: blue;
	}
	</style> 
</head>
<body>
	<h1 >标题标签</h1>
</body>
</html>

结果:
在这里插入图片描述

注意:style里设置的样式标签与body里的标签要一致!

1.3外链样式

外链样式是在head内使用link标签,把css的样式单独写在.css的文件中,通过link标签中的href属性进行引入。

<link rel="stylesheet" type="text/css" href="../css/css.css">
注意:文件的地址根据你css文件位置修改。

外链样式与内嵌样式比较
相同之处:它们都是在head内的。
不同之处:内嵌样式是在style里设置样式,外链样式是在link里引用css文件设置的样式。

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外链样式</title>
	<link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<body>
	<h1>外链</h1>
</body>
</html>

css文件代码:

h1{
	color: yellow

}

结果:
在这里插入图片描述

1.4导入样式

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

导入样式与外链样式的操作十分相似,它们都是引用css文件设置的样式。

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

不同是它导入使用的是@import url("…\css\css.css")引用

html代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导入样式</title>
	<style type="text/css" >@import url(../css/css.css);</style>
</head>
<body>
	<h1>导入</h1>
</body>
</html>

css文件代码:

h1{
	color: yellow

}

结果:
在这里插入图片描述

1.5注意

1.1优先级

上述四种引入方式样式是有优先级的!
理论上认为优先级从高到低为:行内样式 > 内嵌样式 > 外链样式 > 导入样式
其实这并不严谨
在实际操作上优先级是:就近原则
一下代码大家可以拿去检验一下就会有深刻体会了:
优先级测试html代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内样式</title>
	<!-- 内嵌样式 -->
	<style type="text/css" >
	h1{color: blue;}
	</style>
	<!-- 外链样式 -->
	<link rel="stylesheet" type="text/css" href="../css/css1.css">
	<!-- 导入样式 -->
	<style type="text/css" >
	@import url(../css/css2.css);
	</style>
</head>
<body>
	<!--行内样式 -->
	<h1 style="color:red">标题标签</h1>
	
</body>
</html>

优先级测试css1代码示例:

h1{
	color: yellow

}

优先级测试css2代码示例:

h1{
	color:green

}

希望通过上述测试能对你对基本选择器有更深了解
注意:大家在测试的时候注意css文件地址是否正确!

1.2地址

<link rel="stylesheet" type="text/css" href="../css/css1.css">
<style type="text/css" >@import url(../css/css2.css);</style>

这两个地址都是相对路径(大家根据自己文件位置修改),另外注意地址文件分格为/(左斜杠)不是\(右斜杠)

二.选择器

2.1基本选择器

2.1.1标签选择器

标签选择器根据标签名获取。
它在style里要在前加标签名进行选择

div{color:blue} 

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 
div{
color:blue
}  

	</style>
</head>
<body>
	<div id="first">这是一个div</div>
</body>
</html>

结果:
在这里插入图片描述

2.1.2id选择器

id选择器根据id属性进行获取。
它在style里对id属性选择时要在前加#进行选择

#first{background: yellow}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 
/* id选择器 ——加#号 */
#first{
	background: yellow
}

	</style>
</head>
<body>
	<div id="first" >这是一个div</div>

</body>
</html>

结果:
在这里插入图片描述

2.1.3类选择器

类选择器根据class属性进行获取
它在style里对class属性选择时要在前加 . (点)进行选择

.name{color: blue}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 

	.name{
		color: green
	}
	</style>
</head>
<body>
	<div class="name">这是一个div</div>
</body>
</html>

结果:
在这里插入图片描述

2.1.3通用选择器

通用选择器根据 * 号进行获取。(不建议)
通用选择器是对所有的属性进行选择设置

*	{color: red}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 

*	{
	color: red
	}	 */
/
	</style>
</head>
<body>
	<div id="first" class="name">这是一个div</div>
	<p id="my">这是一个P标签</p>
	<div class="username">这也是div</div>
	<h1>这是一个标签</h1>
	<hr/>
</body>
</html>

结果:
在这里插入图片描述

2.1.4基本选择器优先级

上述四种基本选择器是有优先级的!
优先级:id选择器 > 类(class)选择器 > 标签选择器 >通配符选择器 (style属性 )
优先级测试html代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css"> 
/*  通配符选择器  全部都会使用,用*号选择 */
	*{
	color: red
	}
/* 标签选择器  用要修改的标签名字选择  */
	div{
		color:blue
	}
/* id选择器  用#号选择 */
	#name{
	color: green
	}
/* 类选择器——用于class,加.号选择   */
	.name{
		color: khaki
	}
	/* 基础选择器的优先级?
	优先级:id选择器 > 类(class)选择器 > 标签选择器  >通配符选择器 (style属性 )
	 */
	</style>
</head>
<body>
	<div id="name" class="name" >这是一个div</div>
	<hr/>
</body>
</html>

希望通过上述测试能对你对基本选择器有更深了解

2.2包含选择器

2.2.1子代选择器

子代选择器获取某个标签的第一级子标签

div.user>ul{
			border-style: solid;
			border-color: green;
		}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
	<style type="text/css">
		/* 子代选择器 */
		div.user>ul{
			border-style: solid;
			border-color: green;
		}/* >这个是大于符号 */

	</style>
</head>
<body>
	<div id="first" class="name">这是一个div</div>
	<p id="my">这是一个P标签</p>
	<div class="username">这也是div</div>
	<h1>这是一个标签</h1>
	<hr/>
	<div class="user">
		<ul>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
		</ul>
		
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
	
	</div>
</body>
</html>

结果:
在这里插入图片描述
注意:其中 > 符号这个是大于符号

2.2.2后代选择器

后代选择器获取某个标签里的所有子标签

.user li{
			border-style: solid;
			border-color: red;
		}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
	<style type="text/css">
		/* 后代选择器 */
		.user li{
			border-style: solid;
			border-color: red;
		}
	</style>
</head>
<body>
	<div id="first" class="name">这是一个div</div>
	<p id="my">这是一个P标签</p>
	<div class="username">这也是div</div>
	<h1>这是一个标签</h1>
	<hr/>
	<div class="user">
		<ul>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
		</ul>
		
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
	
	</div>
</body>
</html>

结果:
在这里插入图片描述

2.2.3分组选择器

分组选择器也叫逗号选择器,使用逗号给多个标签设置样式

.name,#my,h1
{		color: khaki    }

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
	<style type="text/css">

		/* 分组选择器(逗号选择器) */
		.name,#my,h1{
			color: khaki
		}/* 逗号隔开 */
	</style>
</head>
<body>
	<div id="first" class="name">这是一个div</div>
	<p id="my">这是一个P标签</p>
	<div class="username">这也是div</div>
	<h1>这是一个标签</h1>
	<hr/>
	<div class="user">
		<ul>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
		</ul>
		
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
	
	</div>
</body>
</html>

结果:
在这里插入图片描述
注意:每个标签用 ,(逗号)隔开

2.2.4包含选择器整体效果

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>包含选择器</title>
	<style type="text/css">
		/* 子代选择器 */
		div.user>ul{
			border-style: solid;
			border-color: green;
		}/* >这个是大于符号 */
		/* 后代选择器 */
		.user li{
			border-style: solid;
			border-color: red;
		}
		/* 分组选择器(逗号选择器) */
		.name,#my,h1{
			color: khaki
		}/* 逗号隔开 */
	</style>
</head>
<body>
	<div id="first" class="name">这是一个div</div>
	<p id="my">这是一个P标签</p>
	<div class="username">这也是div</div>
	<h1>这是一个标签</h1>
	<hr/>
	<div class="user">
		<ul>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
		</ul>
		
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
			<li>这是数据</li>
	
	</div>
</body>
</html>

结果:

在这里插入图片描述

2.3属性选择

2.3.1选择器用于选取带有指定属性的元素

选择 某个标签里面的某个属性值

.container[class]{
color:red;
}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">

	/* 某个标签里面的某个属性值 */
	.container[class]
	{color: red;}
	 div[title]
	{color: green;} 

	</style>

</head>
<body>
	<div class="container">这是一个div</div>
	<!-- container:容器  单词-->
	<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>

结果:
在这里插入图片描述

2.3.2 选择器选取属性值包含指定词的元素。

选择 确切到某一个值

input[type*="e"]{
color: red
}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">


	input[type*="e"]{
	color: red
	}
	
	</style>

</head>
<body>
	<div class="container">这是一个div</div>
	<!-- container:容器  单词-->
	<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>

结果:
在这里插入图片描述

结果显示的是type类型里面含e的类型的值。
提示:值不必是完整单词!
同时可以运用于选取指定属性以指定值开头的元素。

2.3.3选择器用于选取指定属性以指定值开头的元素。

选择 以什么为开始

input[type^="e"]{
color: blue
}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	/* 以什么为开始 */
	input[type^="e"]
	{color: blue;}
	</style>
</head>
<body>
	<div class="container">这是一个div</div>
	<!-- container:容器  单词-->
	<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>

结果:
在这里插入图片描述

2.3.4 选择器用于选取指定属性以指定值结尾的元素。

选择 以什么为结尾

input[type$="rl"]
	{color: green;}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	/* 以什么结束 */
	input[type$="rl"]
	{color: green;}
	</style>

</head>
<body>
	<div class="container">这是一个div</div>
	<!-- container:容器  单词-->
	<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>

结果:
在这里插入图片描述

2.3.5 选择器用于选取指定属性下一个属性的元素。

选择 下一个标签

.msg+p
	{color: yellow;}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	/* 表示下一个标签 */
	.msg+p
	{color: yellow;}/* 实际上运用在它下一个p标签id="img2" */
	</style>
</head>
<body>
	<div class="container">这是一个div</div>
	<!-- container:容器  单词-->
	<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>

结果:
在这里插入图片描述

实际上运用在它下一个p标签id=“img2”

2.3.6 选择器用于选取属性名称相等的元素。

选择 属性名称可以等于某一个值

[title="这是一个标题"]
	{color:  khaki;}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
	/* div[title]
	{color: red;} */
	/* 属性名称可以等于某一个值 */
	[title="这是一个标题"]
	{color:  khaki;}/* 使用这个要把前面的div[title]注释掉 */
	</style>

</head>
<body>
	<div class="container">这是一个div</div>
	<!-- container:容器  单词-->
	<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>

结果:
在这里插入图片描述

注意:使用这个要把前面的div[title]注释掉

2.3.7属性选择器整体效果

代码示例:

<!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="text"] */
	/* 以什么为开始 */
	input[type^="e"]
	{color: blue;}

	/* 以什么结束 */
	input[type$="rl"]
	{color: green;}

	/* 表示下一个标签 */
	.msg+p
	{color: yellow;}/* 实际上运用在它下一个p标签id="img2" */

	/* 属性名称可以等于某一个值 */
	[title="这是一个标题"]
	{color:  khaki;}/* 使用这个要把前面的div[title]注释掉 */
	</style>

</head>
<body>
	<div class="container">这是一个div</div>
	<!-- container:容器  单词-->
	<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>

结果:
在这里插入图片描述

2.4 伪类选择器

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

属性描述
:link链接点击之前
:visited链接被访问过后
:hover”悬停“ 鼠标放到标签上
:active“激活” 鼠标点击标签但是不松手
:focus某个标签获得焦点时候的样式

更多详细内容可以参考网站:伪类

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
<!-- 同一个标签,不同的状态,不同的样式,这就叫做“伪类”。伪类是使用:(冒号)表示
	:link——链接点击之前
	:vlink——链接被访问过后
	:hover——"悬停"鼠标放在标签上
	:active——"激活" 
-->
	<style type="text/css">
	/* 让链接点击之前为红色 */
	a:link{color: red}
	/* 让链接点击之后为卡其色 */
	a:visited{color: khaki}
	/* 鼠标悬停时候是绿色 */
	a:hover{color: green}
	/* 鼠标点击不松手时候为蓝色 */
	a:active{color: blue}
	/* 注意:这四种状态不可以改编顺序,在css中这四个状态顺序是固定的 */
	</style>
</head>
<body>
	<a href="属性选择器.html" target="_blank">点击</a>
</body>
</html>

结果:
链接点击之前:在这里插入图片描述

鼠标悬停时候:在这里插入图片描述
鼠标点击不松手时候:在这里插入图片描述
链接点击之后:在这里插入图片描述

注意:如果开始颜色不为红色可能是浏览器缓存了记录,清空数据就可以了

2.4.1 注意伪类选择器四种状态顺序

在css中,这四种状态的顺序是固定的
:link------:visited-------:hover-----:active

2. 伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

css3中的伪元素

属性描述
::before伪元素可用于在元素内容之前插入一些内容
::after伪元素可用于在元素内容之后插入一些内容

css2中的伪元素

属性描述
:before伪元素可用于在元素内容之前插入一些内容
:after伪元素可用于在元素内容之后插入一些内容

更多可以查看网站:css 伪元素

::必须写content,content的取值就是你要添加的内容

p::before
{content: "s"}
p::after
{content: "_---A"}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪元素选择器</title>
	<style type="text/css">
		p::before{
			content: "s"
		}
		/* ::before在p标签前加内容,两个::必须加content:  | content取值就是你输入的内容 */
		p::after{
			content: "_---A"
		}
		/* ::after在p标签前加内容,两个::必须加content:  */

	</style>
</head>
<body>
	<p>这是一个段落</p>
</body>
</html>

结果:
在这里插入图片描述

三. 总结

本章对css中常用的引入样式和选择器进行了解说。引入样式中说明了常用四种引入样式并对他们优先级进行了思考 (引入样式优先级顺序遵循的“就近原则”要记忆)。选择器:四种基本选择器,三种包含选择器,属性选择,伪类选择器和伪元素选择器进行大致功能解说。 基本选择器优先级顺序:在css中,这四种状态的顺序是固定的
:link------:visited-------:hover-----:active 要记忆)
=

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值