缺陷
CSS是标记语言，不是编程语言。因此不可以自定义变量，不可以引用（不具备任何语法支持）
- 语法不够强大，无法嵌套书写，导致模块化开发中需要书写很多重复的选择器
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
CSS预处理器
nodejs也一定要学的。
1. 客户端与服务器（软件由这两个部分组成）
客户端：用户通过客户端来使用软件
文字客户端（CLI）
图形客户端（GUI、C/S）
网页（通过访问网页来使用软件，所有的网站都属于这个范畴。B/S架构）
服务器：服务器负责在远程处理业务逻辑
开发语言：java、PHP、C#、Python、Node.js…
网页的特点
- 不需要安装
- 无需更新
- 跨平台（有浏览器就行）
2. CSS定义
CSS: Cascading Style Sheet 层叠样式表
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，最终我们看到的只是网页的最上面一层。
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
是一组样式设置的规则，用于控制页面的外观样式。
3. CSS基本语法
两个部分
选择器：选择符（selector），通过选择器选中页面中的指定元素。例如，p的作用即使选中页面中所有的p元素。
任何一个HTML标签都可以是一个CSS的选择符
声明块：属性（property）、和属性值（value），通过声明块来指定要为元素设置的样式，是一个名值对结构。
选择符（selector）、属性（property）、和属性值（value）
选择符{ 属性：值 }
为选择符指定多个样式，需要在属性之间用分号加以分隔。
例如：p{ text-align; center; colo: red }
可以将相同的属性和属性值赋予多个选择符（组合），选择符之间用逗号分隔。
例如：h1，h2，h3，h4，h5，h6{ /* 字体颜色为蓝色 */ color: blue}
/* 这是CSS的注释 */，注意不要将注释嵌入到选择符语句里。
4. 在网页中添加CSS的方法
a）内联样式，行内样式
在标签内部通过style属性来设置元素的样式
问题：使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍。当样式发生变化时，需要一个一个更改，非常不方便。
开发时绝对不用内联样式
b）内部样式
将样式编写到中的
可以同时为多个标签设置样式，修改时只需修改一处即可全部应用。
更加方便对样式进行复用
内部样式只对所在的一个网页有效，不能跨页面进行复用。
c）外部样式 😁
外部样式文件中不能有任何HTML标记，仅由样式规则或声明组成。（CSS基本语法）
链接样式表
在中通过标签来引入外部的CSS文件。
rel 和 type 属性表明这是一个样式文件，href属性指定了外部样式文件的相对地址。
导入样式表
在标签内使用@import导入外部样式文件。
<head>
<style type="text/css">
<!-- @import url（“mystyle.css”）;
h1{color:red}
-->
</style>
</head>
相对于内联样式和内部样式的优点
-
样式代码可以复用：在多个网页中使用，可以将CSS样式编写到一个外部的CSS文件中。
-
便于修改：只需要修改CSS文件，不需要修改每个网页。
-
提高网页显示速度：将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。（其他网页已经使用过它）
开发时一般使用外部样式。
5. 选择符分类
普通选择符
任意的HTML标记都可以作为选择符，这样的选择符成为普通选择符。
其样式仅仅作用在选择符指定的HTML标记上。
p{}、h1{}、div{}，等等…
id选择符
- HTML标记名加上id名，中间用“#”分开，id名供该HTML标记的id属性使用，id名最好不要重复写。
CSS
p#svp{
font-size：12pt
}
HTML
<p id="svp">这一段话字体大小为12pt</p>
svp是个id选择符的名字，在网页中可以引用这个id选择符设置
样式。
如果只写“#id名”，表示这个id名适用于所有的HTML标记的id属性，这种选择符称为通用id选择符。
类选择符
和id类似，不同的是class可以重复使用。
- HTML标记名加上类名，中间用“.”号分开，类名供改HTML标记的class属性使用，通过class属性来为元素分组。
CSS
p.right{
text-align:right
}
p.center{
text-align:center
}
HTML
这一段内容是居中显示
这一段内容是居右显示
如果只写“.类名”，表示这个类名适用于所有的HTML标记的class属性，这种选择符称为通用类选择符。
通配选择符
*表示所有的元素，全部选择。
*{
color：red
}
所有都变成红色了
6.复合选择符、关系选择符、属性选择符、
a.复合选择器（交集选择器 （与））
语法：选择器1选择器2选择器3选择器4
用“.”号连接选择符，交集中如果有元素选择器，必须元素选择器开头。
例如：
div.red{
font-size: 30px;
}
不建议标签#id{}，因为id已经指定了。
b.复合选择器 （并集选择器（或））
同时选择多个选择器，实现一个目标，用逗号“，”隔开。
h1，span，p{
color：green
}
id和class也可以一起用，#b1,.p1,span,.red{ }
c.关系选择器
子元素选择器
选中指定父元素的指定子元素
语法：父元素>子元素
div >span {
color：red
}
div.box >span {
color：red
}
可以混合使用
div > p > span {
color：red
}
可以连着写
后代元素选择器（范围更大）
选中指定元素内的指定后代元素
语法：祖先 后代
div span{
color: blue
}
选择下一个兄弟（只对下一个起作用）
语法：前一个 + 下一个
p + span {
color: red
}
选择下边所有的兄弟（对所有都起作用）
语法：兄 ~ 弟
p ~ span {
color: red
}
d.属性选择器
title属性，鼠标的悬停文字。
选择符[ 属性名 ] 选择含有指定属性的元素
选择符[ 属性名=属性值 ] 选择含有指定属性和属性值的元素
选择符[ 属性名^=属性值 ] 选择属性值以指定值开头的元素
选择符[ 属性名$=属性值 ] 选择属性值以指定值结尾的元素
选择符[ 属性名*=属性值 ] 选择属性值中含有某值的元素的元素
属性值多为字母。
p[title]{
color: orange
}
p[title=abc]{
color: orange
}
7.伪类选择符、超链接的伪类、伪对象
快速写无序列表的方法：ul>li*5
a.伪类选择符（特殊的类）
自动选中第一个子元素，被点击的元素，鼠标移入的元素…
一般情况下都是“：”冒号开头
ul > li：first-child{
color：red
}
第一个子元素
ul > li：last-child{
color：red
}
最后一个子元素
ul > li：nth-child（n）{
color：red
}
第n个子元素，n从0开始。
若写n，表示第n个，n的范围从0到正无穷。
若写2n或者even，表示选中偶数位的元素。
若写2n+1或者odd，表示选中奇数位的元素。
-
: first-of-type
-
last-of-type
-
nth-of-type（）
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序。
否定伪类
：not（）
将符合条件的元素从选择器中去除（除了第n个，其他都是这个效果）
ul > li：not（：nth-of-type（3））{
color：yellowgreen
}
如果not里用（：nth-child（3））表示所有元素排列里的第三个，（：nth-of-type（3））表示只在这个相同的元素里排序。
b.超链接的伪类
不能用类来表示，有无访问过一个链接。
超链接专属
用“：link”来表示没访问过的链接（正常的链接）”
a：link{
color：red；
font-size：50px；
}
用“：visited”来表示访问过的链接”，由于隐私的原因，所以visited这个伪类只能修改链接的颜色。
a：visited{
color：orange；
}
以上两个只适用于标签
除了超链接标签之外也可以用
用“：hover”来表示鼠标移入的状态
a：hover{
color：blue；
font-size：50px；
}
表示鼠标移入后链接字体变大且变成蓝色
用“：active”来表示鼠标点击的状态
a：active{
color：yellowgreen；
}
表示鼠标点击后，链接变成黄绿色了。
优先级关系
link > visited > hover > active
c.伪对象
每次单独加大首字母，很不方便。所以使用伪对象（伪元素），假想出的一个元素。
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置），使用“：：”开头。
首字母加大
p：：first-letter{
font-size=50px；
}
第一行
p：：first-line{
background-color：yellow；
}
选择
p：：selection{
background-color：green；
}
用鼠标选择之后背景颜色变为绿色
需要结合content属性使用
：：before 元素的开始
p：：before {
content：‘abc’
color： red；
}
在正文最开头加了红色的abc
：：after 元素的结束
p：：after {
content：‘haha’
color： blue；
}
在正文最开头加了蓝色的haha
以上开头和结尾content里的文字都是复制不了的，不能选择。不管内容多长，都可以在最开头和最结尾。
8.继承、选择器权重、像素和百分比
继承
有些属性，可以从父元素传递给子元素。例如（color）
只有父元素的子元素可以继承，其他元素不可以继承
选择器权重
<head>
<style>
div{
color: red
}
.red{
color: yellow
}
</style>
</head>
<body>
<div id="box1" class="red">我是一个div</div>
</body>
样式冲突：通过不同的选择器，选中相同的元素，为相同的样式设置不同的值。
表现形式，由选择器权重（优先级）决定：
- 内联样式
<style>，行内样式 1，0，0，0 - id选择器 0，1，0，0
- 类和伪类选择器 0，0，1，0
- 元素（单个选择符）选择器 0，0，0，1
- 通配选择器*{ } 0，0，0，0
- 继承的样式 没有优先级
通配优先级 > 继承
如果优先级计算后相同，此时则优先使用靠下的样式。
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示。（分组选择器是单独计算的）
ps：选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器。（只能相加，不能进位。）
ps：在后面添加 ！important，该样式会获得最高的优先级，甚至超过内联样式。在开发中，能不用就不用，不能改动or改动很麻烦。
像素和百分比
“div.box1”直接创建<div class="box1">我是一个div</div>
像素
长度单位：像素px
- 屏幕（显示器）实际上是由一个一个的小点点构成的
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
- 同样的200px在 不同的设备 下显示效果不一样
水平方向像素 垂直方向像素
1366 × 768
百分比
也可以将 属性值 设置为相对于其 父元素 属性的百分比
好处：可以使子元素，跟随父元素的改变 而改变
9.em和rem、RGB值、HSL值、文档流
em和rem
em
相对于**元素自身的字体大小来计算的，一般默认字体大小是16px，会根据字体大小的改变而改变。
一个em可以表示一个字体的大小。
10em = 160px
rem(适配)
相对于***根元素***（HTML的字体大小）的大小来计算的。
可以用
html{
font-size:30px
}
RGB值（可以自己选）
颜色单位：在CSS中可以直接使用颜色名来设置各种颜色。但是 颜色名 使用起来不是很方便，不是很好描述。
RGB
（Red、Green、Blue）值：通过三种颜色不同的浓度，来调配出不同的颜色。
每一种颜色的范围在（0 ~ 255）0% ~ 100%
语法
color：rgb（255，0，0）红、绿、蓝 （255，255，255）是白色
RGBA
语法
color：rgba（255，0，0，0）红、绿、蓝 、透明度（0-完全透明，0.5-半透明，1-完全不透明）
十六进制的RGB值
语法#红色绿色蓝色
颜色浓度00–ff
# ff 00 00——（红、绿、蓝）
ps：如果颜色 两位两位重复 可以进行简写，#aabbcc——#abc（可以简写）
#aabbcc——（不能简写）
#bbffaa——#bfa（豆沙绿）
HSL值
HSL
Hue—色相（0 ~ 360）
Saturation—饱和度 （ 0% ~ 100%）浓度
Lightness—亮度 （0% ~ 100%）
侧边上下拖动的地方叫 H色相 （色环，红色第一个＋最后一个）
HSLA
A—透明度 （0 ~ 1）
文档流 normal flow
- 网页是一个多层的结构，一层摞着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户来讲只能看到最顶上一层
- 这些层中，最底下的一层称为文档流，文档流是网页的基础（我们所创建的元素默认都是在文档流中进行排列）
- 元素有两个状态：在文档流中，不在文档流中（脱离文档流）
元素 在文档流中 的特点：
1.块元素：在页面中会独占一行<div>
没有指定width和height时：默认宽度是父元素的全部（把父元素填满）默认高度是被内容撑开（被子元素撑开）
2.行内元素：在页面中左向右水平排列，如果一行内不能容纳所有元素，则元素会排到第二行继续自左向右排列。<span>
不会独占页面的一行，只占自身的大小（期间会有缺口），默认高度和宽度都是被内容撑开。
（国家之间的字体排列可能不一样，浏览器默认自左向右排列）
10.盒子模型、框模型、（box model）
layout 布局
盒子模型
CSS将页面中的所有元素都设置为了一个***矩形的盒子***
将元素设置为矩形盒子之后，对页面布局就变成了，将不同的盒子摆放到不同位置。
设定一个class，在class里写三个部分。
每一个盒子都有以下几个部分组成：
大小——内容区（content）、内边距（padding）、边框（border 限制大小）、
位置——外边距（margin）
相关属性：<div></div>中没有内容是不会出现任何东西的。
内容区（content）：
元素中的所有的子元素和文本内容都在内容区中排列，width，height，设置内容区的宽度和高度。***（宽度 width，颜色 height）***
边框（border）：
边框属于合资边缘，边框里属于盒子内部，边框外是盒子外部。要设置边框，至少要设置三个样式***（宽度 border-width，颜色 border-color，样式 border-style）***
**border-width：**默认值3个px，用来指定四个方向的边框宽度。
写四个值*** 时，表示上 右 下 左*。
三个值，表示上 左右 下。两个值，表示上下 左右。一个值，上下左右都一样。
除了border-width，还有一组border-xxx-width，xxx——可以是top，right，bottom，left。单独指定某一个边的宽度。
border-color：用来指定边框的颜色，同样可以分别指定四个边的边框，规则和width一样。四个部分连写处是斜的，不是直切。（省略不写，则默认颜色是 内容区的color颜色（前景色） 一般默认是黑色）
**border-style：**solid——实心的，dotted——点状虚线，dashed——虚线，double——双线。（必须写，默认值是none）
border 简写属性
通过该属性可以同时设置所有的相关样式，没有顺序要求。
border：solid 10px orange； 若此时不需要一个边，可以在设置border-xxx：none，就没了
除了border之外，还有四个border-xxx
border-top border-right border-left border-bottom
内边距（padding）：
内容区和边框之间的距离是内边距，会影响到盒子的大小。
背景颜色延伸 到内边距（内容区和内边距的颜色相同，不好区分），文字只出现在内容区里。
一共有四个方向的内边距：
padding-top padding-right padding-bottom padding-left
.inner{ 把content撑满，再设置背景颜色，就可以将内容区与内边距区分开 }
可以<div class="box1"><div class="inner">我是div中的div</div></div>
一个盒子的 可见框大小 ，由内容区、内边距、边框共同决定，要把三个区域加在一起计算。
padding简写属性
可以同时指定四个方向的内边距，规则和 border-width 一样
padding：10px 20px 30px 40px；
写四个值*** 时，表示上 右 下 左*。 三个值，表示上 左右 下。两个值，表示上下 左右。
一个值，上下左右都一样。
外边距（margin）：
不会影响盒子可见框的大小，在可见框外面，但是他会影响盒子的位置。
它影响了盒子实际占用空间的大小（可见＋不可见部分）。
默认情况下，元素会往左上角靠近。
如果我们设置的左和上外边距，会移动元素自身；
而设置下和右外边距会移动其他元素。
一共有四个方向的外边距：
margin-top 上外边距，设置正值，元素会往下移动。
margin-right 右外边距，设置正值，右边元素会向右移动，默认不会产生任何效果。
`margin-bottom 下外边距，设置正值，下边元素会向下移动。
margin-left 左外边距，设置正值，元素会往右移动。
若设置***负值***，会往反方向移动。
margin简写属性
可以同时指定四个方向的内边距，规则和 padding 一样
margin：10px 20px 30px 40px；
写四个值*** 时，表示上 右 下 左*。
三个值，表示上 左右 下。
两个值，表示上下 左右。
一个值，上下左右都一样。
11.水平方向的布局
元素在其父元素中水平方向的位置由以下几个属性共同决定：
margin-left
border-left
padding-left
width
padding-left
border-left
margin-left
以上7个值 = 其父元素内容区的宽度（必须满足）
一个元素在其父元素中，水平布局必须要满足这个等式。
过度约束
如果等式不成立，则称为过度约束（等式会自动调整右外边距）
调整的情况
a.如果这七个值中没有为auto的情况
则浏览器会自动调整 margin-right 的值，使等式满足。
不满足的情况会被 一直 自动调整。
b.这七个值中有三个值 可以 设置为auto
width
margin-left
margin-right
-
如果某个值为auto，则会自动调整 为 auto的那个值 以使等式成立
-
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动变成0。
-
如果三个值都是auto，则外边距都是0，宽度最大。
-
如果将两个外边距设置为auto，宽度固定值，则会将外边距会被设置为相同的值。（经常利用这个特点，来使一个元素在其父元素中水平居中）
语法
width：xxxpx；margin：0 auto；
c.margin可以为负值
若子元素大于父元素时，margin会自动调整为负值，满足等式。
12.垂直方向的布局
默认情况下
父元素高度不写，子元素多高，父元素就多高。
父元素高度写了，多高就是多高。
子元素在父元素的内容区中排列的，若子元素大小 > 父元素，会溢出。
用 overflow 属性来设置父元素如何处理溢出的子元素
overflow 可选值：
visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示
hidden：溢出内容将会被裁剪，不会显示
scroll：生成两个滚动条，通过滚动条来查看完整内容
auto：根据需要生成滚动条，水平方向，垂直方向，不会生成多余的滚动条。
overflow-x
overflow-y
垂直外边距重叠（折叠）
相邻的垂直方向外边距，会发生重叠
特点：
-
相邻
-
垂直方向
兄弟元素（对开发有利，可以不需要处理）
- 兄弟元素之间，相邻垂直外边距会取两者之间的较大值。（两者都是正值）
- 特殊情况（一正一负），则取两者之和。
- 都是负值，都取两者绝对值较大的。
父子元素（影响到页面的布局，必须要进行处理）
父子元素间相邻外边距，子元素会 传递 给父元素（上外边距）。
父子外边距的折叠会影响到页面的布局，必须要进行处理。
解决：要么不用外边距，要么不要相邻。
-
可以加 padding-top，但是得把父元素多出的px删除掉。（很麻烦）
-
父元素加个边框，border-top：1px，在父元素height中减掉1px，子元素的margin-top减掉1px，就行了。（不错，但是也不太行）
-
position（后面讲）
13.行内元素的盒模型
行内元素不支持设置宽度和高度。
- 行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局。
- 行内元素可以设置border，垂直方向的border不会影响页面的布局。
- 行内元素可以设置margin，垂直方向的margin不会影响页面的布局。
水平方向的margin不会重合，是相加的关系。
把行内元素——变成块元素。
display属性
可选值：
inline：将元素设置为行内元素（默认）
block：将元素设置为块元素（需要额外写width和height）
inline-block：将元素设置为行内块元素，（需要额外写width和height），没有独占一行，可以和其他行内元素合在一行。（可以，但是有些时候用起来会很奇怪）
table：将元素设置为一个表格
none：元素不在页面中显示，（鼠标放在上面时，显示；隐藏元素）
visibility属性
可选值：
visible：默认是，元素在页面中正常显示
hidden：元素在页面中隐藏，不显示，依然占据页面的位置。
代码：
- 两个若是连着一起写，显示的时候也是连着的。
- 两个若是隔开写（换行），现实的时候中间会有空格分开。
14.浏览器默认样式（最好去除）
<div>不会紧贴着浏览器，会有一段默认的距离。
盒子的大小
默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定。
box-sizing
用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box 默认值，宽度和高度用来设置内容区的大小。
border-box 宽度和高度用来设置整个盒子可见框的大小。
width 和 height 指的是内容区、内边距、和边框的总大小。
**border 可以换成 outline **边框
outline一般用来设置元素的轮廓线，用法和border一模一样
轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
可以用 hover，写一个鼠标放在上面出现的效果。
box-shadow
用来设置元素的阴影效果，阴影不会影响页面布局
10px 10px 10px black
第一个值，是左侧偏移量，设置阴影的水平位置，正值向右移动，负值向左移动。
第一个值，是垂直偏移量，设置阴影的水平位置，正值向下移动，负值向上移动。
第三个值，阴影模糊半径
第四个值，阴影的颜色（ 还可以设置 rgba（0,0,0,0.3））
border-radius 用来设置圆角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
圆角设置的圆的半径大小，可以有一个值（圆），也可以有两个值x，y轴（椭圆）。
border-radius：10px 20px 30px 40px；
四个值，分别指定四个角的圆角，左上，右上，右下，左下
三个值，左上，右上/左下，右下
两个值，左上/右下 ，右上/左下
border-radius：50%，直接设为一个圆形。
默认样式
通常情况，浏览器都会为元素设置一些默认样式。
默认样式的存在会影响到页面的布局，通常情况下编写网页时候，必须要去除浏览器的默认样式（PC端）。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsU6SBGc-1645340447890)(D:\大学资料\笔记\CSS图片\UNtitled 3.png)]
无序列表也有边距，
- ，可以用 list-style 去掉项目符号。
解决：1.通常情况下（不太完美）
*{
margin：0；padding：0；
}
就搞定，与左上角右上角的距离小了。
2.重置样式表（拿来把你）
bp别人的！专门用来对浏览器的样式进行重置的。
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一 （移动端多用）
引入一定要放在样式最上面，不然下面就会覆盖我们自己要的样式。
默认样式
通常情况，浏览器都会为元素设置一些默认样式。
默认样式的存在会影响到页面的布局，通常情况下编写网页时候，必须要去除浏览器的默认样式（PC端）。
无序列表也有边距，
- ，可以用 list-style 去掉项目符号。
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
