CSS导读
网页构建
HTML：结构
CSS：样式
结构与样式相分离。
代码风格
选择器与大括号之间，冒号后面都要有一个空格
颜色中有一个transparent是透明的意思
编辑器：VSCode
CSS属性
color, width: …px, height: …px
CSS内容
CSS选择器包括基础选择器和复合选择器。
一、基础选择器
基础选择器包括标签选择器、类选择器、id选择器和通配符选择器。
1.标签选择器
标签名 {
属性名1: 属性值1;
属性名2: 属性值2;
}对文档中所有指定标签设置样式（没有<>号）
2.类选择器与多类名
.类名 {
属性名1: 属性值1;
属性名2: 属性值2;
}<div class="类名1 类名2"></div>1.长名称或词组用中横线分隔单词，如：.news-header。
2.不能用纯数字命名。
3.不能用HTML中标签名来命名。
3.id选择器
#标签id {
属性名1: 属性值1;
属性名2: 属性值2;
}<div id="标签id"></div>id独一无二
4.通配符选择器
* {
属性名1: 属性值1;
属性名2: 属性值2;
}对全局设置样式
二、字体属性
1.font-family字体系列
div {font-family: "微软雅黑", "宋体", Arial}
可以设置多个字体，浏览器默认顺序：第一个不兼容时设置第二个，第二个……都不兼容则使用默认字体。
当字体不是单词时，需用单/双引号括起来
2.font-size字体大小
div {font-size: 15px}
标题标签比较特殊，需要单独指定字体大小。
px：像素
3.font-weight字体粗细
div {font-weight: normal}
| 属性值 | 描述 |
|---|---|
| normal | 正常粗细（默认） |
| bold | 加粗 |
| 100-900 | 400相当于normal，700相当于bold，没有单位 |
4.font-style字体样式
div {font-style: normal}
| 属性值 | 描述 |
|---|---|
| normal | 正常字体（默认） |
| italic | 斜体 |
5.font复合属性
div {font: font-style font-weight font-size/line-height font-family;}
不能换顺序
可以省略，但必须保留font-size和font-family。
三、文本属性
1.color文本颜色
div {color: red;}
| 表示形式 | 属性值 |
|---|---|
| 预设颜色值 | red，green，blue等 |
| 十六进制（常用） | #FF0000等 |
| RGB | rgb(100,100,100)或rgb(50%,50%,50%)等 |
2.text-align文本对齐
div {text-align: center（居中）/right（右对齐）/left（左对齐）；}
3.text-decoration文本装饰
div {text-decoration: none；}
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线。最常用，用于删除超链接自带的下划线。 |
| underline | 下划线。较常用。 |
| overline | 上划线。几乎不用。 |
| line-through | 删除线。不常用。 |
4.text-indent文本缩进
| 属性值 | 描述 |
|---|---|
| px | 像素单位，可以为负数表示向前突出。 |
| em | 相对单位，表示当前元素一个文字的大小；若未设置大小，则按照父元素的一个文字大小。 |
5.line-height行间距/行高
假如设置26行间距，文本高度为20时，则上间距为3，下间距为3.
是*line-height不是text*
测量工具：FSCapture
四、CSS的引入方式
1.三种样式表
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
2.内部样式表
在HTML文件head标签中用style标签表示。
3.行内样式表
<div style="color: red;">
双引号
4.外部样式表
在<head>标签中添加<link rel="stylesheet" href="css文件路径">
注意事项
想让图片水平居中，则是让它的父标签添加水平居中的代码
五、Emmet语法
六、复合选择器
1.后代选择器/包含选择器
父元素 子元素 { 样式声明 }此时子元素中若还有子元素，样式声明对其同样有效
或
父元素 子元素 子子元素 子子子…… { 样式声明 }父子元素可以是任意基础的选择器：
.class 父元素 子元素 { 样式声明 }如
<head>
<style>
.aaa li a { 样式声明 }
</style>
</head>
<body>
<ol class="aaa">
<li><a href="#">123</a></li> <!--此时样式声明对该超链接起作用-->
</ol>
</body>2.子元素选择器
父元素 > 子元素 { 样式声明 }子元素选择器只选择最近一级的子元素。如果子元素中还有子子元素，子元素选择器对这个子子元素不起作用。
3.并集选择器
元素1,
元素2 {
样式声明
}- 书写习惯，并集选择器竖着写
- 表示选择多组标签，定义相同的样式
- 同样可以是任意基础的选择器
4.伪类选择器
1.链接伪类选择器
a:link { 样式声明 } /*选择所有未被访问的链接*/
a:visited { 样式声明 } /*选择所有已被访问的链接*/
a:hover { 样式声明 } /*选择鼠标指针位于其上的链接*/
a:active { 样式声明 } /*选择活动链接（鼠标按下未弹起的链接）*/注意事项
- 按照L（link）V（visited）H（hover）A（active）的顺序声明
- 因为a链接在浏览器中有默认的样式，所以在实际中需要给链接单独指定样式。(比如假设一个div标签中包含着一个a标签，我们设置了div的css样式，但不会对里面的a标签起作用。)
常用的链接样式
a {
color: gray;
text-decoration: none;
}
a:hover {
color: b
}2.focus伪类选择器
input:focus {
background-color: 输入框背景颜色;
color: 输入内容的颜色;
}七、CSS元素显示模式
1.什么是元素显示模式
指元素（标签）以什么方式显示，如div、h1独占一行，span一行里可以有多个。
一般分为块元素（独占一行）和行内元素（一行多个）两种类型。
2.块元素
常见的块元素有h1~h6，p，div，ul，ol，li等，其中div是最典型的块元素。
特点：
- 独占一行。
- 高度、宽度、内外边距都可以自定义。
- 宽度默认是父级宽度的100%。
- 是一个容器或盒子，里面可以放行内元素或者块元素。
注意： 文字类的元素（如p，h1~h6等）内不能使用块级元素。
3.行内元素/内联元素
常见的块元素有a，strong，span，em等，其中span是最典型的行内元素。
特点：
- 一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意：
- 链接里不能再放链接。
- 特殊情况a链接里可以放块级元素，但给a转换一下更安全。
4.行内块元素
同时具有两种元素的特点，如img， input， td。
特点：
- 一行可以显示多个。
- 默认宽度是其内容的宽度。
- 高度、行高、内外边距可以自定义。、
5.元素转换
特殊情况下，我们需要元素模式的转换，比如增加a链接的触发范围。
- 转换为块元素：
元素 {display: block} - 转换为行内元素：
元素 {display: inline} - 转换为行内块元素：
元素 {display: inline-block}
小技巧：使单行文字垂直居中
使文字高度等于盒子高度。
八、背景属性
1.background-color背景颜色
background-color: 颜色值（#16进制或RGB(r,g,b)格式）;
默认为transparent（无色透明）
2.background-image背景图片
background-image: url(图片路径)
- 别忘加url()。
- url()里的文件路径不需要加引号。
- 背景图片图层位于背景颜色之上。
3.background-repeat背景图片平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
默认平铺。
4.background-position背景图片方位
1.后跟方位名词
可以加left,center,right||top,center,bottom
- 如果只指定一个方位名词，另一个值省略，则第二个值默认居中对齐。
- 没有顺序关系。
- 图片x,y都居中时，写一个或两个center都行。
2.使用精确单位
background-position: x方向像素px y方向像素px;
x, y的顺序不能变。
只指定一个数值时，指定的数值必定为x坐标，y坐标默认垂直居中。
3.使用混合单位
x, y的顺序不能变，先是x，后是y。
5.background-attachment背景固定/滚动
| 属性值 | 描述 |
|---|---|
| scroll | （默认）背景随页面而滚动 |
| fixed | 背景固定 |
6.background复合属性
没有顺序要求，但一般习惯于按以下顺序写：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景位置
7.附加：背景色半透明
background-color: rgba(r,g,b,a)
a（Alpha）指透明度，为0~1之间的小数。可以省略0，写成.3等的形式。
九、CSS三大特性
1.层叠性
就近原则，后来者居上。
2.继承性
例：
div {
color: blue;
}<div>
<p>
test
</p>
</div>此时“test”也会变成蓝色
子元素可以继承父代元素的样式（font-xxxxx，text-xxxxx，line-xxxxx，color）
行高的继承
body {
font: 12px/1.5 "Microsoft YaHei";
}
p {
font-size: 10px;
}<body>
<p>
文字
</p>
</body>“/”后面的1.5指的是子元素文字的1.5倍
3.优先级（权重）
| 选择器 | 选择器权重 |
|---|---|
| 继承 或 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式 style=”” | 1,0,0,0 |
| !important | 无穷大 |
继承的权重是0
使用!important：
div {
color: red!important;
}此时color: red属性为全局优先。
权重的叠加
如果是复合选择器，则会有权重叠加，需要计算权重。
举例：
- div ul li —–0,0,0,1 + 0,0,0,1 +0,0,0,1—->0,0,0,3
- .nav ul li —–0,0,1,0 + 0,0,0,1 +0,0,0,1—->0,0,1,2
- a:hover —–0,0,0,1 + 0,0,1,0—->0,0,1,1
- .nav a —–0,0,1,0 + 0,0,0,1—->0,0,1,1
十、CSS的盒子模型
1.网页布局的本质
网页布局过程：
- 准备好相关网页元素，网页元素基本都是盒子Box（其他的也行，如表格table，段落p等）。
- 利用css设置好盒子样式，并摆放到网页相应位置。
- 往盒子里面装内容。
网页布局的核心本质：利用CSS摆盒子。
2.盒子模型的组成
由 边框（border）、内边距（padding）、外边距（margin）和实际内容（content） 组成。
边框border
border: border-width（边框宽度，单位px） || border-style （边框样式）|| border-color（边框颜色）;
border-collapse: collapse; //合并表格相邻单元格边框
border-style：
- solid实线边框
- dashed虚线边框
- dotted点线边框
border属性可以简写，三个值没有顺序要求
如果想分开设置上下左右边框，可以将属性名写为border-top、border-bottom、border-left、border-right。
边框粗细包括在盒子宽高中（比如一个20*20的盒子有一个粗细为2的边框的话，它的实际大小为22*22
解决方案：减小盒子本身
内边距padding
有padding-bottom/top/left/right四个属性可设置，单位px。
| 复合属性写法 |
|---|
| 一个值时，代表四个方向都设置。 |
| 两个值时，第一个值为上下内边距，第二个值为左右内边距。 |
| 三个值时，第一个值为上内边距，第二个为左右内边距，第三个为下内边距。 |
| 四个值时，顺序依次为上，右，下，左（顺时针） |
padding和border一样会改变盒子实际大小，解决方案同border。
如果盒子本身没有指定height或width属性，则padding不会撑开盒子，没有指定的height或width按照父元素（如body）的宽度默认设置。
外边距margin
上下左右属性同padding，简写规则同padding
设置块元素左右居中对齐（必须先指定宽）：auto margin: 0 auto;
设置行内元素/行内块元素左右居中对齐：设置父级元素属性text-align: center;
外边距合并
当上下相邻的两个块元素如果上下各有margin-bottom和margin-top时，选择值较大的那一项作为两个块元素的距离
垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 为父元素定义上边框
- 为父元素定义内边距
- 为父元素添加overflow:hidden;。
清除内外边距（全局）
* {
padding: 0;
margin: 0;
}