一.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 要记忆)=