Bluemsun第三周预习
前言：
css这一章知识点比较多，学的时间久了一点。。
CSS基础
css全称为Cascading Style Sheets，意为层叠样式表。我们在HTML之中说过，页面的样式由css代码完成，这里可以暂且将HTML之中的元素对应成css之中的规则。
CSS规则=选择器+声明块
声明块
声明块出现于{}之中，每一个声明表示了其样式。
样式表
样式表是css代码的书写位置，其引用有三种
1.内部样式表
顾名思义，内部样式表书写于style内部，应该在head里面进行声明。
<head>
...
<style>css内容</style>
</head>
2.内联样式表
内联样式表与内部样式表有所不同，它要在元素内部进行联用。
<h1 style="color:red;">~~</h1>
3.外部样式表
外部样式表是将样式书写到独立的css文件之中，可以说是用的最多的
<head>
...
<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />
</head>
外部样式表有几个优势：
- 1.可以解决多页面样式重复问题
- 2.有利于浏览器缓存，提高效率
- 3.有利于代码分离，易于代码保护
常见样式声明
1.color:指的是元素内部的颜色
颜色的定义有两种方法
1.颜色预设值：意为已经定义好的颜色、例如：red，blue等等。
2.色值表示法:通过计算色值来表示，每种颜色可以用0~255之间的数字表达
色值表示法还分为两种：rgb表示法和hex表示法
rgb表示法：通过光学三原色（red，green，blue）进行计算，每个颜色取值为0~255.。
hex表示法：通过十六进制进行计算，格式为#红绿蓝。
这里面介绍几个很火的颜色（笑）
#008c8c 马尔斯绿
#002FA7 克莱因蓝
#003153 普鲁士蓝
#FBD26A 申布伦黄
#470024 勃艮第红
（尊的很好看啊qwq）
2.background-color：元素背景颜色。（真的只是字面意思）
3.font-size：元素内部文字尺寸大小。
其有两个单位：px和em
px：像素，是绝对单位
em：指的是相对父元素的字体大小，是相对单位
这里对于em我们要注意的是，若无，则继承父元素字体大小，直到HTML时使用基准字号。
4.font-weight：字体粗细
定义时可以用文字/数字
normal=400
bold=700
5.font-family：字体
字体之中需要注意的是，所使用的字体必须是用户计算机中存在的字体，此兼容性问题我们通过定义多个字体实现
注意：最后最好写上sans-serif（非衬线字体），简而言之就是兜底的。
6.font-style：字体样式
取值为italic时，可以实现字体倾斜。
7.text-decoration：文本修饰
可以实现给文本加线
overline：文本上加线
line-through：穿过文本加线
underline：文本下加线
8.text-indent：首行文本缩进
取值同为px与em。
9.text-aline：元素内部文字水平排列方式
这最常见的就是直接取值为center。
10.line-height：每行文本高度
这个常用于设置使得文本完全居中。
文本完全居中：1.设置height 2.设置line-height与其相同 3.设置text-aline使其为center
11.width/height
指的是元素的高度与宽度。
选择器
选择器，顾名思义，是要将某种东西选择出来，那我们要选什么呢？其实是要选择相应的元素来对其设置样式。
1.元素选择器
字面意思，十分简单，看中哪个元素就把他选上。
（选中的元素）+{声明块内容}
2.ID选择器
id选择器存在的目的就是要特异性的来选择元素。在这里我们要先明确元素的id属性，然后再进行使用。
#+id+{声明块内容}
这样我们就选中了id为此的元素
3.类选择器
类选择器的适用范围极其之广，可以说是最常用的选择器，在这里我们需要引用一个全局属性class来对其进行筛选
.+class名+{声明块}
这样我就选中了class名为此的一类元素
需要注意的是，id是独一无二的，而class类名可以设置成一样的
4.通配符选择器
比较无脑的一个选择器，他会选择所有元素。。。。
*+{声明块内容}
这就是通配符*，覆盖面广，但其特殊性就会差一些。
5.属性选择器
属性选择器相对比较特殊，他是通过属性名与属性值来选中元素
[属性]+{}：表示选择所有具有此属性的元素
[属性+属性值]+{}：特殊性更强一些，精确到属性值。
属性选择器还有各种稀奇古怪的用法（不是），具体可以参考此链接
属性选择器mdn
6.伪类选择器
伪类选择器无法顾名思义（笑），它表示选中某些元素的某种状态。
- link：超链接未被访问过的状态
- visited：超链接被访问过的状态
- hover：鼠标悬停的状态
- active：激活状态
举个栗子qwq
a:hover{color:red;}
需要注意的是，伪类选择器的书写是有顺序的，称之为love-hate法则，其原理后面会讲。
7.伪元素选择器
伪元素选择器的用法有些朦胧，目前有一用法；
在所选内容前后生成一个新的子元素。
元素+::before/after{声明块}
更多应用方法请见此链接
选择器的组合与并列
组合
1.且关系，两个选择器之间不加任何东西，同时满足两者
a.class{。。。}
2.后代元素：两个选择器空格连接
div li{。。。}
3.子元素：两个选择器‘>’连接
div>ul{。。。}
4.相邻兄弟元素：A+B形式，表示选中A后的第一个B。
5.兄弟元素：A~B形式，表示选中A后的所有B。
并列
这是一种”语法糖“式的写法，，每种选择器用‘，’链接。
层叠与继承
CSS全称为层叠样式表，那么理解层叠就很有必要。
首先我们明确一个概念：声明冲突
同一样式同时应用到同一元素叫做声明冲突
层叠
为了解决声明冲突，我们理解层叠
层叠又称权重计算，是一个解决声明冲突的过程，由浏览器完成
层叠分为三步，比较重要性，比较特殊性，比较源次序。
三步是有先后次序的！！！！
1.重要性
重要性比较要从高到低：作者样式表!important>普通作者样式表>浏览器默认样式表。
2.特殊性
总体规则：选择器所选范围越窄越特殊。
具体计算过程：通过选择器计算一个四位数
- （千位）：如果是内联样式，记为1，否则为0。
- （百位）：等于选择器中ID选择器的个数
- （十位）：等于所有伪类，类，属性选择器的个数
- （个位）：等于所有元素，伪元素的个数
经统计，这个数大概是逢256进1
3.源次序
代码书写靠后的胜出！！
爱恨法则的原理就是比较源次序！！！
由于源次序使得靠后的胜出，则可知，当重要性与特殊性相同时，active先胜出，这时不会影响我们所需的样式。
盒模型
box：盒子，每个元素在页面都会生成一个矩阵区域
行内/块元素之殇
盒子类型：
1.行盒（display等于inline的元素）：实际就是行内元素。
2.块盒：(display等于block的元素)：实际是块元素。
display的默认值是inline。
盒子的组成部分
无论是行盒还是块盒，都由四个部分组成，从内到外为：
- 1.内容contect：我们之前介绍的width，height为盒子内容的宽高。
- 2.填充（内边距）padding：边框到内容的距离，含有上下左右四个方向，分别可以定义为padding-left/right/top/bottom，或者使用语法糖写法：padding：上 右 下 左；
- 3.边框border：边框=样式+宽度+颜色（style，width，color）其中样式默认为none，color默认为字体颜色。
- 4.外边距margin：表示边框到其他盒子的距离，其定义相当于padding的用法
行盒的盒模型
行盒的特点：
- 1.盒子沿着内容延申
- 2.不能设置宽高，其通过字体大小，行高，字类型
- 3.内边距，边框，外边距只在水平方向上有效，垂直方向仅影响背景。
行块盒
行块盒：display=inline-block
它不独占一行，但是盒模型的所有尺寸都能生效
具体可以参考网页的换页处~
总结
CSS的内容真的很多，而且精通的话需要很多的练习，要求我们熟悉其应用环境，多敲代码。
写于
2022/4/12
20：10
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
