目录
一，CSS
1.简介
什么是 CSS?
2.选择器
3.样式表
4.背景
5.文本
6.字体
7.链接
8.表格
9.盒子模型
10.边框
11.轮廓
12.外边距
编辑 编辑
13.填充
编辑
14.分组与嵌套
编辑
编辑 15.尺寸
16.显示与隐藏
编辑
17.定位
18.布局——overflow
编辑 19.浮动
元素怎样浮动
编辑
20.布局——水平&垂直对齐
元素居中对齐
21.组合选择符
22.伪类
编辑 编辑
编辑 23.伪元素
24.导航栏
编辑
25.属性选择器
编辑
26.important规则
什么是 !important
重要说明
二，CSS3
1.简介
2.边框
3.圆角
CSS3 border-radius - 指定每个圆角
编辑
4.背景
编辑
5.渐变
编辑
CSS3 径向渐变
6.文本效果
CSS3 文本效果
编辑
7.字体
编辑 编辑
8.2D转换
CSS3 转换
它是如何工作？
编辑
9.3D转换
3D 转换
10.过渡
11.动画
CSS3 @keyframes 规则
编辑
CSS3动画是什么？
12.多列
13.用户界面
14.按钮
实例
实例
补充：
CSS三大特性：层叠性，继承性，优先级
权重
清除内外边距
清除浮动
定位
字体图标
布局技巧
新增属性选择器
三，案例
1.小米侧边栏
2.五彩导航
3.
4.小米布局编辑
5.淘宝焦点图编辑
6.土豆网遮罩
7.旋转案例
8.鼠标经过图片时，图片放大
9.综合案例-——旋转木马
一，CSS
1.简介
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
2.选择器
3.样式表
外部样式表
内部样式表
内联样式
多重样式
4.背景
- background-color 背景颜色
- background-image 背景图像
- background-repeat 背景是否平铺
- background-attachment 背景是否固定
- background-position 背景位置
背景简写
5.文本
文本颜色
对齐方式
文本修饰
文本转换
文本缩进
所有文本属性
6.字体
字体系列
字体样式
字体大小
所有字体属性
7.链接
8.表格
表格边框
高度与宽度
文本对齐
填充
颜色
9.盒子模型
宽度与高度
10.边框
样式
宽度
颜色
单独设置各边
简写
边框属性
11.轮廓
12.外边距
13.填充
14.分组与嵌套
15.尺寸
16.显示与隐藏
17.定位
position 属性指定了元素的定位类型。
position 属性的五个值：
static
relative
fixed
absolute
sticky
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
粘性定位
18.布局——overflow
19.浮动
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
20.布局——水平&垂直对齐
元素居中对齐
要水平居中对齐一个元素(如
), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度，并将两边的空外边距平均分配
21.组合选择符
后代选择器
子元素选择器
相邻兄弟选择器
后续兄弟选择器
22.伪类
全部属性
23.伪元素
注意："first-line" 伪元素只能用于块级元素。
注意： 下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
24.导航栏
- list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
- 移除浏览器的默认设置将边距和填充设置为0
25.属性选择器
26.important规则
什么是 !important
CSS 中的 !important 规则用于增加样式的权重。
!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
重要说明
使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找 bug 变得更加困难了。
当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。
使用建议：
一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important
