css样式引入方式和选择器

最新推荐文章于 2021-06-06 11:00:42 发布
最新推荐文章于 2021-06-06 11:00:42 发布
阅读量287 收藏
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Miracle_ze/article/details/117448428
版权

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 要记忆）=

Miracle_ze
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS从入门到精通——基础知识
qq_42212132的博客
07-31 2647
一个简单的实例 首先，我们来下一个简单的实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> body ...
web头歌 CSS样式规则
最新发布
m0_74243656的博客
12-18 706
三、用内嵌式引入CSS样式。四、用外链式引入CSS。
CSS样式的三种引入方式
克豪的博客
12-20 2542
css引入方式 1 css引入方式一_行内 行内样式: 在HTML标签中添加属性 style="属性:属性值" 作用域最小,作用当前标签; 行内样式的优先级最高 <body> <h3 style="color: red;">h3标签</h3> <h3>哈哈</h3> </body> 2 css引入方式二_内部 内部样式: 在HTML页面里面写CSS代码, 一般写在中, 使用标签 style, 属性: ty
前端之css引入方式和样式
上善若水
09-20 920
一,css三种引入方式 1,行间式 (1)在标签头部的style属性内 (2)属性值满足的是css语法 (3)属性值用key:value形式赋值,value具有单位' (4)属性值之间用;隔开 &lt;div style="width: 100px; height: 100px; background-color: red"&gt;&lt;/div&gt; 2,内联式 (1)在...
CSS的三种引入方式
无糖加冰
11-06 4131
【CSS】CSS(凡境—大圆满)——CSS的三种引入方式(附带凡境汇总案例) 学完前期和中期我们来看看凡境最后的一个知识点! CSS的三种引入方式 行内样式表 行内样式表就是在元素标签内部设置style属性来设置CSS样式 选择器在style标签中 <标签 style="属性:属性值;"></标签> 内部样式表 内部样式表也是选择器放在style中 然后在HTML文档的head中书写 一般在平时练习的时候使用内部样式表 <标签 style="属性:
CSS 样式的使用方式、选择器
12-13
元素中定义css样式 <style> p{font-size: 20px;color: red} </style> 3、外部样式：在css文件中定义css样式，然后在html的<head>中通过<style>引入外部样式表 p{font-size: 20px;color: ...
网页引入css样式的几种方法
09-25
网页引入CSS样式是构建网页外观的关键步骤，有多种方法可以实现这一目标，下面将详细介绍内联式、嵌入式、外链式以及导入式四种方式。 1. 内联式样式表： 内联式样式是将CSS直接写在HTML元素的`style`属性中，例如...
CSS3 选择器 属性选择器介绍
12-13
属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS...
前端css选择器练习diner.zip
04-22
6. **CSS3新选择器**：除了基础选择器外，CSS3引入了更多高级选择器，如`nth-child()`、`nth-of-type()`、`not()`、`matches()`等，它们增强了对元素选择的精确度和灵活性。 在"css-diner"练习中，你将有机会亲手...
Css基本概念及其引入方式介绍
09-25
- **选择器和声明** CSS规则由两部分组成：选择器（Selector）和声明（Declaration）。选择器指定了我们要修改的HTML元素，声明则包含了一个或多个属性-值对。例如： ```css h1 { color: red; font-size: 14px;...
CSS 选择器及各样式引用方式
weixin_34408717的博客
07-19 464
　　Css ：层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素。 目录 1. 选择器的分类：介绍ID、class、元素名称、符合、层次、伪类、属性选择器。 2. 样式调用方式：介绍外部、内部、内联等调用方式。 3. 样式的优先级：介绍调用样式的优先级。   1. 选择器的分类 语法结构   1.1 Id选择器 1.1.1 格式 　　...
CSS基础(part1)--引入CSS的方式
小山羊的学习日志
06-28 326
学习笔记，仅供参考，有错必纠 文章目录CSSCSS的定义引入CSS的方式行内样式嵌入样式外联CSS样式导入样式 CSS CSS的定义 什么是CSS？ CSS 指层叠样式表 (Cascading Style Sheets)，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以
css引入方式和选择器
ZGQ_YF的博客
09-23 257
Css四种引入方式： 行内式 通过html属性style实现，如下所示 //写在body标签中 <span style="color:red;">行内式</span> 嵌入式 在style标签中写css样式，在body中引用 1.内嵌式引入 直接在页面的标签里加　<div style="border:1px red solid;">测试信息</div> 2.放在head里面 <style type="text/css"..
导入式CSS样式
前景
10-28 6621
3  《关山月》 一、案例描述 考核知识点 导入式CSS样式 练习目标 熟练运用标记选择器控制元素。 掌握CSS导入式的引用方法。 需求分析 通过前两个案例，我们知道了两种引入CSS样式表的方法，下面将介绍另一种引入CSS样式表的方法：导入式。同时，还将介绍一种新的基础选择器—标记选择器。本案例通过使用标记选择器来控制元素，并运用CSS导入式的方法来输出一首诗《关山月》。 案例分析 效果...
【CSS】样式表
进击的巨人--小天贵
04-03 1357
CSS初识CSS(Cascading Style Sheets) 美化样式CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。引入CSS样式...
【网站前端】第10章 CSS引入样式
Seven Yang
12-13 170
本文为黑马程序员pink老师前端视频整理所得的学习笔记。
CSS样式引入方式和选择器
weixin_58463882的博客
06-06 233
　　CSS中可以通过三种方法引入样式表： 　　（1）内联样式 　　（2）嵌入式样式 　　（3）外部样式
css：样式引入方式和选择器
wangwc124的博客
06-05 208
一.样式引入方式 1.引入方式种类：①行内样式 内嵌样式 外链样式 导入样式
CSS深度解析：语法、引入方式与选择器详解
CSS的语法结构主要包括选择器和声明。选择器是用来定位HTML元素的，而声明则是指明选择器应用的具体样式。例如： ```css selector { property: value; } ``` 这里的选择器可以是元素名、ID、类名等，而声明则由...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值