CSS规范文档

易有太极，是生两仪，两仪生四象，四象生八卦。 ——《易传》

Java中通过总结共性，不断抽离出父类，以实现代码复用；通过继承，可不断对原有父类进行功能扩展。CSS与之类似，也是关于抽离、扩展和复用的艺术。
在对CSS进行分离的过程中，需要考虑以下问题：

分离层级越多，渲染开销越大

分离层级越少，样式复用率越低，样式冲突率越高

在写HTML和CSS时的黄金规范

CSS在线压缩

BEM —— 源自Yandex的CSS 命名方法论
 DIV+CSS规范命名大全集合
 HTML里的命名规则
 如何规范 CSS 的命名和书写？

css基础语法
selector{property:value}
例如：h1{color:red;font-size:14px;}
如果值大于1个单词，则要加上引号 p{font-family:”sans serif”;}

引用方法

其中最后一个rel=”stylesheet”是指链接文档和被链接文档的关系为外部样式

在有父类子类中，已经定义的子类不会被新的单独的覆盖
如：
li strong{color=red;}
strong{color=blue;} 这里显示的还是红的

id跟派生一起用：
/#divid p{color=red;} 只有div里头的p标签内字变红色
类选择器跟id差不多，不同是类可以重复用，前面不是#，是.

属性选择器，写在head中的sytle里

<style type="text/cee">
    [title]{ 
        color:blue;
    }
    [title=te]{
            color:red;
        }
</style>
<body>
    <p title="t">蓝色</p>
    <p title="te">红色</p>
</body>

设置背景图片

bcakground-color:blue;
background-image:url(“bg.jpg”);
background-repeat:no-repeat;是否重复以填充
background-attachment:fixed;背景固定，滚动的时候也不动
background-size:图片尺寸
background-origin:定位区域
background-clip:绘制区域

设置文本样式

color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距
text-align 对齐元素中的文本
text-decoration 给文本添加修饰
text-indent 缩进元素中文本的首行可以是xx em或者是百分多少
text-transform 元素中的字母，可以改成首字母大写，全大写，全小写
unicode-bidi 设置文本方向
white-space 元素中空白的处理方式
word-spacing 字间距
text-shadow 设置文本阴影，包括水平垂直偏移度，大小和颜色等
text-wrap 设置自动换行

设置字体
font-family 设置字体系列如宋体
可以通过@font-face{font-family:myfont;
src:url(xx);}引入字体
font-size 设置字体尺寸
font-style 设置字体风格
font-variant 以小型大写字体或正常字体显示
font-weight 设置字体的粗细

链接
a:link{color:blue;text-decoration:none} 普通未被访问
后面那个是去掉下划线
a:visited 已访问链接
a:hover 鼠标位于链接上方
a:active 链接被点击的时刻

列表
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型，如空心圆，实心圆等

表格
border 边框宽度，颜色
border-collapse 折叠边框，把两条线的边框弄成一条

轮廓
outline 轮廓属性
outline-color 轮廓颜色
outline-style 轮廓样式
outline-width 轮廓宽度

定位
position 位置：relative相对布局 absolute绝对布局 fixed不动 static偏移量无效
top 上偏移量
left 左偏移量
right 右偏移量
bottom 下偏移量
overflow 溢出设置
clip 显示形状
vertical-align 垂直对齐方式
z-index 元素堆叠顺序谁数值大谁在上面

浮动
float可以让元素浮在上面，值包括以下
left:向左浮动
right：向右浮动
none:不浮动
inherit：从父类继承浮动

clear去掉浮动，值包括以下
left right 去掉左右浮动
both 左右都去掉
inherit 去掉父类继承浮动

盒子模型
margin 外边距
border 边框
padding 内边距
content 内容

border-style：共有十中，定义边框样式
border-top-style单边框样式
border-left-style单边框样式
border-right-style单边框样式
border-bottom-style单边框样式

border-width 边框宽度
与style相同，可以定单独定义四个边框宽度

border-color 边框颜色
与style相同，可以单独定义四条边框颜色

border-radius 圆角边框
box-shadow 边框阴影
border-image 边框图片

padding 设置所有边距
padding-bottom 底边距
padding-left 左边距
padding-right 右边距
padding-top 上边距

margin 设置所有外边距左右自动auto时会变成居中的
margin-bottom 底外边距
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距

两个盒子如果顺序放会发生盒子合并的效果，距离取较大值

对齐操作
方法一：设置margin-left和right为auto会自适应为居中
方法二：使用position左右对齐
position:absolute;left:0px;
方法三：使用float左右对齐
float:right;

尺寸操作
设置line-height 设置行高，如line-height=200%则行间距为一行

max-height
min-height
max-width 设置最大宽度，如英文的有时候会直接放到第二行
min-width

cursor 指向某元素上的时候指针类型
display 设置元素显示方式
visibility 设置元素是否可见 hidden visible

图片
opacity设置透明度 1是不透明，0是完全透明

选择器

1、元素选择器，可以对p、a等设置选择器
/*{}通配符，一般用来除掉边距
2、类选择器，利用.class{}来定义
也可以结合元素来用如a.class{}
两个类选择器也可以组合，如.class1.class2，这个时候，使用该类的为class=”class1 class2”

3、ID选择器，利用/#class{}来定义
ID只可以使用一次，class可以多次使用
ID不能结合组合使用
当使用js的时候，需要用到id，因为js里头有个方法叫getelementbyID
属性选择器，就是定义在本文件中，用