CSS概念
css 全称 cascading style sheets，层叠式样式表， 是一种用来表现 HTML 的文件样式的计算机语言。
作用： 静态地修饰网页， 并且可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 的出现， 实现了网页的结构和样式分离。美容师！
CSS的组成
| 层叠式 | 样式 |
|---|---|
| css 中贯穿始终的加载特性 | 定义如何显示 HTML 元素 |
| 层叠性 | 文字文本 |
| 继承性 | 背景 |
| 盒模型 | |
| 浮动 | |
| 定位 | |
| 其他 |
CSS书写
CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明
书写位置
内联式（不推荐）
行内式
-
书写位置：在 HTML 标签的 style 属性中书写 css 样式
<div style="width: 360px;height: 100px;background-color: red;"></div>
内联式缺点
必须写在标签，没有脱离HTML标签
让标签结构繁重，不利于HTML结构的解读
一个CSS代码，只能给一个标签使用，如有多个标签使用相同样式，需要重写，增加代码量
内嵌式
书写位置：在HTML文件，<head>标签内部的<style>标签中。<style> 标签书写在< title> 标签后面， 所有 css 代码书写在 <style> 标签内部
-
在<style> 标签有一个标签属性叫做 type， 属性值是 “ text/css”
<style type="text/css"> div { width: 360px; height: 100px; background-color: red; } </style>
内嵌式特点
优点
实现结构与样式初步分离
多个标签可用同一段代码设置相同样式
缺点
结构与样式没有完全分离，依旧是写在HTML文件里面
在HTML中CSS代码过多，文件不美观
外联式
也称作外链式 CSS、 外部 CSS
书写位置：在一个单独的扩展名为.css的文件中
-
书写语法：与内嵌式类似，直接书写，单并不需要添加<style>标签
/* 直接书写css规则 */ div { width: 360px; height: 100px; background-color: red; }
外联式引用
外联式样式表必须引入到 HTML 文件中， 才能正常进行加载
-
引入方式： 在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入
<link rel="stylesheet" href="01.css" type="text/css">
外联式优点
HTML 和 css 完全分离
多个 HTML 文件可以共用一个 css 文件， 便于提取公共 css， 减少代码量
一个 css 变化， 多个 HTML 页面同时变化， 减少工作量
一个 HTML 文件可以引入多个 css 文件， 可以实现同一个页面中 css 代码分层
导入式
书写位置：在内嵌式样式表 <style> 标签内部， 或者在外联式样式表的内部， 导入其他的外部的.css 文件
-
导入方式： 利用一条 @import url(路径) 语句进行引入
<style> @import url(01.css); h1 { color: red; } </style>
导入式问题
与外联式样式表基本相同
但是由于导入式在浏览器中加载时， 会在 HTML 结构加载完毕后再进行编译， 如果网速比较慢时， 会导致网页出现没有 css 样式的效果， 体验不好
实际工作中， 较少使用导入式， 推荐使用外联式样式表
实际应用
小型案例： 可以使用内嵌式 CSS
实际工作、 大型网站项目： 推荐使用外联式 CSS
CSS语法
CSS规则
CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明
样式规则
以内嵌式样式表为例
所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内
css 在给某个标签设置样式前， 必须使用选择器先选中标签
css 样式的属性， 属性名和属性值的键值对写法为 k:v;
给每个选择器添加的样式属性都必须写在一对大括号 {} 之内
-
给一个标签添加的所有需要的样式， 都要在 {} 内部一一罗列出来
<style type="text/css"> div { width: 360px; height: 100px; background-color: red; } </style>
注意事项
分号必要性： 每条属性后面的分号必须写， 如果不写， 会导致后面所有的代码加载错误。
css 中所有属性与属性之间对空格、 换行、 缩进不敏感。
CSS 注释语法
vs code快捷键： ctrl+/
/*中间部分为注释内容*/
CSS样式格式
-
展开格式：开发过程使用， 代码可读性强， 便于调错
div { width: 360px; height: 100px; background-color: red; } -
紧凑格式：上传服务器时使用， 减少不必要的空白字符， 压缩文件大小， 利于传输
div {width: 360px; height: 100px; background-color: red;}
英文大小写
CSS的英文可以大写，也可以小写
建议全部小写！
空格规范
选择器与大括号 {} 之间保留一个空格
-
冒号后面， 属性值前面， 保留一个空格
div { width: 360px; height: 100px; background-color: red; }
CSS常用样式
颜色color
作用： 给文字设置颜色
属性名 k ： color
属性值 v ： 颜色名、 颜色值
颜色名
颜色名就是使用颜色的英文单词进行表示
| 红色 | red |
|---|---|
| 橙色 | orange |
| 黄色 | yellow |
| 绿色 | green |
| 青色 | cyan |
| 蓝色 | blue |
| 紫色 | purple |
| 黑色 | black |
| 白色 | white |
| 金色 | gold |
| 粉色 | pink |
| 浅黄色 | lightyellow |
| 黄绿色 | yellowgreen |
| 天蓝色 | skyblue |
更多的颜色名可以通过查询手册得到
颜色值
颜色值指使用具体颜色的数值表示。 包括： rgb 模式和十六进制模式写法
rgb 模式
rgb 模式： 是根据红绿蓝三原色进行混合而成的颜色模式
每个原色的取值范围是0-255， 一共256个数值。 三个原色共能混合成1677多万种颜色
书写方法： rgb(红,绿,蓝)
常用颜色的 rgb 色值：
| 红色 | rgb(255,0,0) |
|---|---|
| 绿色 | rgb(0,255,0) |
| 蓝色 | rgb(0,0,255) |
| 黑色 | rgb(0,0,0) |
| 白色 | rgb(255,255,255) |
| 灰色 | rgb(128,128,128) |
十六进制模式
十六进制模式： 是 rgb 模式的一种简化写法， 使用十六进制的数字字符去替换十进制的 0--255 的数字
十六进制： 逢十六进一， 每个数位上只能出现 0-9， a-f 之间的字符
书写为颜色值时， 红、 绿、 蓝每个色值都要使用两位数的十六进制进行替换。0→00；255→ff
书写方式： 使用 # 开头， 后面连续书写红、 绿、 蓝三个颜色的十六进制的两位数值
常用颜色的十六进制色值：
| 红色 | #ff0000 |
|---|---|
| 绿色 | #00ff00 |
| 蓝色 #0000ff | |
| 黑色 | #000000 |
| 白色#ffffff | |
| 灰色 #808080 |
注：十六进制颜色值简写模式： 如果红、 绿、 蓝三个原色的色值每一个都是由重叠的数字组成， 可以将重叠的数字简化成一个进行书写。 如：红色 #f00
字体font-family
作用： 定义元素内文字的字体
属性名 k ： font-family， 字体属于 font 综合属性的一个单一属性
属性值 v ： 字体名称， 必须包裹在一对引号中， 属性值可以有多个， 值之间用逗号分隔
常用字体
-
常用的中文字体：
宋体 SimSun 微软雅黑 Microsoft Yahei 常用的英文字体：Arial consolas
如果不设置字体属性， 不同的浏览器有自己的默认字体
注意事项
font-family 可以设置多个字体名称， 在实际加载时只会选择一种加载， 选择的依据是按书写顺序进行， 如果浏览器不支持第一个字体， 则会尝试下一个， 直到找到第一个支持的字体
浏览器中加载的字体是用户机器中自带的， 如果用户的电脑中没有设置的字体则加载失败， 需要查找下一个， 因此，必须在最后设置一个所有机器都具备的通用字体作为后路
中文字体中一般带有英文可以加载的字体效果， 为了避免英文字的字体影响，建议将英文字体写在属性值最前面
实际应用
首选字体需要根据设计图确定， 最后需要设置备用字体
字号font-size
作用： 设置文字的大小。
属性名 k ： font-size， 字号属于 font 综合属性的单一属性
属性值 v ： 可以使用相对长度单位， 也可以使用绝对长度单位。 推荐使用相对长度单位
单位
| 相对长度单位 | 说明 |
|---|---|
| px | 像素值，最常使用的单位 |
| em | 倍数，继承自祖先元素设置的字号的倍数 |
| % | 百分比，继承自祖先元素设置的字号的百分比 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
注意事项
如果 HTML 中不设置字号， 不同的浏览器有自己默认的加载字号， 比如 chrome、IE， 默认显示字号为 16px
不同的浏览器也有自己最小加载显示字号， 如果设置的字号低于最小字号， 都以最小字号加载， 0除外。 chrome 浏览器最小加载显示字号为8px， IE 浏览器最小可以支持1px的字号
实际应用
最小设置字号必须是12px， 如果低于12px会出现兼容问题。 现在网页中普遍使用14px+
尽量使用 14px、 16px等偶数的数字字号， ie6 等老式浏览器支持奇数会有bug
实际工作中的字号， 需要以设计图为准
盒子实体化属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| width | px单位的数值 | 定义元素占有的宽度 |
| height | px单位的数值 | 定义元素占有的高度 |
| background-color | 颜色名、颜色值 | 定义元素的背景颜色 |
div {
width: 360px;
height: 100px;
background-color: red;
}
CSS选择器
选择器： 选择要添加样式的 HTML 标签的一种方法、 模式
-
首先学习 css2.1 版本的七种选择器：
基础选择器： 标签选择器、 id 选择器、 类选择器、 通配符选择器
高级选择器： 后代选择器、 交集选择器、 并集选择器
标签选择器
通过标签名去选择标签元素
书写方式： 标签名，如p
选择范围： 选中的是HTML文件中所有的同名标签
注意： 标签选择器可以选择所有的同名标签， 会忽视 HTML 元素的嵌套关系， 不管嵌套多深， 都能被选中
标签选择器特点
优点： 选中所有的同名标签， 设置所有同名标签的公共样式
缺点： 只能实现全选， 不能局部
p {
color: red;
}
id 选择器（少用，不建议）
通过标签上的 id 属性去选择标签。
书写方式：#id 属性值
选择范围： 只能选中一个标签。
id 命名规则： 必须以字母开头， 后面可以有字母、 数字、 下划线、 横线， 严格区分大小写。 每个 id 属性值必须是唯一的， 不能与其他的 id 同名
注意： 如果希望多个标签设置相同的样式， 使用id选择器的话， 必须给这多个标签取不同的 id 名， 分别选中设置
#para1 {
color: red;
}
#para2 {
color: red;
}
id 选择器特点
缺点： id 选择器只能实现单选， 不能帮我们完成多选的功能
类选择器
通过标签的 class 属性去选择标签。
书写方式：.class属性值
选择范围： 是页面中所有 class 属性值相同的标签。
class 命名规则： 必须以字母开头， 后面可以有字母、 数字、 下划线、 横线， 严格区分大小写。 class 属性值可以与其他的class相同
.demo {
color: red;
}
类选择器特点
多个不同的标签， 不区分标签类型， 只要 class 属性值相同， 都可以被同一个类选择器选中
一个标签的 class 属性可以有多个属性值， 值之间用空格分隔， 每个属性值组成的选择器， 都可以选中这一个标签， 每个选择器后面的样式都会添加给同一个标签
<p class="demo ddd">段落标签内容</p>
类选择器的特殊应用
原子类： 在css中提前设置一些类名， 每个类选择器后面只添加一条css样式属性， 这些属性会在页面中常被使用， 后期可以不需要多次书写属性， 只要将对应的类名添加给需要的标签即可
类选择器的优点
通过一个类选择器进行多选， 选中多个标签， 添加公共样式
一个标签可以被多个类选择器选中， 可以将所有样式进行分离， 分别提取公共样式和单独样式， 节省代码量
实际工作中， 通常我们有一个使用规律： 类上样式(CSS)， id 上行为(JavaScript)
通配符选择器
通过一个特殊符号选择页面内所有的标签。
书写方式： *
选择范围： 包含 <html>标签在内的所有标签
* {
color: red;
margin: 0;
padding: 0;
}
通配符特点和应用
优点： 实现全选， 简化书写
缺点： 通配符选择效率低， 设置的部分公共样式不是所有标签都需要添加， 如果使用通配符选择， 会让不需要的标签也加载一次样式， 导致浏览器多做无用的工作
注意： 实际上线的网站不允许使用 * 去清除默认内外边距
不过普通的案例， 代码量较少时， 为了节省书写， 可以使用通配符
后代选择器
通过标签之间存的嵌套关系（族谱关系） 去选择元素， 基本组成部分就是基础选择器
后代选择器也叫包含选择器
书写方式： 空格表示后代， 基础选择器中间使用空格分隔， 空格前面的选择器选中的标签必须是后面选择器选中标签的祖先级
选择范围： 通过后代选择器中前面的一系列基础选择器缩小选择范围， 最终由最后一个选择器确定选中的标签
注意： 后代选择器必须满足所有的后代关系才能够被选中， 后代关系不一定只能是父子关系
后代选择器特点
优点： 减少 class 属性的使用， 选择效率更高
.box1 ul li p {
color: red;
}
.box1 p {
color: green;
}
交集选择器
通过一个标签之上满足所有的基础选择器的需求去选择标签
书写方式： 基础选择器进行如果有标签选择器参与交集， 必须书写在开头
选择范围： 选择的是满足所有基础选择器需求的标签， 如果一个条件不满足都不能被选中
比较常见的是标签与类的交集
.box1 p.demo {
color: green;
}
交集选择器更多写法
交集选择器可以进行类名的连续交集， 需要满足更多的条件才能选中标签。
IE6 不支持类名连续交集写法。
交集选择器可以作为其他高级选择器的组成部分
并集选择器
-
不同选择器选中的元素都要设置相同的样式， 多次书写相同的样式属性对代码造成浪费， 可以将前面六种选择器可以进行并集书写， 相当于一种简化写法
书写方式： 将多个选择器中间用逗号进行分隔， 最后一个后面不能加逗号
选择范围： 是所有的单独选择器选中的标签的并集集合。
body,h2,div,ul,li,p {
margin: 0;
padding: 0;
}
并集选择器用途
如果多个标签具有公共样式， 但是不能用一个选择器选中， 可以使用并集写法
可以使用标签选择器的并集写法， 进行默认样式的清除， 替换通配符的功能
CSS层叠式
继承性
如果一个标签没有设置过一些样式， 它的某个祖先级曾经设置过， 在浏览器中该标签也加载了这些样式， 这些样式都是从祖先级继承而来， 这种现象就是继承性
能够被继承的样式是所有的文字相关样式属性， 其他的属性都不能被继承
.box1 {
width: 200px;
height: 200px;
background-color: red;
color: green;
font-family: "宋体";
font-size: 14px;
}
继承性应用
继承性是一个很好的性质， 可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>， 后期所有的后代标签都可以从 <body> 进行继承
body {
color: green;
font-family: "宋体";
font-size: 14px;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
}
层叠性
思考问题： 同一个标签可以被多个选择器选中， 如果选择器后面设置了相同的样式属性， 标签最终该加载哪个？ 或者， 在继承性中， 如果多个祖先都设置了相同的文字样式， 后代中该继承哪个祖先级的？
解决方法： 就是使用层叠性去解决冲突。 多个选择器在进行对比的过程中， 最终只有一个属性会成功加载， 它会层叠、 覆盖掉其他的属性。
判断最终胜出的属性是谁， 需要依赖判断优先级
选中目标标签
-
第一步： 比较多个选择器的权重， 权重高的层叠权重低的。
基础选择器的权重： 根据选择范围， 范围越大权重越小， *< 标签选择器 < 类选择器 < id 选择器。
高级选择器权重比较方法： 依次比较组成高级选择器的 id 的个数， 类的个数， 标签的个数， 如果前面能够比较出大小就不再比较后面， 如果前面相等就往后比较，直到比较出大小。
比较顺序： id 个数, 类的个数, 标签的个数
第二步： 如果选择器权重都相同， 需要比较 CSS 中代码的书写顺序， 后写的层叠先写的
选中目标标签的组先级
-
如果选择器选中的是祖先元素， 文字的样式可以被继承。
比较就近原则， 比较选择器选中的祖先级在 HTML 结构中距离目标标签的远近， 近的层叠远的
如果选中的祖先级距离目标一样近（同一个祖先级） ， 比较选择器权重，权重大的层叠小的。
如果距离一样近， 权重也相同， 最后比较 CSS 中的书写顺序， 后面的层叠前面的
! important 关键字
如果在比较选择器权重的过程中， 遇见一个 !important 关键字， 可以将某条 CSS样式属性的权重提升到最大。
书写位置： 在某个css属性的属性值后面 空格加 !important
-
注意：
就近原则中， 不需要比较选择器权重， 所有会失效
important 不能提升选择器的权重， 只能提升某条属性的权重到最大
#box2 {
color: yellow !important;
}
#box2 .box3 {
color: blue;
行内式权重
行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高
但是， 与 !important 关键字相比权重要低
