1. css引用: 在<head><head/>标签内
2. css注释: /* 注释 */
3. html注释: <!-- 注释 -->
4. 内部样式: <style type="text/css">样式</style>
5. 行内样式: <h1 style="color: red">内容</h1>
6. 导入式: <style type="text/css">@import url('style.css')</style>
7. 外部样式: <link href="style.css" rel="stylesheet" type="text/css" />
8. 优先级: 行内样式 > 内部样式 > 外部样式
9. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
10. 最后定义的优先级最高(就近原则)
----------------------------------------------------------------------------------------------
// 选择器
1. 类选择器: class="class"
2. ID选择器: id="id"
3. 群组选择器: div, .class, #id // 用逗号分隔
4. 后代选择器: div p //div下的所有p元素
5. 全局选择器: *
6. 伪类选择器:
:link // 未访问的链接
:visited // 已访问的链接
:hover // 鼠标悬停状态
:active // 激活的链接
----------------------------------------------------------------------------------------------
// css层叠
1. 可以定义多个样式
2. 不冲突时,多个样式可层叠为一个
3. 冲突时,按不同样式规则优先级来应用样式
4. css能继承父级元素的某些css
5. 优先级: #id > .class > 标签
6. 同类样式多次引用,样式表中后定义的优先级高
7. 权值相同,就近原则,权值不同,根据权值谁高用谁
8. 选择器权值:
标签选择器: 1
类和伪类: 10
ID: 100
通配符: 0
行内样式: 1000
9. 统计不同选择器个数 * 对应权值再相加 = 权值
10. 优先级最高: !important
11. css 优先级看权值，权值大的就生效，权值相同则看定义位置，谁在后面谁生效
----------------------------------------------------------------------------------------------
// css命名规范
1. 采用英文字母、数字以及'-'和'_'命名
2. 以小写字母开头,不能以数字和'-'、'_'开头
3. 命名形式: 单词、连字符、下划线、驼峰
4. 具有意义的命名
5. 常用的css样式命名:
页面结构: header(页头)、main(页面主体)、footer(页尾)、content(内容)、container(容器)、nav(导航)、sidebar(侧边栏)、column(栏目)
导航: nav(导航)、mainnav(主导航)、subnav(子导航)、topnav(顶导航)、sidebar(边导航)、leftnav(左导航)、rightnav(右导航)、menu(菜单)、submenu(子菜单)、title(标题)、summary(摘要)
功能: logo(标志)、banner(广告)、login(登录)、loginbar(登录条)、register(注册)、search(搜索)、shop(功能区)
----------------------------------------------------------------------------------------------
// 文本样式
1. font-family // 字体属性,具体字体名、字体集,值中间用逗号隔开,引号嵌套,外用双内用单引号,sans-serif没修饰,serif有修饰
2. font-size // 字体大小,绝对单位、相对单位
1in = 2.54cm // in英寸
1cm = 0.394in
1mm = 0.1cm
72pt = 1in // pt磅
xx-small = 9px
x-small = 11px
small = 13px
medium = 16px
large = 19px
x-large = 23px
xx-large = 28px
larger // 相对于父元素字体大小变大
smaller // 相对于父元素字体大小变小
3. color: 颜色名/十六进制/rgb // 文字颜色
4. font-weight: normal/bold/bolder/lighter/100 ~ 900 //文字粗细
5. font-style: normal/italic/oblique // 斜体
6. font-cariant: normal/small-caps // 设置元素中文本为小型大写字母
7. font属性简写:
字体大小和字体要同时设置
font: font-style font-variant font-weight font-size/line-height
----------------------------------------------------------------------------------------------
// 文本对齐
1. text-align: left/right/center/justify // 该属性只对块级元素设置有效
2. text-indent: 2em // 缩进2字符
3. line-height: 长度/百分比 // 设置元素中文行高,浏览器有默认行高
4. vertical-align: baseline(基线)/sub(上移)/super(下移)/top(顶部对齐)/text-top(文字顶部对齐)/middle(中线)/bottom(底部对齐)/text-bottom(文字底部对齐)/长度/百分比 // 垂直对齐,只对行内元素和单元格元素起作用
5. word-spacing: 15px/1em // 设置元素内单词的间距,以空格为准
6. letter-spacing: 15px/1em // 设置元素内字母之间的间距
7. text-transform: capitalize(首字母大写)/uppercase(全大写)/lowercase(全小写)/none // 设置元素内文本的大小写
8. text-decoration: underline(下划线)/overline(上划线)/line-through(贯穿线)/blink(闪烁效果)/none // 设置元素内文本的装饰且不能继承
----------------------------------------------------------------------------------------------
// 盒子模型
1. box-sizing: content-box/border-box
2. min-width: 最小宽度
3. max-width: 最大宽度
4. width: 长度值/百分比/auto
5. min-height: 最小高度
6. max-height: 最大高度
7. height: 长度值/百分比/auto
8. 宽度、高度只对块级元素和替换元素有效
9. 替换元素: img、input等
10. border-width: thin/medium/thick/长度值
11. border-color: 颜色/transparent
12. border-style: solid/double/dotted(点状)/dashed(虚线)/inherit(继承)
13. border: 1px solid red
14. margin: auto // 水平居中
15. 行内元素是具有盒子模型的
16. 行内元素的padding-top、padding-bottom、margin-top、margin-bottom都是无效的
17. 行内元素的padding-left、padding-right、margin-left、margin-right都是有效的
18. display: inline/block/inline-block/table/inline-table/table-cell
19. 行内元素之间有空行是因为html中有换行
20. 在外面div设置字体大小0px,单独设置里面的字体大小
----------------------------------------------------------------------------------------------
// 背景
1. background-color: 颜色/tansparent // 背景颜色
2. background-image: url('')/none // 背景图片
3. 颜色和图片同时设置会显示图片,两者包括内边距和边框
4. background-repeat: repeat(重复)/no-repeat(不重复)/repeat-x(水平重复)/repeat-y(垂直重复) // 背景图片重复
5. background-attachment: scroll(默认滚动)/fixed(固定) // 背景图片显示方式
6. background-position: 百分比/top/right/bottom/left/center // 背景图片定位
7. background: color image repeat attachment position // 缩写
----------------------------------------------------------------------------------------------
// 列表
1. list-style-type: 关键字/none // 列表项标记
2. 关键字:
无序列表: disc/circle/square
有序列表: decimal/lower-roman/upper-roman/lower-alpha/upper-alpha
3. list-style-image: url('') // 列表项标记图片
4. list-style-position: inside(位置在文本内,环绕文本根据标记对齐)/outsie(默认,位置在文本外,环绕文本不根据标记对齐) // 列表项标记的位置
5. list-style: url('') inside circle // 缩写,图片会覆盖样式
----------------------------------------------------------------------------------------------
// 浮动
1. 加了浮动会变成inline-block属性
2. 使元素向左或向右移动,只能左右,不能上下
3. 浮动元素碰到包含框或另一个浮动框,浮动就会停止
4. 浮动元素之后的元素将围绕它,之前的不受影响
5. 浮动元素会脱离标准流
6. float: left/right/none
7. clear: left/right/both/none
8. 设置了float元素会影响其他相邻元素,需要用clear清除浮动,clear只会影响自身,不会对其他相邻元素造成影响
9. 清除浮动常用方法:（清除浮动指的是清除设置了浮动属性之后给别的元素带来的影响，并不是清除设置的浮动属性）
在浮动元素后加一个 div.clear{ clear: both }
在浮动元素的父容器添加 overflow: hidden; zoom: 1; 触发BFC
在浮动元素的父容器添加一个空盒子: .clearfix:after{ content: ''; height: 0; display: block; visibility: hidden; clear: both; zoom: 1 }
父级元素定义height,只适合高度固定的布局
父级元素也一起浮动
10. 会脱离文档流,但仍然存在文本流当中占据空间
----------------------------------------------------------------------------------------------
// 定位
1. z-index只对定位元素起作用
2. position: static/relative/absolute/fixed/sticky
3. static // 静态定位/常规定位/自然定位
会使元素定位于常规/自然流中
忽略top/bottom/left/right/z-index声明
两个相邻元素的外边距会重合,保留大的
有固定width和height值的元素,设置margin: 0 auto;会水平居中
4. relative // 相对定位,依据自身定位
可以让元素成为可定位的祖先元素
可以使用top/bottom/left/right/z-index进行相对定位,相对于在常规流中的位置
相对定位的元素不会离开常规流
任何元素都可以设置relative,它的绝对定位的后代都可以相对于它进行绝对定位
可以使浮动元素发生偏移,并控制它们的堆叠顺序
5. absolute // 绝对定位,依据最近一层的元素定位(absolute、relative、fixed、body)
可以让元素脱离常规流
设置定位要注意是最近定位的祖先元素,如果没有则是<body>为祖先
绝对定位属性如果没有宽高,且偏移量都是0,就会填充整个容器
如果绝对定位属性有宽高,且偏移量都是0,把margin: auto;会垂直水平居中
如果偏移量都为auto,则会回到起始位置
6. fixed // 固定定位
和绝对定位一样
相对于浏览器定位,随滚动条滚动而滚动
适用于导航跟随,下面要对应撑开padding值
7. sticky // 磁铁定位
relative + fixed 相结合制造出吸附效果
如果产生偏移,原位置还是会在常规流中
如果它最近祖先元素有滚动,那么它的偏移标尺就是最近的祖先元素,如果最近的祖先元素没有滚动,那么它的偏移标尺就是浏览器视口
----------------------------------------------------------------------------------------------
// CSS 可继承的属性，在浏览器中中显示继承而来的样式是 Inherited from Element
1. font 家族，包含有 font-family、font-size、font-style、font-variant、font-weight
2. 字母间距，letter-spacing
3. 可见性，visibility
4. 字间距，word-spacing
5. 文字展示，包含有 line-height、text-align、text-indent、text-transform
----------------------------------------------------------------------------------------------
// 其他
1. filter: blur(8px) // 模糊
2. cursor: move; // 鼠标变成可移动
3. cursor: se-resize; // 鼠标变成可放大缩小
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
