CSS 简单归纳

Class和id的命名规范
一般以字母、下划线开头，不能以数字开头
有多个单词的命名方式
常用class名
外套wrap--------用于最外层头部
header----------用于头部的主要内容
main------------用于主体内容（中部）左侧
main left-------左侧布局右侧
main right------右侧布局导航条
nav-------------网页菜单导航条内容
content---------用于网页中部主体底部
footer----------用于底部

文本属性
字体、字号
font（缩写形式）
font-style字体风格
font-weight(粗细）
font-size( 大小）
font-family(字体)
行距、对齐等
line-height(行高）
行高=上间距+文字大小+下间距
单独给一个标签设置行高：子元素行高结果
行高单位是em：行高=文字大小 x 行高值
行高单位是px：行高与文字大小无关
行高单位是%：行高=文字大小 x 行高值
如果行高没有单位：行高=文字大小 x 行高值

给父元素设置行高 ：子元素行高结果
行高单位是px：行高=父元素行高
行高单位是em ：行高=父元素文字大小 x 行高值（与子元素文字大小无关）
行高单位是% ：行高=父元素文字大小 x 行高值（与子元素文字大小无关）
行高单位无：行高=子元素文字大小 x 行高值

text-align(对齐）
letter-spacing(字符间距）
text-decoration(文本修饰）
white-space（空白处理）

margin-top（框与框上之间距离）
margin-left（框与左边距离）
margin-right（框与左边距离）
margin-bottom(框与下面的距离）
margin:0x 0x 0x 0x 上 右 下 左 距离
margin:10x 20x 30x 上 左右 下 距离
padding(字与框的距离）
padding：10px 上下左右分别距离10px
margin：0 auto 框居中
background-color（设置背景色）
background-image（背景图像）
background-reapt(背景重复）
background-reapt-x(背景水平重复）
background-reapt-y(背景垂直重复）
background-position（改变图像在背景中的位置）
background-postion: 设置背景位置 left,right,center,top,bottom background-attachment: 设置背景是否固定

省略号显示
说明：
ext-overflow:clip/ellipsis
clip:不显示省略号（…）,而是简单的裁切；
ellipsis:当对象内文本溢出时，显示省略标记
说明：
text-overflow属性仅是…，当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width:value;
2、强制文本在一行内显示：white-space:nowrap;
3、溢出内容为隐藏：overflow:hidden
4、溢出文本显示省略号：text-overflow:ellipsis;

类选择器
一个标签可以有多个类选中器的值，不同的值用空格分开，如：
< div class="one yellow leftstyle>文字< /div>
类命名规则

1. 不能用纯数字，不能以数字开头
2. 不能实用特殊符号，和特殊符号开头，除“-”外
3. 不建议使用汉字来定义命名
4. 不推荐使用属性和属性值来类名

id选择器以#来定义
只能调用一次

css类选择器以一个点号显示
类名的第一个字符不能使用数字
和id一样，class也可被用作派生选择器

单选框或多选框默认选中checked=checked
css语法
选择器：选择谁

通配选择器以“*”表示，是所有选择器中作用范围最广的，可以匹配页面中所有的元素：
*｛属性1：属性值1；属性2：属性值2；…｝
*{font-size:18px}

复合选择器：
标签指定式选择器：前面是标记选择器，后面是class选择器或id选择器，两个选择器之间不能有空格
如h3.all

后代选择器：外层标记写在前面，内层标记写在后面，中间用空格隔开
首选要满足包含（嵌套）关系。
父集元素在前边，子集元素在后边
特点：无限制隔代。
只要能代步标签，类选择器、ID选择器自由组合。
如.all h3

子选择器：选择某个元素的直接后代；
代码：
父选择器>子级{
属性名：属性值；
}

并集选择器：是各个选择器通过逗号连接而成，任何形式的选择器，都可以作为并集选择器的一部分。
如.all,h3

块级标签
块级标签三特点：
1、一个块级元素独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

行内元素
行内元素三大特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变（废话）。

行内块元素
html 中< img>、< input>标签就是这种内联块状标签
特点：
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点

css三大特性
1、层叠性 所谓层叠性是指多种CSS样式的叠加。例如， 当使用内嵌式CSS样式表定义 < p>标记字号大小为12像素，链入式定义< p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加
2、继承性（子承父业） 所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
3、CSS优先级 继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
所有都相同时，声明靠后的优先级大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

将行内元素转化为行内块元素
display:inline-block
display:inline转化为行内元素
将行内元素转化为块级元素
display:block

CSS样式类型

内联式（行内式）
< p style=“color”:red>< /p> 作用当前行，不可以重用
内联样式最大，内联样式的优先级最高

内嵌式
< style>
p{color} 作用整当前页面，可是实现重用
< style>

外联式
< link rel=“stylesheet” href=""> 作用整个网站，完全可以重用

扩展知识点：link和important导入外部样式的区别：
差别1：本质的差别：link属于XHTML标签,而@import完全是CSS提供的一种方式。
差别2：加载顺序的区别：当一个页面被加载的时候（就是被浏览器浏览的时候），link引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom(document object model 文档对象模型)控制样式的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

所有字相关的都可以继承，比如：color、text系列、font系列、line-系列、cursor
并不是所有的css属性都可以继承，例如：边框、外边距、内边距、背景、定位、元素高宽属性
所有盒子相关的属性都不能继承。 a标签、 h1标签不会实现继承

权重相同时，css遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
所有都相同时，声明靠后的优先级大。
CSS定义一个！important命令，改命令被赋予最大的优先级，！important都具有最大优先级。
行内样式>页内样式>外部引用样式>浏览器默认样式
！important>内联>ID>伪类[类]属性选择>标签>伪对象>通配符>继承

CSS伪类
：link
伪类将应用于未被访问的链接。IE6不兼容，解决此问题，之间用a标签
：however
伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a链接，IE7+所有元素都兼容
：active
伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等
：visited
伪类将应用于已经被访问的链接
：foucus
伪类将应用于拥有键盘输入焦点的元素
顺序问题：LoVe HAte
1、a:link{text-decoration:none ; color:red ;}
2、a:visited {text-decoration:none ; color:black ;}
3、a:hover {text-decoration:underline ; color:yellow ;}
4、a:active {text-decoration:none ; color:pink ;}

CSS 盒子模型
它包括：内边距，边框，外边距
盒子宽度=盒子宽度+左右内边距+边框宽度
轮廓线outline-style:none
获取焦点：foucus 获取鼠标光标状态
取消表单边框：border: 0 none;
label标签：<label for"ID"名 > 友好性
border-collapse:collapse 设置表格边框合并

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

overflow 属性
visible：默认值。内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承 overflow 属性的值。

浮动：以让元素脱离文档流，遇到父级边界或者相邻的浮动元素，停下来
文档流：元素，没有改变特性时，按照原本块级行内的的位置和规则排列
浮动特点：
1、浮动找浮动，不浮动找不浮动
2、浮动只影响后面的元素
3、浮动以影响后面的元素
4、浮动可是实现模式转换（span设置浮动可以设置宽高）
5、让块级元素在一行显示

清除浮动的方式
1、给父容器设置高度
2、通过设置clear:left | right | both
3、给父容器设置overflow:hidden
4、通过伪元素
.clearfix:after{
content:"";/内容为空/
height:0;/高度为0/
line-height:0;/行高为0/
display:block;/块级元素/
visibility:hide;/隐藏/
clear:both;/清除浮动/
}
.clearfix{
zoom:1 　　　为了兼容IE浏览器
}

css初始化
为了考虑到浏览器的兼容问题，其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异

Position(定位)指定了元素的定位类型。
1、static 静态定位 ：元素的默认值，即没有定位，遵循正常的文档流对象。不占位置
2、fixed 固定定位：元素的位置相对于浏览器窗口是固定位置。不占位置
即使窗口是滚动的它也不会移动
3、relative 相对定位：相对定位元素的定位是相对其正常位置。相对定位占位置，一般子元素设置绝对定位，父亲设置相对对定位
4、absolute 绝对定位：
1：绝对定位以浏览器左上角为基准设置位置
2：当一个盒子包含在另一个盒子中，父盒子未设置定位，子盒子以浏览器左上角为基准设置位置； 当父盒子设置定位，子盒子以父盒子左上角为基准设置位置
3：绝对定位绝对不占空间位置（与浮动一样）
4：绝对定位可是实现模式转换，脱离标准流

标准流：块级元素纵向有序排列，行内块（行内）元素横向有序排列

规避脱标流

1. 尽量使用标准流。
2. 标准流解决不了的使用浮动。
3. 浮动解决不了的使用定位。
4. 使用margin-left:auto规避脱标
   ※ 盒子设置左外边距为auto,将盒子左侧充满，冲到右边margin-left:auto;
   margin-left:auto 让盒子左侧充满
   margin-right:auto 让盒子右侧充满

图片和文字垂直对齐
使用vertical-align:middle 让行内、行内块元素设置垂直距离
vertical-align:middle常与displaya:inline-block配合使用，表格对此属性较敏感
vertical-align 属性：设置一个元素的垂直对齐方式。

overflow:jidden 将超出部分的隐藏
display:none 元素隐藏不占位置
vertical:hidden 元素隐藏占位置

CSS内容移除
1、利用text-indent:2em 文本缩进2字符
2、利用padding挤开盒子 并且overflow切割

css精灵:
通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。
css滑动门技术
根据文本自适应大小，根据背景的层叠性制作，并允许他们在彼此之上进行滑动，以创造出一些特殊的效果。
滑动门有两个部分：
li – 左边固定不动的部分，背景左对齐
a – 右边随着内容变宽的部分，背景右对齐

常见颜色RGB
黑色：#000000
黄色：#FFFF00
灰色：#C0C0C0
白色：#FFFFFF
绿色：#00FF00
橙色：#FF6100
红色：#FF0000
紫色：#A020F0
蓝色：#0000FF

CSS渐变：可以让你在两个或多个指定的颜色之间显示平稳的过渡
background: linear-gradient(to …, red , blue); /* 标准的语法 */
定义方向（to bottom、to top、to right、to left、to bottom right）
background: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算

CSS3 渐变也支持透明度（transparent）
使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
重复的线性渐变:
repeating-linear-gradient() 函数用于重复线性渐变

CSS标签包含规范
1、行内元素尽量包含行内元素
2、有些块级元素不能包含其他块级元素
3、P不能包含div

css书写规范
缩进：
使用四个空格作为一个缩进层级

空格：
1、选择器与｛之间必须包含空格
2、属性名与之后的：之间不允许包含空格，与属性值之间必须包含空格
3、列表型属性值书写时在单行时，必须

其他
1、文本内容必须用双引号包围
2.当数值为0-1之间的小数时，省略整数部分的0.
3、长度为0时须省略单位
4、url（）函数中的路径不加引号
5、颜色值可以缩写时，必须使用缩写形式。

css选择符的权重：
把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值
权重的等级
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为 1000
3、ID 选择器，如：#content，权重值为 100
4、类，伪类和属性选择器，如： content、:hover 权重值为 10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为 1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、 权重值为 0

CSS 图像透明/不透明
CSS3中属性的透明度是 opacity。
Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。