金石砺身，赤焰淬魄，困燥褪去，幽玄寒锋，神兵天成
前端的学习总是繁多而细腻，需要去背诵记忆，不可好高骛远，眼高手低，切记切记
今日学习内容如下：
目录
网页
分成三个部分
结构，表现 （外在显示的样子），行为
结构就是html，即在html文件中的代码，大概由20个左右标签组成
表现即是css，是html表现在网页中内容的进一步修改美观
css -层叠样式表 -设置网页中元素的样式
网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式，而最终我们能看到的只有最上边的一层
css有三种书写方法
第一种书写方式：内联样式/行内样式（不推荐使用）
即在body里写style样式，如下
<body>
style="width: 200px; height: 100px; background-color: pink;"
<div ></div>
</body>
不推荐使用原因：
- 权重太高
- 结构和样式耦合
- 不方便修改
第二种书写方式：内部样式表（小的项目可以使用）
即在head里写style样式，与html的body部分分开写，如下
<!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>Document</title>
<style>
</style>
</head>
<body>
<div ></div>
</body>
</html>
不推荐写大项目原因
- 会导致html文件过长过多
- 不方便复用
第三种书写方式：外部样式表（推荐使用）
即另创建一个css文件，通过在html里link使得html与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>Document</title>
<link rel="stylesheet" href="./1.css">
</head>
最推荐使用，初学者要多多习惯使用，后期全都是使用外部样式表写css
另注意，一般一个成熟的项目应有
css文件夹，img文件夹（图片素材），js文件夹（还没学）和我们代码的主体html，如下图
而css文件夹里需要至少三个css
index.css：主要样式表（即我们的主css，html中主要的样式都写里面）
base.css：公共样式表（每个页面都通用的样式）
reset.css：重置样式表（用于需要重置时设置的样式）
base.css与reset.css是用来补充index.css的，可以有效精简index.html的篇幅
CSS的语法：
选择器 {声明块}
声明块：名值对结构 样式名:样式值;
例：.box{ color:red}
选择器 声明块 样式值
接下里讲的就是选择器了
选择器是前端的基础中的基础，如果选择器学的不好，前端之路将寸步难行
常用选择器
1、标签选择器
语法：标签名{} 例：ul{}
即直接用标签名
2、id选择器
语法：#id属性值{} 例：#box{}
id=box
注意：id属性值不能以数字开头，不建议汉字，不能重复使用
一般只有大的区块用一下。
3、class选择器
语法：.class属性值{} 例：.box{}
class=box
最常用的选择器，文中无特殊需求基本上都用class选择器
4、全部选择器
语法：*{} 例：*{ margin：auto 0}；
即选中全部，通常css一开始设置或者在base.css中写
复合选择器
交集选择器
语法：选择器1选择器2选择器3{} 例：boxtexttop{}
中间没有空格，指选中同时含有这么多选择器的元素，类比数学中的交集
并集选择器
语法：选择器1,选择器2,选择器3···{} 例：box，text，top{}
中间逗号分开，指含有这些选择器的所有元素，类比数学中的并集
关系选择器
父子选择器
语法：父元素>子元素{} 例：a>b{}
a{ b{} }
指元素和下一级元素，用>连接
后代选择器
语法：祖先元素 后代元素{} 例：a b{}
a{ c{ b{} } }
指隔了不止一代的元素，用空格连接
兄弟选择器
下一个兄弟选择器
语法：兄+弟{} 例：a+b{}
a{}b{}
指选择紧贴的下一个兄弟，用+连接
后面兄弟选择器
语法：兄~弟{} 例：a~b{}
a{}b{}b{}b{}b{}
指选择后面所有的此类兄弟，用~连接
元素之间的关系
父子关系 直接包含与被包含的两者之间关系
祖先后代关系 直接或间接包含与被包含的两者间关系
兄弟关系 拥有共同的父元素
属性选择器
语法：[属性名]{} 选择含有指定属性的元素 例：[id]{color: red;}
[属性名=属性值]{} 选择含有指定属性和属性值的元素 例：[id=a]{color: red;}
[属性名^=属性值]{} 选择属性值以指定值开头的元素 例：[id^=a]{color: red;}
[属性名$=属性值]{} 选择属性值以指定值结尾的元素 例：[id$=a]{color: red;}
[属性名*=属性值]{} 选择属性值含有某值的元素 例：[id*=a]{color: red;}
适用于筛选特定元素
伪类选择器
一 、伪类（不存在的类，特殊的类）
-伪类用来描述一个元素的特殊状态
-比如：第一个元素，被点击的元素，鼠标移入的元素···
-特点：一般请情况下，使用：开头
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
特殊值： n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数
—以上这些伪类都是根据所有的子元素进行排序
注意：指的是在所有中去选，当第一个元素不是想要的元素时则选不中
1、:first-of-type 第一个子元素
2、:last-of-type 最后一个子元素
3、:nth-of-type() 选中第n个子元素
功能跟上面相似，
不同的是，这是在同类型的子元素中去选择
指的是在所有同类型元素中去选，不会选不中
二、:not() 否定伪类
-将符合条件的元素从选择器中去除 例： li:not(.l1){color: red;}
a元素的伪类选择器
即是鼠标悬停，点击，松开，移走的状态
1、:link 用来表示未访问过的链接（正常链接）
例 a:link {
color: red;
2、:visited 用来表示访问过的链接
由于隐私的原因，所以visited只能改颜色
例 a:visited {
color: grey;
}
注意:link与:visited只能a标签使用，而:hover与:active其他标签也可以
3、:hover 用来表示鼠标移入的状态
例 a:hover {
background-color: pink;
4、:active 鼠标点击后的状态
例 a:active{
background-color: indigo;
}
伪元素选择器
伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
before和after必须要结合content使用
例
div::first-letter{color: red;}
p::first-line{
background-color: #eee;
}
注意：伪元素选择器只适用于块元素
样式的继承（继承祖先的资产）
定义：为一个元素设置的样式，同时也会应用到它的后代元素上
优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式
注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承
span 的背景色是透明的，你给p设置了背景色，给p设置，透出来，就是这个色了
背景图片等，也都不会被继承
选择器权重
内联样式 1000
id选择器 100
类和伪类选择器/属性选择器 10
元素选择器 1
通配符、子选择器、相邻选择器等。如*、>、+ 0000
继承的样式 没有优先级
!important 最高优先级
注意：
比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示
(并集选择器)分组选择器是单独计算的
如果优先级计算后相同，此时则优先使用靠下的样式
选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器 量变达不到质变
一般来说：选择器越具体，优先级越高
当你不知道是不是权重的问题时，可以在后面加一个!important来检查
但是!important 慎用
最后一个快捷键小技巧
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
