css的层叠样式

最新推荐文章于 2024-09-29 20:51:43 发布

俗庸203

最新推荐文章于 2024-09-29 20:51:43 发布

阅读量4.3k

点赞数 30

文章标签： html 前端 css3

本文链接：https://blog.csdn.net/D2961953033/article/details/121568645

版权

1 css的层叠样式有四种：

行内样式

内嵌样式

外链样式

导入样式

1.1行内样式

行内样式又叫做标签样式，它是在标签里面加上style属性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<body>
<h2 style="color:red;text-align:center">这是行内标签</h2>
</body>
</html>

1.2内嵌样式

它的样式写在style标签里面（style标签是要写在head标签里面的喔）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
h2{
color:blue;
text-align:center;
}
</style>
<body>
<h2>这是内嵌标签</h2>
</body>
</html>

1.3外链样式

用外链样式需要以下三个步骤：

第一步：新建一个css的文件，专门用来写css样式

第二步：head标签内写入link标签（link标签可以存在body标签里面，一般不推荐使用）

第三步：link里herf属性将css文件引入（路径：用绝对路径和相对路径都可以的）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" type="text/css" href="输入路径">
<body>
<h2>这是外链标签</h2>
</body>
</html>

1.4导入样式

也是写在style当中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
@import url("输入路径");
</style>
<body>
<h2>这是导入标签</h2>
</body>
</html>

2.选择器

2.1基本选择器

有四种：

标签选择器

ID选择器

类选择器

通用选择器（通配符选择器）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*标签选择器*/
h2{
color:blue;
}
/*id选择器*/
#dddd{
color:yellow;
}
/*类选择器*/
.zzzz{
color:green;
}
/*通配符选择器*/
*{
color:red;
}
</style>
<body>
<h2>这是游戏</h2>
<p id="dddd">这是电视</p>
<div class="zzzz">这是一个div</div>
<div>这是第二个div</div>
<p>这是第二个游戏</p>
</body>
</html>

2.2包含选择器

包含选择器这里介绍三个：

名称	释义
子代选择器	获取某个标签的第一级子标签
后代选择器	获取某个标签内的所有子标签
分组选择器	也叫作逗号选择器，可以给多个标签加上样式，通过逗号隔开

/*这是注释*/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*子代选择器*/
.dddd>ul{
color:blue;
}
/*后代选择器*/
#dddd li{
color:yellow;
}
/*分组选择器*/
h2,.dddd,#dddd{
color:green;
}
</style>
<body>
<h2>这是标签</h2>
<p id="dddd">这是电视</p>
<div class="dddd">
<ul>
<li>飙速宅男1</li>
<li>飙速宅男2</li>
<li>飙速宅男3</li>
<li>飙速宅男4</li>
<li>飙速宅男5</li>
</ul>
<li>飙速宅男6</li>
<li>飙速宅男7</li>
<li>飙速宅男8</li>
<li>飙速宅男9</li>
</div>
</body>
</html>

2.3属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*选中某个标签的某个属性*/
div[title]{
color:red;
}
/*确切的等于*/
input[type="text"]{
background:pink;
}
/*某个属性含有某个值*/
input[type="e"]{
background: red;
}
/*某个属性以什么开始*/
input[type^="e"]{
background: green;
}
/*某个属性以什么结束*/
input[type$="rl"]{
background: blue;
}
/*表示下一个标签*/
.dz+{
color:red;
}
/*属性名称等于某个值*/
[title="这是一个标题"]{
color:yellow;
}
</style>
<body>
<div title="dd">这是个div</div>
<p class="zz">这是段落</p>
<input type="text" id="" class="" value="小明">
<input type="url" id="" class="" value="小红">
<input type="email" id="" class="" value="小绿">
<div class="dz">这是二个div</div>
<div title="这是一个标题">这是三个div</div>
<p id="ddzz">这是另一个段落</p>
</body>
</html>

2.4伪类选择器

在同一个标签内，根据不同的状态，有不同的样式，这就叫做伪类，使用的是冒号：表示

属性	释义
link	超链接点击之前的样式
visited	链接被访问后
hover	悬停，鼠标放到标签上的样式
active	被激活的时候，鼠标点击的时候，但是是在不松手的情况下
focus	某个标签获得焦点的时候

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/*让超链接点击之前是蓝色*/
a:link{
color:blue;
}
/*让超链接点击之前是绿色*/
a:visited{
color:green;
}
/*让鼠标悬停时，放到标签上是粉色*/
a:hover{
color:pink;
}
/*让鼠标点击链接不松手的时候是橙色*/
a:active{
color:orange;
}
</style>
<body>
<a href="https://www.baidu.com/">点击我</a>
</body>
</html>