CSS引入方式和选择器

最新推荐文章于 2024-04-30 16:59:14 发布

成为一枚软男

最新推荐文章于 2024-04-30 16:59:14 发布

阅读量87

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/weixin_49097844/article/details/117530165

版权

1.1 引入方式（四种）

内联（行内）样式、内嵌（内部）样式、外链样式、导入样式

1.1.1 内联（行内）样式

标签样式 ,使用style属性来设置标题样式（在body内写入）

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

1.1.2 内嵌（内部）样式

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

<style type="text/css">
	h2{color:blue}
	</style>

1.1.3 外链样式

Link标签 ,使用style标签嵌套head标签内


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

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

1.1.4 导入样式

@import（）,使用style标签嵌套head标签内

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

1.1.5 引入方式的优先级

内联(行内)> 内嵌(内部)> 外链> 导入（不严谨） “就近原则”：哪个离要设置的标签或文件近

2.1 基本选择器

2.1.1 简单选择器

简单选择器	内容
标签选择器	根据标签名获取
id 选择器	根据 id属性进行获取。要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
类选择器	根据class属性进行获取。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
通用选择器	通配符*

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>基本选择器</title>
	<style type="text/css">
	/*通配符选择器------ * */
	*{color: red}
	/*标签选择器*/
	div{color: blue}
	/*id选择器------ #id的名字*/
	#first{color: black}
	#myprograme{background: yellow}

	/*类选择器------ .class的名字*/
	.name{color: green}
	</style>
</head>
<body>
	<div id="first" class="name">这是一个div</div>
	<p id="myprograme">这是一个p标签</p>
	<div class="username">这也是一个div</div>
	<h1>这是一个标签</h1>
	<hr>
</body>
</html>

2.1.2 基本选择器的优先级

id选择器>类选择器>标签选择器>通配符选择器

2.2 包含选择器

包含选择器	描述
子代选择器	获取某个标签的第一级子标签，“>”
后代选择器	获取某个标签里的所有子标签，“空格”
分组选择器	逗号选择器，使用逗号给多个标签设置样式，“，”

<!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,#myprograme,h1{color: red}
	</style>
</head>
<body>
	<div id="first" class="name">这是一个div</div>
	<p id="myprograme">这是一个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 属性选择器

<!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$="e"]{color: blue}
		/*表示下一个标签*/
		.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>

*= 确切到某一个值

^= 以 “e‘’ 作为开始

$= 以 “e‘’ 作为结束

msg+p 表示下一个标签

2.4 伪类选择器

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

伪类用于定义元素的特殊状态。它可以用于：

1.设置鼠标悬停在元素上时的样式

2.为已访问和未访问链接设置不同的样式

3.设置元素获得焦点时的样式

<!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="demo18.html">点击</a>
</body>
</html>

选择器	描述
:link	链接访问前的状态
:visited	链接被访问后的状态
:hover	鼠标悬停在链接上时的状态
:active	鼠标点击链接戴氏不松手时的状态