1.关系选择器
该篇应用的完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器t</title>
<style>
div p+div{
background-color: antiquewhite;
}
div p~ul{
background-color: aqua;
}
</style>
</head>
<body>
<div>
<p>div中的子元素p
<strong>
p标签的子元素strong
<em>strong 的子元素</em>
</strong>
</p>
<div>div的子元素div标签</div>
<ul>
div中的子元素ul
<li>列表项</li>
</ul>
<div>div的子元素div标签</div>
<ul>
div中的子元素ul
<li>列表项</li>
</ul>
<div>div的子元素div标签</div>
<ul>
div中的子元素ul
<li>列表项</li>
</ul>
</div>
</body>
</html>
完整运行结果如下:
1.1相邻兄弟选择器;
格式:兄弟+相邻兄弟
选择所有页面中紧接着p元素之后的第一个div元素。
1.2 兄弟选择器:
格式:兄弟~兄弟选择器
设置同一个div元素下的p元素之后的每一个ul元素的背景颜色。
2.css和行内样式
该篇应用的完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式和css</title>
<style>
h6{
font-size: 30px;
}
h4{
font-size: 20px;
}
P{
color: bisque;
}
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<p style ="color: blue;">中国空间站(天宫空间站,英文名称 China Space Station)是中华人民共和国计划中的一个空间站系统,预计在2022年前后建成。空间站轨道高度为400~450公里,倾角42~43度,设计寿命为10年,长期驻留3人,总重量可达180吨 [48] ,以进行较大规模的空间应用。 [1-2] 1992年,中国政府就制定了载人航天工程“三步走”发展战略,建成空间站是发展战略的重要目标</p>
<h1 style="font-size: 60px;">一级标题</h1>
<h6>六级标题</h6>
<h4>四级标签</h4>
</body>
</html>
完整运行结果如下:
2.1 css的使用方式:
2.1.1.内联样式:也叫行内样式/行间样式,在开始的标签内添加style属性并设置css样式。
例如:
2.1.2内嵌样式:也叫内部样式,在html中的head标签中添加并按照固定格式设置css样式
优点:可以重复使用代码。
例如:
2.1.3.外联样式:也叫外部样式,在外部创建一个css文件,在html中的head标签中通过list引入css文件
优点: 可以重复使用代码。
优先级:
1.正常情况下——行内样式——内部样式——外部样式
特殊情况:行内样式——内部样式/外部样式(按照在头标签里面的先后顺序,以浏览器的执行顺序判断优先级)。
3.css基本选择器
该篇应用的完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css基本选择器</title>
<style>
*{
font-size: 30px;
}
p{
color: rgb(188, 153, 143);
}
#first{
background-color: blue;
}
.first{
background-color: black;
}
.line{
font-size: 50px;
}
p#first.line{
background-color: rgb(127, 238, 255);
}
p,#box{
background-color: #ffc;
}
h4,span{
background-color: #ccf;
}
#box>div>h4{
color: aqua;
}
#box span{
color: red;
}
</style>
</head>
<body>
<p id="first" class="line first element">第一行</p>
<p class="line">第二行</p>
<p class="line">第三行</p>
<h4 class="line">第四行</h4>
<div id="box" class="box element">这是一个块
<div>
<h4>标题</h4>
<span>普通文本</span>
</div>
<span>普通文本</span>
</div>
<p>段落</p>
</body>
</html>
完整代码运行结果如图所示:
3.1 css的基本选择器
3.1.1 class和id的区别:
1.前缀不同:在css中class以“.”为前缀,id以“#”为前缀。
2.class类可以添加多个类名,中间以空格隔开。id名只能有一个。
3.id的优先级:给同一元素同时使用class类名设置相同的css样式,优先执行id选择器内 的css样式。
4.id唯一性:在js中一整个页面中一个id只能出现一次。
3.1.2 css选择器的优先级从高到低排位为:
1.id选择器 #myid
2.类选择器 .myclassname
3.标签名选择器 div,p
4.子选择器 <
5.后代选择器 li a
6.伪类选择器 a:hover
最后,需要注意的是:
!important的优先级最高;
优先级相同的时候,采用就近原则,选择最后出现的样式;
继承的来得属性,其优先级最低。
3.2 各个选择器以及标签的使用;
3.2.1
通配符选择器: 选择页面中所有的标签。
3.2.2
标签名选择器: 选择页面中所有标签名为p的标签。
3.2.3
兄弟选择器:也叫并集选择器,同时选择多个标签,设置相同的样式。
格式:兄弟+兄弟
地位平等,给两个或者多个元素设置相同的css样式时使用(节省代码空间)。
3.2.4
class选择器:选中页面中包含line的元素。
格式:.+class
3.2.5 选择页面中id值为first并且class值包含line的p元素
3.2.6
子选择器:在嵌套中通过外层元素一层一层的找到某个后代元素。
格式:父元素>子元素 子元素<父元素
>指向子元素
3.2.7
后代选择器/祖孙选择器:在嵌套中通过外层元素直接找到/一层一层找到某个后代元素。
格式: 祖先元素 后代元素
3.2.8 标签的id属性,是这是标签在本页面中唯一的标识符,所以页面中不应该有两个元素的id值相同。
3.2.9 标签的class属性,表示标签的类型,标签的class属性可以有多个值,多个值之间以空格隔开。