行内样式：优先级最高，写在行内，确定代码量大，不利于修改
<div style="color: red">行内加字体样式为红色</div>
内部样式：耦合度降低，项目比较大的时候，会导致代码量很大，不利于团队开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
color: aqua;
font-size: 30px;
font-weight: bolder;
}
</style>
</head>
<body>
<div>内部样式</div>
</body>
</html>
外部样式：可以实现文件与样式分离，有益于团队合作，也可以实现样式公用
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="外部样式"/>
</head>
<body>
<div>外部样式</div>
</body>
</html>
css代码
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: orange;
color: aqua;
font-size: 30px;
font-weight: bolder;
}
Ⅰ 标签选择器
作用：根据指定的标签名，在当前界面中找到所有该名称的标签，然后设置属性。
格式：
标签名{
属性：值；
}
注意点：
- 标签选择器选定的是当前界面中所有该名称的标签，而不能单独选定某一标签；
- 标签选择器无论标签藏得多深都能找到；
- 只要是html中的标签都可以作为标签选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
color: orange;
background-color: aqua;
}
p{
font-size: 30px;
color: green;
}
span{
font-size: 50px;
color: aquamarine;
font-weight: bolder;
}
</style>
</head>
<body>
<div>这是div</div>
<p>这是p标签</p>
<span>这是span标签</span>
</body>
</html>
Ⅱ id选择器
作用：根据指定的id名称找到对应的标签，然后设置属性。
格式：
#id{
属性：值；
}
注意点：
- 每一个HTML标签都有id属性，也就是说每个标签都可以设置id；
- 在同一个界面中id是不可重复的；
- 在编写id选择器的时候id前一定要加#；
- id的名称是有一定的规范的。
4.1 id的名称只能有字母、数字、下划线组成；
4.2 id名不能以数字开头；
4.3 id名不能是关键字；
4.4 在企业开发中一般如果仅仅是为了设置样式，我们不会使用id，应为id是为了给js使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
color: orange;
background-color: aqua;
}
#p1{
font-size: 30px;
color: green;
}
#span1{
font-size: 50px;
color: aquamarine;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="div1">这是div</div>
<p id="p1">这是p标签</p>
<span id="span1">这是span标签</span>
</body>
</html>
Ⅲ 类选择器
作用：根据指定的类名称找到对应的标签，然后设置属性。
格式：
.类名{
属性：值；
}
注意点：
- 每一个HTML标签都有class属性，也就是说每个标签都可以设置class；
- 在同一个界面中class是不可重复的；
- 在编写id选择器的时候class前一定要加.；
- 类名的命名规范和id命名规范是一样的；
- 类名就是专门给某个特定的标签设置样式的；
- 在HTML中每个标签都可以同时绑定多个类名。
格式：
<标签名称 class=“类名1 类名2 …”>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 100px;
height: 100px;
color: orange;
background-color: aqua;
}
.div2{
font-size: 40px;
}
.p1{
font-size: 30px;
}
.p2{
color: green;
}
.span1{
font-size: 50px;
}
.span2{
color: aquamarine;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="div1 div2">这是div</div>
<p class="p1 p2">这是p标签</p>
<span class="span1 span2">这是span标签</span>
</body>
</html>
注：
一、id和class的区别
1.1
id相当于身份证，不可重复；
class相当于姓名，可以重复。
1.2
一个HTML标签只能绑定一个id属性
一个HTML标签可以绑定多个class属性
二、id选择器和class选择器的区别？
id选择器以#开头
class选择器以.开头
三、在企业开发中到底使用id选择器还是使用class选择器？
id一般情况下是给js使用的，所以除非特殊情况，否则不要用id去设置样式。
四、在企业开发中，一个开发人员对类的使用可以看出开发人员的水平如何。
一般情况下在企业开发中要注意代码的冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中。
然后让标签和类选择器绑定即可。
Ⅳ 特殊选择器
Ⅳ.Ⅰ 交集
给带有制定类名的标签设置属性
格式：
标签名.类名{
属性 : 值；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p.p1{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p class="p1">这是div2里的p</p>
<span class="span1">
<p class="p2">这是最内层的p</p>
</span>
</div>
<p class="p1">这是div1里的p</p>
</div>
</body>
</html>
Ⅳ.Ⅱ 并集
给所有选择器选中的标签设置属性。
格式：
选择器1，选择器2{
属性：值；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.p,.p1,.p2{
color: orange;
font-size: 30px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p class="p">这是div2里的p</p>
<span class="span1">
<p class="p2">这是最内层的p</p>
</span>
</div>
<p class="p1">这是div1里的p</p>
</div>
</body>
</html>
Ⅳ.Ⅲ 后代
找到指定标签的所有后代标签，设置属性。
格式：
标签名称1 标签名称2{
属性：值；
}
先找名称是标签名称1的标签，然后在这个标签下面找到名称是标签名称2的标签，（标签名称2不能是id名 class类名） 然后再设置属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div p{
color: orchid;
font-size: 25px;
}
.div2 span p{
color: red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p>这是div2里的p</p>
<span>
<p>这是最内层的p</p>
</span>
</div>
<p class="p1">这是div1里的p</p>
</div>
</body>
</html>
Ⅳ.Ⅳ 子元素选择器
作用：找到指定标签的所有特定直接子元素，设置属性。
格式：
标签名称1>标签名称2{
属性：值；
}
注意点：
- 子元素选择器只查找儿子，不查找其他嵌套的标签；
- 子元素选择器两个标签之间使用>来连接；
- 子元素选择器不仅可以使用标签，还可以使用其他选择器；
- 子元素选择器可以通过>一直延续下去。
注：
一、后代选择器和子元素选择器的区别？
后代选择器用空格连接；
子元素选择器用>连接。
2 .
后代选择器会指定后代标签中所有的特定后代标签；
子元素选择器只会选中指定标签中所有直接的子元素。
二、 后代选择器和子元素选择器的相同点？
-
子元素选择器和后代选择器都可以使用 标签名、类名、id名称来作为选择器；
-
后代选择器和子元素选择器都可以通过空格和>一直延续下去。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div>p{
color: orchid;
font-size: 25px;
}
.div2>span>p{
color: red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<p>这是div2里的p</p>
<span>
<p>这是最内层的p</p>
</span>
</div>
<p class="p1">这是div1里的p</p>
</div>
</body>
</html>
Ⅳ.Ⅴ 伪类
:hover用于把鼠标移动到元素上面时的效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
/*加入过渡效果*/
-webkit-transition: 0.4s all;
}
/*鼠标放上去*/
.div1:hover{
width: 300px;
height: 300px;
background-color: mediumspringgreen;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
:active用于点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 100px;
height: 100px;
background-color: red;
/*加入过渡效果*/
-webkit-transition: 0.4s all;
}
/*鼠标点击*/
.div1:active{
width: 600px;
height: 600px;
background-color: orange;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
:focus用于元素成为焦点，这个经常用在表单元素上。
3644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
