CSS 选择器 { 样式 }
选择器：基础选择器（单个选择器物），复合选择器物
基础选择器：标签选择器，类选择器，ID选择器，通配符选择器（' * '）
类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用
类选择器-多类名：
给一个标签指定多个类名，从而达到更多的选择目的。
一个标签多个名字。
这个标签分别具有这些类名的样式。
通配符选择器使用" * " 定义，表示获取页面中的所有元素。
CSS 字体属性
字体复合属性
body {
font: font-style font-weight font-size/line-height font-family
字体连写有顺序 不能随意调整位置 字号字体必须同时出现
}
CSS 文本属性
color 文本颜色
text-align 文本对齐 设置文本水平的对齐方式
text-indent 文本缩近 段落首行缩进2个字的距离，text-indent：2em;
text-decoration 文本修饰 添加下划线 underline 取消下划线 none
line-height 行高 控制行与行之间的距离
CSS的引入方式
1 行内样式 行内式
2 内部样式 嵌入式，一般放到 head 标签里面
3 外部样式 链接式 实现结构样式相分离
.css 样式文件，把所有CSS代码都放到此文件中。
在HTML的页面中，使用标签引入这个文件。
复合选择器
基本选择器组合而成
含有：后代选择器， 子选择器， 并集选择器，伪类选择器
后代选择器：元素1 元素2 { 样式声明 }
元素1 元素2 中间空格隔开
元素1 是父级， 元素2是子级， 最终选择是 元素2
元素2 可以是儿子、而可以孙子。。。。只要是后代即可
元素1 和 元素2 可以是任意基础选择器 （标签、类、ID）
子选择器
元素1>元素2 { 样式声明 }
元素2 必须是亲儿子
并集选择器：可以选择多组标签
元素1，元素2 { 样式声明 }
任何形式的选择器都可以作为并集选择器的一部分。
伪类选择器
伪类选择器用于向某些选择器添加效果
链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 鼠标指针位于其上链接
a:active 选择活动链接（鼠标按下未弹起）
为确保生效：按照 LVHA 的循环顺序声明 link -> visited -> hover -> active
因为a链接在浏览器中有默认样式，所以在实际开发中需要给链接单独指定样式
链接伪类选择器实际工作开发中的写法：
a {
color ： gray;
}
a:hover {
color: red;
}
:focus 伪类选择器 用于 获取获得焦点的表单元素。
input：focus {
background-color：yellow;
}
CSS 元素 显示模式
块元素、行内元素
块元素：
.... -
块元素特点：
1 独占一行
2 高度 宽度 外边距 内边距 都可以控制
3 宽度默认是容器（父级宽度）的100%
4 是一个容器 及 盒子，里面可以放 行内 或 块元素
（文字类的元素【
.....】内不能使用块级元素）
行内元素： .... 等文字相关
行内元素的特点：
1 相邻行内元素在一行 一行可以显示多个
2 高 宽 直接设置无效
3 默认的宽度就是本身内容的宽度
4 行内元素只能容纳文本或其他行内元素
（链接里面不能再放链接 里面可以放块元素）
行内块元素： ![]()
行内块元素特点:
1 相邻行内元素在一行 但 之间 会有空隙 （一行可以显示多个）
2 默认宽度就是本身内容的宽度
3 宽度 行高 外边距 内边距 都可以控制 （块级元素）
元素显示模式转换
转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块： display: inline-block;
CSS 的背景
背景属性：背景颜色 背景图片 背景平铺 背景图片位置 背景图像固定
background-color：颜色值； 默认值是 transparent（透明）
background-image：url();
background-repeat 背景图像平铺
repeat | no-repeat | repeat-x | repeat-y
background-position: x y; 属性可以改变图片在背景中的位置
background-attachment : scroll | fixed 属性设置背景图像是否固定或者随着页面其余部分滚动
background 属性合并
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
CSS 背景半透明颜色
background：rgba（0,0,0,0.3） 最后一个参数是 alpha 透明度，取值范围在 0~1 之间，必须是 4 个值
可以把 0.3 省略变为 .3
CSS的三大特性
层叠性 继承 优先级
层叠性：相同选择器给设置相同的样式，样式就会 覆盖（层叠）另一个冲突的样式。
哪个样式离结构近执行哪个样式
样式不冲突 不会层叠
继承性：子标签会继承父标签的某些特性
主要是文字相关的属性 text- line- font- 以及 color
行高的继承性
body {
font： 12px/1.5 Microsoft YaHei;
}
行高可以跟单位 也可以不跟单位，不跟单位表示 是字体大小的 1.5 倍
优先级：
！important > 行内样式 style="" > ID选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承 或者 *
color： pink！important； 加在属性的后边
优先级 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
网页布局的核心本质：利用CSS摆盒子
网页布局的核心：盒子模型，浮动，定位
盒子模型组成：边框，外边距，内边距，实际内容
border，margin， padding，content
border：border-width || border-style || color 没有顺序要求
border-top : 1px solid red;
border-collapse: collapse; 表示相邻边框合并在一起，此属性控制浏览器绘制表格边框的方式。
border、padding 都会 影响盒子的尺寸
水平居中：
块级元素 外边距可以让盒子水平居中，需满足两个条件：
1、盒子必须指定了宽度（width）
2、盒子左右的外边距都设置为auto
行内元素，行内块元素 水平居中，给父元素添加 text-align: center
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
对于 父子关系的 块元素，父元素上有上边距，子元素也有上边距，此时父元素会塌陷较大的外边距值。
解决方案：
可以为父元素定义上边框。
可以为父元素定义内边框。
为父元素添加 overflow:hidden
浮动 固定 绝对定位 的盒子不会有塌陷的问题
清除内外边距
很多网页元素都带有默认的内外边距（不同浏览器也不一致）
布局前 第一步 清除网页的元素的内外边距
* {
padding：0；
margin：0；
}
行内元素 只设置左右的内外边距，不设置上下的内外边距
但转换为 块级，行内块元素就可以。
去掉 li 前面的小圆点
li {
list-style: none;
}
border-radius 属性用于设置元素的外边框圆角
border-radius:length
50% 表示高度、宽度的一半
可以跟四个值：左上 右上 右下 左下
或者：
border-top-left-radius、
border-top-right-radius、
border-bottom-rigth-radius、
border-bottom-left-radius
box-shadow 属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊距离
spread 阴影尺寸
color 阴影的颜色
inset 外部阴影改为内部阴影
文字阴影效果
text-shadow: h-shadow v-shadow blur color;
CSS传统布局方式：
标准流：标签按照规定好默认方式排列
浮动：浮动可以改变元素标签默认的排列方式
定位
网页布局第一准则
多个块级元素 纵向排列 标准流
横向排列 用浮动
浮动特性
浮动元素会脱离标准流（脱标），移动到指定的位置，不在保留原来的位置，浮动的元素在上边
浮动元素 一行显示 元素顶部对齐
浮动元素具有行内块元素的特性
浮动注意事项：
1、先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置
2、浮动的盒子只会影响浮动盒子后边的标准流，不会影响前面的标准流。
清除浮动
清除浮动元素造成的影响
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下边的标准流了。
选择器 { clear：属性值 }
left： 清除左侧浮动的影响
right： 清除右侧浮动的影响
both： 同时清除左右两侧浮动的影响
清除浮动的策略 闭合浮动
清除浮动的方法：
1、额外标签法
要求添加的元素必须是块级元素
2、父元素添加 overflow
3、父元素添加 after 伪元素
4、父元素添加 双 伪元素
-
块元素特点：
1 独占一行
2 高度 宽度 外边距 内边距 都可以控制
3 宽度默认是容器（父级宽度）的100%
4 是一个容器 及 盒子，里面可以放 行内 或 块元素
（文字类的元素【
.....】内不能使用块级元素）
行内元素： .... 等文字相关
行内元素的特点：
1 相邻行内元素在一行 一行可以显示多个
2 高 宽 直接设置无效
3 默认的宽度就是本身内容的宽度
4 行内元素只能容纳文本或其他行内元素
（链接里面不能再放链接 里面可以放块元素）
行内块元素：
同时具有块元素和行内元素的特点 行内块元素特点:
1 相邻行内元素在一行 但 之间 会有空隙 （一行可以显示多个）
2 默认宽度就是本身内容的宽度
3 宽度 行高 外边距 内边距 都可以控制 （块级元素）
元素显示模式转换
转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块： display: inline-block;
CSS 的背景
背景属性：背景颜色 背景图片 背景平铺 背景图片位置 背景图像固定
background-color：颜色值； 默认值是 transparent（透明）
background-image：url();
background-repeat 背景图像平铺
repeat | no-repeat | repeat-x | repeat-y
background-position: x y; 属性可以改变图片在背景中的位置
background-attachment : scroll | fixed 属性设置背景图像是否固定或者随着页面其余部分滚动
background 属性合并
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
CSS 背景半透明颜色
background：rgba（0,0,0,0.3） 最后一个参数是 alpha 透明度，取值范围在 0~1 之间，必须是 4 个值
可以把 0.3 省略变为 .3
CSS的三大特性
层叠性 继承 优先级
层叠性：相同选择器给设置相同的样式，样式就会 覆盖（层叠）另一个冲突的样式。
哪个样式离结构近执行哪个样式
样式不冲突 不会层叠
继承性：子标签会继承父标签的某些特性
主要是文字相关的属性 text- line- font- 以及 color
行高的继承性
body {
font： 12px/1.5 Microsoft YaHei;
}
行高可以跟单位 也可以不跟单位，不跟单位表示 是字体大小的 1.5 倍
优先级：
！important > 行内样式 style="" > ID选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承 或者 *
color： pink！important； 加在属性的后边
优先级 权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重
网页布局的核心本质：利用CSS摆盒子
网页布局的核心：盒子模型，浮动，定位
盒子模型组成：边框，外边距，内边距，实际内容
border，margin， padding，content
border：border-width || border-style || color 没有顺序要求
border-top : 1px solid red;
border-collapse: collapse; 表示相邻边框合并在一起，此属性控制浏览器绘制表格边框的方式。
border、padding 都会 影响盒子的尺寸
水平居中：
块级元素 外边距可以让盒子水平居中，需满足两个条件：
1、盒子必须指定了宽度（width）
2、盒子左右的外边距都设置为auto
行内元素，行内块元素 水平居中，给父元素添加 text-align: center
外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
对于 父子关系的 块元素，父元素上有上边距，子元素也有上边距，此时父元素会塌陷较大的外边距值。
解决方案：
可以为父元素定义上边框。
可以为父元素定义内边框。
为父元素添加 overflow:hidden
浮动 固定 绝对定位 的盒子不会有塌陷的问题
清除内外边距
很多网页元素都带有默认的内外边距（不同浏览器也不一致）
布局前 第一步 清除网页的元素的内外边距
* {
padding：0；
margin：0；
}
行内元素 只设置左右的内外边距，不设置上下的内外边距
但转换为 块级，行内块元素就可以。
去掉 li 前面的小圆点
li {
list-style: none;
}
border-radius 属性用于设置元素的外边框圆角
border-radius:length
50% 表示高度、宽度的一半
可以跟四个值：左上 右上 右下 左下
或者：
border-top-left-radius、
border-top-right-radius、
border-bottom-rigth-radius、
border-bottom-left-radius
box-shadow 属性为盒子添加阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 水平阴影的位置
v-shadow 垂直阴影的位置
blur 模糊距离
spread 阴影尺寸
color 阴影的颜色
inset 外部阴影改为内部阴影
文字阴影效果
text-shadow: h-shadow v-shadow blur color;
CSS传统布局方式：
标准流：标签按照规定好默认方式排列
浮动：浮动可以改变元素标签默认的排列方式
定位
网页布局第一准则
多个块级元素 纵向排列 标准流
横向排列 用浮动
浮动特性
浮动元素会脱离标准流（脱标），移动到指定的位置，不在保留原来的位置，浮动的元素在上边
浮动元素 一行显示 元素顶部对齐
浮动元素具有行内块元素的特性
浮动注意事项：
1、先用标准流的父元素排列上下位置，之后内部子元素采用浮动排列左右位置
2、浮动的盒子只会影响浮动盒子后边的标准流，不会影响前面的标准流。
清除浮动
清除浮动元素造成的影响
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下边的标准流了。
选择器 { clear：属性值 }
left： 清除左侧浮动的影响
right： 清除右侧浮动的影响
both： 同时清除左右两侧浮动的影响
清除浮动的策略 闭合浮动
清除浮动的方法：
1、额外标签法
要求添加的元素必须是块级元素
2、父元素添加 overflow
3、父元素添加 after 伪元素
4、父元素添加 双 伪元素