CSS知识点总结
谷歌和苹果：-webkit-
火狐：-moz-
IE：-ms-
欧朋：-o-
一．什么是css？
CSS（Cascading Style Sheets）层叠样式表，专注于页面的表现层。
二．CSS引入方式
1.行内样式
在开始标签上加style=”样式属性名
1:样式属性值1;样式属性名2:样式属性值2;...”属性
2内嵌式
把所有的css样式都写在<style></style>标签内，<style></style>放在head标签内
3.外链式
把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在html里通过<link rel="stylesheet" href="css文件路径">来引入外部的css
优先级：
行内最大，其次谁离标签近，谁的优先级高（最晚优先级最高）
三．选择器
1. 统配符选择器选择所有的元素 0.5
*{}
2.标签选择器 1
标签名{}例如：p{}
3.类选择器 10
.类值{}例如：.content{}
拓展：选择器.类值{} div.box{} 类叫box的div元素
4.id选择器 100
#id值{} 例如：#con{}
5.包含选择器（后代选择器） 权重相加
6.分组选择器
选择器1，选择器2，...{}
扩展：选择器直接子元素：
选择器a>选择器b{} 选择器a里的所有直接选择器b 父子关系
.box>span{} 类box里的所有直接子元素span
7.相邻兄弟元素选择器（E+F）
EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻
8.通用兄弟选择器（E~F）
E和F元素是属于同一父元素之内，并且F元素在E元素之后，那么E~F选择器将选择所有E元素后面的F元素
9.E[attr]:只使用属性名，但没有确定任何属性值
10.E[attr="value"]
E[attr="value"]是指定了属性值
11.E[attr~="value"]
只要属性值中有一个value相匹配就可以选中该元素
12.E[attr^="value"]
选择attr属性值以“value”开头的所有元素
13.E[attr$="value"]
选择元素attr属性，并且他的属性值是以value结尾的
.14E[attr*="value"]
所选择的属性，其属性值中有这个"value"值都将被选中
15.E[attr^="value"]
选择器会选择attr属性值等于value或以value-开头的所有元素
选择器权重：
行内样式> id选择器 > 类选择器 > 标签选择器 > 通配符选择器
伪类：
a:link a:visited a:hover a:active
遵循爱（LoVe）恨（HAte）
:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
:focus用于元素成为焦点，这个经常用在表单元素上
:enabled :disabled :checked主要是针对于HTML中的Form元素操作
CSS3的:nth选择器
1、:first-child
2、:last-child
3、:nth-child(n) 数字、even偶数、odd奇数
4、:nth-last-child(n)
5、:only-child
:nth-child(n)，其中n是一个简单的表达式，那么"n"取值从“1”开始计算,不能取负值
5、:nth-of-type() :nth-child()
6、:nth-last-of-type() :nth-last-child()
7、:first-of-type和:last-of-type :first-child :last-child
8、:only-of-type :only-child
9、:empty p:empty {display: none;}
否定选择器 :not()
input:not([type="submit"]) {border: 1px solid red;}
IE6-8浏览器不支持:not()选择器
伪元素 CSS 伪元素用于将特殊的效果添加到某些选择器。
::first-letter
::first-line
::before
::after可以用来清除浮动：
::after{
display:block;
content:"";
clear=both;
}
::selection 改变网页被选中文本的样式
四．字体样式
1. font-family字体系列
例如：font-famiy:”宋体”,”微软雅黑”,...
2. font-size字体大小
3. font-style字体风格
值：1）normal 默认 不倾斜
2）italic 斜体
3）oblique 倾斜
4. font-weight 字体粗细
值：1）bold 粗体
2）bolder更粗体
3）lighter 细体
4）100-900 数值越大，字体越粗
5. line-height行高
值：1）数值+单位
2）数值字体的倍数
缩写：
font : font-style值 font-weight值 font-size值/line-height值 font-family值
五．文本样式
1. text-decoration 文本修饰
值：1）none 无修饰
2）underline 下划线
3）line-through中划线
4）overline 上划线
2. text-align文本对齐方式
值：1）left 默认左对齐
2）center 居中对齐
3）right 右对齐
4）justify两端对齐
3. text-indent文本缩进
值：数值+单位（px或em） 为正数时，缩进；为负数时，悬挂
4.text-transform文本大小写转换
值：1）uppercase 全大写
2）lowercase全小写
3）capitalize首字母大写
5. text-overflow文本溢出处理
值：1）ellipsis 文本溢出以省略号显示
2）].....
6.文本阴影语法：
text-shadow:h-shadow v-shadow blur color;空格隔开
(必需，水平阴影位置，可为负值) （必需。垂直阴影的位置。允许负值）
（可选。模糊的距离。）（可选。阴影的颜色）
可以重复添加文本阴影，用，隔开
盒子阴影
box-shadow:值1值2 值3 值4 值5 值6;
值1：必需的 水平阴影 为正往右投影 为负往左投影
值2：必需的 垂直阴影 为正往下投影 为负往上投影
值3：可选 阴影的模糊距离
值4：可选 阴影的扩展半径
值5：可选 阴影的颜色 默认黑色
值6：可选 投影方式 默认外投影 如果设置为inset 则为内投影
圆角
border-radius
值：
值1 四个角的圆角一样
值1值2 值1代表左上角和右下角，值2代表右上角和左下角
值1值2 值3 值1代表左上角，值2代表右上角和左下角，值3代表右下角
值1值2 值3 值4 按照顺时针方向，值1代表左上角，值2代表右上角，值3代表右下角，值4代表坐下角
文本溢出以省略号显示
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;强制不换行
6. letter-spacing字母与字母之间的距离 汉字与汉字之间的距离
7.word-spacing单词与单词之间的距离
8. overflow 内容溢出处理
值：1）visible 溢出部分可见
2）hidden 溢出部分隐藏
3）scroll 溢出部分以滚动条形式显示
4）auto 溢出部分浏览器自动处理
六．盒子模型
1.border边框
border-width边框的宽度
border-color边框的颜色
border-style 边框的样式
值：1）solid实线
2）double 双实线
3）dotted 点状线
4）dashed 虚线
....
缩写:
border : border-width值 border-style值 border-color值;
border-top上边框
border-bottom 下边框
border-left 左边框
border-right右边框
2.padding 内边距内补丁内填充
padding-top上内边距
padding-bottom 下内边距
padding-left左内边距
padding-right 右内边距
缩写：
padding:值; 上下左右的内边距一样
padding:值1 值2; 值1代表上下内边距，值2代表左右内边距
padding:值1 值2 值3; 值1代表上内边距，值2代表左右内边距，值3代表下内边距
padding:值1 值2 值3 值4; 值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距，按照顺时针方向。
3.margin 外边距
margin-top上外边距
margin-bottom 下外边距
margin-left左外边距
margin-right右外边距
缩写：
margin:同padding
margin:0 auto;块级元素居中显示
4.background 背景
1）background-color背景颜色
2）background-image背景图片
值：url(“图片的路径”)
3）background-repeat背景图片是否平铺
值：a）repeat 默认水平、垂直都平铺
b）no-repeat 水平、垂直都不平铺
c）repeat-x 水平平铺
d）repeat-y 垂直平铺
4）background-position背景图片的位置
语法：x轴坐标 y轴坐标
值：a）表示位置的英文单词 例如：left center right top bottom
b）百分比
c）数字+单位
5）background-size背景图片的大小
语法：背景图片的宽度背景图片的高度
值：a）百分比 （盒子的百分比）
b）数字+单位
c）cover 背景图片等比例的扩展至足够大，以使它铺满整个区域，可能会引起图片裁剪。
d）contain 背景图片等比例地扩展至足够大，以使它的宽度或高度适应内容区域，可能会使区域留白。
6）background-origin背景图片开始渲染的位置
值：a）padding-box 默认 从左上角内边距的位置开始渲染
b）content-box 从内容区域左上角开始渲染
c）border-box 从左上角边框区域开始渲染
7）background-attachment背景图片是否固定
值：1）scroll 默认图片随页面其余部分滚动而滚动
2）fixed 图片固定不动
缩写：
background :背景颜色 背景图片 背景是否平铺 背景位置/背景大小背景渲染位置背景是否固定;
元素的相互转换
其他元素转换为块级元素display:block
其他元素转换为行内元素display:inline（内边距都能设置 外边距只能设置左右的外边距）
其他元素转换为行内块级元素display:inline-block
任何元素隐藏display:none
五．定义字体
先定义字体
@font-face{
font-family:”自己起的名字”；
src:url(“字体路径”),url(“字体路径”),....;
}
再应用字体
div{
font-family:上面定义的字体名字
}
变换
transform
值：
1. translate()移动
a) translateX() 水平移动
b)TranslateY() 垂直移动
2.rotate()旋转
a) rotateX(角度) deg 绕x轴旋转
b)rotateY(角度) deg 绕y轴旋转
c)rotateZ(角度) deg 绕z轴旋转
3.scale()缩放
a) scaleX()数字 x轴的缩放
b) scaleY() y轴的缩放
4.skew()扭曲
a) skewX() deg 水平方向扭曲
b) skewY() 垂直方向扭曲
缩写：
transform:translate() rotate() scale() skew();
Keyframes “关键帧”
@keyframes 动画的名称{
from{}
to{}
}或
@keyframes IDENT {
0% {
Properties:Properties value;
}
Percentage {
Properties:Properties value;
}
100% {
Properties:Properties value;
}
}
1、animation-name: 动画名称
animation-name: none | IDENT
IDENT是由Keyframes创建的动画名，可以同时附几个animation给一个元素，我们只需要用逗号“，”隔开
2、animation-duration 动画持续时间
取值:为数值，单位为s （秒.）其默认值为“0”
3.animation-timing-function: 动画速度
animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,,,)
4。animation-delay: 动画延迟时间
取值为为数值，单位为s(秒)，其默认值也是0
5.animation-iteration-count 动画次数
animation-iteration-count:infinite | <number>
6.animation-direction 动画运动方向
animation-direction: normal | alternate
7.animation-fill-mode 动画填充模式
规定动画在播放之前或之后，其动画效果是否可见。
animation-fill-mode : none | forwards | backwards | both;
none 不改变默认行为。
both 向前和向后填充模式都被应用。
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值 （在第一个关键帧中定义）。
animation-play-state: running/paused 动画的播放状态
CSS书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
