CSS（Cascading Style Sheets） CSS样式表||层叠样式表
命名规范 简洁明了、见名知意 建议不用纯数字&汉字，尽量采用英文字母

命名规则：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msq
小技巧：tips
栏目标题：title

多类名便于组合操作

id 类似身份证号，唯一且不得而重复

通配符选择器“*”：代表所有的选择器

伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。比如可以选择第一个、第N个元素
:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接


结构（位置）伪类选择器（CSS3）
:first-child:
:last-child:
★★★ :nth-child(n): 匹配属于其父元素的第N个子元素，不论元素的类型 even偶数 odd奇数 n从零开始
:nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n可以是数字、关键词或公式

目标伪类选择器
:target 可用于选取当前活动的目标元素
ps:目录跳转，使用超链接定位目标id

line-height:行间距||行高
一般情况下，行距比字号大7~8像素即可。
text-align:水平对齐方式 left、right、center

★ text-indent:首行缩进
★ letter-spacing:字/字符间距
★ word-spacing:单词间距
★ word-break：自动换行

颜色半透明（css3）
rgba alpha 透明之意 取0~1之间
文字阴影（css3）
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色；

★★★★块级元素(block-level)
能独占一整行或多行，可对其设置宽度、高度、对齐等属性
常见有h1~h6 p div ul ol li 等
特点：
1.总是从新行开始
2.高度、行高、外边距以及内边距都可以控制
3.宽度默认容器100%
4.可以容纳内联元素和其他块元素

★★★★行内元素(inline-level)
靠内容支撑
常见有a strong b em i del s ins u span 等
特点：
1.和相邻行内元素在同一行上
2.宽高无效，只有水平方向的padding与margin可以设置。
3.宽度默认本身内容宽度
4.只能容纳文本或其他行内元素（“a” 特殊）

★★★★行内块元素(inline-block)

常见有 img input td 等.
特点：
1.和相邻行内元素在同一行上，但之间有空白间隙
2.默认宽为本身内容宽
3.高度，行高 内外边距可控

★★★ 属性选择器 []
^= 表示以**为开头
$= 表示以**为结尾
*= 表示在任意位置

★ 伪元素选择器（CSS3）
E::first-letter 文本的第一个单词或字
E::first-line 文本第一行
E::selection 可改变选中文本的样式

★★ E::before
★★ E::after
★ content
eg: div::before{content:"开始"；}
div::after{content:"结束"；}
类选择器|伪类选择器|伪元素选择器

CSS书写规范
div与｛｝间 空格 div ｛｝
冒号后空格 font-size:空格12px;
当一个rule包含多个selector时，每个选择器声明必须独占一行
选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
属性另起一行，分号结尾

background-position /*利用方位名词更改背景图片位置*/ left top right bottom 默认左上角 居中 center center 方位名词只写一个 另一个默认center
/*利用坐标 X Y*/
/*可混合使用*/

background-attachment：scroll(默认） fixed固定 背景附着
★ 简写
background：transparent url（image.jpg) repeat scroll 50% 0；
背景颜色 背景图片地址 背景平铺 滚动 位置
background-size:* * ; （px % ）尽量只修改一个值 防止缩放失真。
cover； 自动调整缩放比例，保证图片始终填充满背景区域，溢出部分隐藏
contain；自动调整缩放比例，保证图片时钟完整显示在背景区域

★ line-height 设定行高等于盒子的高度，就可以使文字垂直居中
★ text-decoration：none underline overline line-through

css层叠
1.样式冲突，遵循就近（结构）原则

盒子边框 none;solid;dashed;dotted;double

表格中的细线边框
table{border-collapse:collapse;};
border-collapse:collapse; 表示边框合并在一起 collapse 合并之意

圆角边框 border-radius:↖↗↘↙

外边距margin实现居中对齐 margin：0 auto；
条件：1必须是块级元素；
2盒子必须指定了宽度（width）

✿✿✿ 区分
1.文字水平居中 与 盒子水平居中
text-align margin：0 auto；
2.插入图片与背景图片
插入图片 更改大小：width & height
更改位置：margin & padding 可当做一个盒子

背景图片：更改大小：background-size：* *;
更改位置：background-position:* *;
3.一般情况下，背景图片适合做小图标，插入图片适合产品展示等