CSS（Cascading Style Sheets），层叠样式表。
基本格式
选择器 {
属性：值；
}
CSS注释
/* 注释内容 */
引入样式表
行内样式表（内联样式）
通过标签的style属性设置元素样式
<标签名 style="属性:值;属性:值;">内容</标签名>
内部样式表（内嵌式）
将CSS代码集中写在head标签内，用style标签定义
<head>
<style type="text/css"> <!-- type在html5中可省略 -->
选择器 {属性:值;属性:值;}
</style>
</head>
外部样式表（外链式）
将CSS代码放在后缀为css的外部样式表文件中，在HTML的head标签中，用link标签链接外部样式表文件
<head>
<link href="url地址" type="text/css" rel="stylesheet" />
</head>
选择器
标签选择器（元素选择器）
使用HTML标签名称作为选择器
类选择器
使用"."（英文句号）进行标识，后面跟着类名，如： .classname
标签调用时添加属性class="类名"
注意：
- HTML使用多个类选择器时，显示效果与类名先后顺序无关，而与CSS书写顺序有关
- 不建议使用”_"下划线命名
- 不建议纯数字和中文命名
- 可参考《Web前端开发规范手册》
id选择器
使用“#“标识，后面紧跟id名
- W3C标准规定，同一个页面内，不允许有相同id的对象，但允许有相同class的对象
通配符选择器
用”*“表示，能匹配页面中所有的元素
伪类选择器
链接伪类选择器：
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上时
-
:active 选定的链接
注意，书写时顺序尽量不要颠倒
结构（位置）伪类选择器（CSS3）：
- :first-child 属于其父元素的第一个子元素
- :last-child 属于其父元素的最后一个子元素
- :nth-child(n) 指定属于其父元素的第n个子元素，n可以是数字、关键词、公式
- :nth-last-child(n) 指定属于其父元素的倒数第n个子元素
目标伪类选择器：
:target 选取当前活动的目标元素
复合选择器
交集选择器
更精确地定义
标签选择器.类选择器 {属性:值;}
并集选择器
定义共同拥有的属性
选择器,选择器 {属性:值;}
后代选择器
包含深层全部
外层 内层 {属性:值;}
子元素选择器
只选择子元素而不包含更深层的
父元素 > 子元素 {属性:值;}
属性选择器
选择器[属性] {属性:值;}
选择器[属性=值] {属性:值;} /* 值完全相同的 */
选择器[属性*=值] {属性:值;} /* 任意位置有该值的 */
选择器[属性^=值] {属性:值;} /* 起始位置有该值的 */
选择器[属性$=值] {属性:值;} /* 结束位置有该值的 */
伪元素选择器
- ::first-letter 文本的第一个字或词
- ::first-line 文本第一行
- ::selection 选中文本时的样式
- ::before 元素内部开始位置创建一个元素并选择
- ::after 元素内部结束位置创建一个元素并选择
标签显示模式
块元素（block-level）
如<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
- 总是从新行开始
- 宽度默认是容器的100%
- 高度、行高、外边距及内边距都可以控制
- 可以容纳内联元素和其他块元素
行内元素（inline-level）
如<a>、<strong>、<b>、<em>、<i><del>、<s>、<ins>、<u>、<span>等
- 和相邻元素在一行
- 高、宽无效、水平方向的padding和margin可以设置，垂直方向无效
- 默认宽度为内容宽度
- 只能容纳文本或其他行内元素
行内块元素（inline-block）
如<img />、<input />、<td>
- 和相邻元素在一行
- 高、宽、外边距、内边距都可以设置
- 默认宽度为内容宽度
标签显示模式切换
display属性：
- block（行内转块）
- inline（块转行内）
- inline-block（块、行内转行内块）
字体样式属性
font-size：字号
| 单位 | 说明 |
|---|---|
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
font-family：字体
font-weight:字体粗细
可用值normal(400)、700(bold)、bolder、lighter、数字
font-style：字体风格
可用值normal(默认值)、italic(倾斜)、oblique(倾斜)
font：综合设置字体样式
选择器 {font: font-style font-weight font-size/lin-height font-family;)
- 使用font属性时，值的顺序不能更换，中间用空格隔开
- 不需要设置的可以省略，但必须保留font-size和font-family，否则font属性不起作用
常用技巧：
- 现在网页普遍使用14px+
- 尽量使用偶数字号，ie6等老式浏览器对奇数会有bug
- 尽量使用系统默认字体，当浏览器不支持第一个字体时会尝试下一个字体
- 当不支持字体的中文写法时，可用英文写法或者unicode写法
外观样式
color：颜色
- 预设颜色，如red、blue、pink
- 十六进制，如#DDDDDD
- RGB形式，rgb(255,255,255)或rgb(100%,0,0)
- 颜色透明，rgba()
line-height：行间距
常用单位有像素px，相对值em，百分比%
text-align：水平对齐方式
常用值：left（默认），center，right
text-indent：首行缩进
建议使用单位em
letter-spacing：字间距
word-spaing：单词间距
text-shadow：文字阴影
水平距离 垂直距离 模糊距离 颜色
- 前两个参数必须有，后两个参数有默认值
text-decoration: 装饰效果
none \ underline \ overline \ line-through
背景样式
- background-color: 背景颜色
- background-image: 背景图片，url(url地址)
- background-repect: 是否平铺，repeat-x \ repeat-y \ repeat \ no-repeat \ round \ space，默认repeat
- background-attachment: 固定还是滚动，fixed \ scroll，默认scroll
- background-position: 位置，top \ center \ bottom \ left \ center \ right \ 百分比 \ 长度值，默认top left
- background: 背景颜色 背景图片 平铺 滚动 位置 ，顺序无规定
- rgba颜色可设置透明
- background-size: 设置尺寸，宽高 \ cover \ contain
- 多背景图片，一个元素可以设置多重背景图，每组background用 , 分隔，前面的背景图层次较高
CSS书写规范
- 选择器与 { 之间包含空格
- 属性名与 : 之间不包含空格，: 与值之间包含空格
- 包含多个选择器时，每个选择器独占一行
- 选择器嵌套层级尽量不大于3级
- 每个属性定义另起一行
- 属性定义以 ; 结尾
- 更详细的看规范手册
CSS三大特性
层叠性
- 出现样式冲突时，按书写顺序，以最后的样式为准
继承性
- 子标签会继承父标签的某些样式，如字体、字号、颜色、行距等与文字类有关的
- 不继承的有：边框、外边距、内边距、背景、定位、元素高等与块有关的
特殊性
specificity用一个四位的数字串（0,0,0,0）表示，左面最大，一级大于一级，数位之间没有进制
- 元素（标签） （0,0,0,1)
- 类、伪类、属性 (0,0,1,0)
- ID (0,1,0,0)
- 行内样式 (1,0,0,0)
- !important +∞ 属性:值!important;
- 继承的权重为0
- 权重相同时按顺序，最后的为准
盒子模型
border：边框
border: border-width border-style border-color
border-width: 边框宽度
-
border-style:
常用属性值：none（无，默认）、solid（单实线）、dashed（虚线）、dotted（点线）、double（双实线）
border-collapse: collapse 边框合并
border-radius: 圆角半径
padding: 内边距
margin: 外边距
- 宽度属性width和高度属性height仅适用于块元素，对行内元素无效（除img和input）
- 外边框会合并
- 没有给定宽高时，padding不会影响盒子大小
CS3盒子模型
box-sizing: 指定盒模型
- content-box 默认值，盒子大小为width+padding+border
- border-box 盒子大小为width，即width包含padding和border
box-shadow: 盒子阴影
- h-shadow v-shadow blur spread color inset
- 水平位置(必需) 垂直位置(必需) 模糊距离 阴影尺寸 颜色 外部阴影(outset)转为内部阴影
浮动
普通流（标准流或文档流）
上到下，左到右，块元素占一行
float: 浮动
left right none(默认)
- 浮动会使元素具有行内块特性
clear: 清除浮动
left right both 不允许左侧、右侧、左右侧有浮动元素
额外标签法：在浮动元素末尾添加一个空标签包含
clear:both;父级元素添加overflow属性方法：在父级元素添加
overflow: hidden;或值为auto\scroll都可以-
使用after伪元素：
.类名:after { /* 一般类名为clearfix */ content: "."; display: block; height: 0; visibility: hidden; clear: both; } .类名 {*zoom: 1;} /* IE6、7专用 */ -
before和after双伪元素：
.clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after {clear: both;} .clearfix {*zoom: 1;}
版心
指网页中主题内容所在的区域
布局流程
- 确定页面的版心
- 分析行模块和列模块
- 制作HTML和CSS
- CSS初始化
定位
- 定位模式：static、relative、absolute、fixed
- 边偏移：top、bottom、left、right
static（静态定位）
relative（相对定位）
相对在文档流的位置定位，在文档流中的位置保留
absolute（绝对定位）
相对最近的已定位父元素定位，所有父元素没定位时，以body定位，不保留原位置
fixed（固定定位）
相对浏览器定位，不保留原位置
- 固定定位没有内容时，需要指定宽高
- 居中，例如：left: 50%; margin-left: 半宽;
- 行内元素添加绝对定位、固定定位、浮动后，会自动转换为行内块模式
叠放次序（z-index）
- 默认值为0，取值越大，越居上，可以为负数
- 值相等时，按书写顺序，后来居上
- 只有相对定位、绝对定位、固定定位有此属性
元素的显示和隐藏
display: 显示
- none 隐藏，不保留位置
visibility : 可见性
- visible 可见
- hidden 隐藏，保留位置
overflow: 溢出
- visible 默认
- auto 超出就显示滚动条
- scroll 一直显示滚动条
- hidden 超出部分隐藏
CSS用户界面样式
cursor: 鼠标样式
default、pointer、move、text等
outline: 轮廓
- outline-width outline-style outline-color
- 去除轮廓线，outline: 0;
resize:
- 防止拖拽文本域，resize: none;
vertical-align: 垂直对齐
- baseline、top、middel、bottom
- 对块元素无效，对行内元素或行内块元素有效
- 常用于图片、表单、文字的对齐
- 去除图片底侧缝隙
溢出的文字隐藏
work-break: 自动换行
- normal break-all(允许在单词内换行) keep-all(只能在半角空格或连字符处换行)
- 主要处理英文单词
white-space: 文本显示方式
- normal nowrap(强制同一行内显示所有文本)
text-overflow: 文字溢出
- clip ellipsis(溢出时显示省略标记...)
- 前提是设置了强制一行内显示
CSS精灵技术（sprite）
本质就是将一些背景图像整合到一张大图中，通过background-position定位
字体图标
- UI人员设计字体图标效果图（svg）
- 前端人员上传生成并下载兼容性字体文件包
- 引入字体文件包到HTML页面
滑动门
利用sprite技术和padding实现
- 外框显示左门，用padding-left撑开背景
- 内框显示左门以右所有，用padding-right撑开背景
过渡
transition: 属性 时间 运动曲线 延迟;
- transition-property 可用all指定所有属性
- transition-duration 默认0
- transition-timing-function ease（默认）、linear、ease-in、ease-out、ease-in-out
- transition-delay 默认0
2D转换
transform: 方法
- translate()方法 位移，长度或百分比（按自身）
- rotate()方法 旋转，角度deg
- scale()方法 缩放或放大
- skew()方法 翻转
- matrix()方法
transform-origin: 调整元素转换变形的原点
3D转换
transform: 方法
- translate3d()方法
- rotate()方法
perspective: 透视，视距长度
backface-visibility: 元素不面向屏幕时是否可见，hidden
动画
animation: 动画名称 时间 运动曲线 何时开始 播放次数 是否反向
- animation-name: 引用@keyframes动画的名称
- animation-duration: 完成一个周期的时间，默认0
- animation-timing-function: 运动曲线，默认ease
- animation-delay: 延迟开始，默认0
- animation-iteration-count: 播放次数，默认1，无限次为infinite
- animation-direction: 是否反向，normal(默认)、reverse(反向)、alternate(先正常再反向)、alternate-reverse
- animation-play-state: 运行状态，默认running，暂停为paused
- animation-fill-mode:
定义动画
@keyframes 动画名称 {
from {属性:值} /* 0% */
to {属性:值} /* 100% */
}
或
@keyframes 动画名称 {
0% {属性:值}
14% {属性:值}
100% {属性:值}
}
伸缩布局（CSS3)
- display: flex; 设置为伸缩布局模式
- flex: 份数;
- max-width\min-width:
- flex-direction: 指定排列方式，默认水平方向row，垂直方向column
justify-content: 调整主轴对齐
- flex-start 默认值，位于容器开头
- flex-end
- center 居中
- space-between 元素之间空白填充
- space-around 元素前后空白填充
align-items: 调整侧轴对齐
- stretch 默认值，子元素没高度时，拉伸使适用父容器
- flex-start、flex-end、center
flex-wrap: 控制是否换行，当子元素宽度多于容器
- nowrap 默认值
- wrap
- wrap-reverse
align-content : 垂直对齐
- stretch 默认值
- flex-start、flex-end、center、space-between、space-around
order: 子元素排列顺序，整数值
BFC（块级格式化上下文）
一个隔离的独立容器
触发BUFC：
- float属性不为none
- position为absolute或fixed
- display为inline-block、table-cell、table-caption、inline-flex
- overflow不为visible（没有副作用）
BFC特性：
- 盒子从顶端开始垂直地接个排列
- 盒子垂直方向距离由margin决定，同一个BFC的相邻盒子margin会重叠
- BFC中每个盒子的margin-left(或margin-right)会触碰到容器的border-left(border-right)
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘
- 计算BFC的高度时，会检测浮动的盒子高度
BFC用途：
- 清除元素内部浮动（利用特性5）
- 使用不同的BFC，解决外边距合并问题（利用特性1、特性2）
- 制作右侧自适应的盒子（利用特性4）
浏览器前缀
- -webkit- Chrome、Safari、Android Browser
- -moz- Firefox
- -o- Opera
- -ms- Internet Explorer、Edge
- -khtml- Konqueror
W3C统一验证工具
http://validator.w3.org/unic.com/
CSS压缩工具
站长之家：http://tool.chinaz.com/Tools/CssFormat.aspx
