css整理

背景色：background-color
背景图像：background-image。
用法实例：body {background-image: url(/i/eg_bg_04.gif);}
背景重复：background-repeat: repeat-y;——也可以是repeat-x，no-repeat
背景定位：background-position:center;（top、bottom、left、right 和 center）

缩进文本：p {text-indent: 5em;}——（首行缩进5em）
水平对齐：text-align
字间隔：word-spacing—p.tight {word-spacing: -0.5em;}—（减少0.5个字的字符间距）
字母间隔：h1 {letter-spacing: -0.5em}
字符转换：
h1 {text-transform: uppercase}——none，uppercase，lowercase，capitalize（每个单词第一个字母大写）
文本装饰：text-decoration：none，underline（加下划线），overline（在文本的顶端画一个上划线），line-through（在文本中间画一个贯穿线），blink（让文本闪烁）
文本方向：direction（direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr）

指定字体系列：body {font-family: sans-serif;}
字体风格：normal - 文本正常显示，italic - 文本斜体显示，oblique - 文本倾斜显示
字体加粗：font-weight。900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
字体大小：font-size，单位px

列表类型：（列表项的标志类型）
ul {list-style-type : square}——disc—默认实心圆，circle—空心圆，square—实心方块。，decimal—数字
列表项图像：（对各标志使用图像）ul { list-style-image: url(‘/i/eg_arrow.gif’) }

**表格边框**border——table, th, td{ border: 1px solid blue; }
折叠边框

table{
  border-collapse:collapse;//将table最外层的边框设置为单一边框
}
table,th, td{
  border: 1px solid black;
}

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
相对定位——距原来的地方最左边30px，最上面20px

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

选择器分组：
假设希望 h2 元素和段落都有灰色——h2, p {color:gray;}
通配符选择器：（*）

* {color:red;}  ------   使文档中的每个元素都为红色

类选择器：.important {color:red;}——它修改的是class=”important”的属性
ID 选择器：#intro {font-weight:bold;}——它修改的是id=”intro”的属性
简单属性选择：把包含标题（title）的所有元素变为红色—— *[title] {color:red;}
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）：p[class~=”important”] {color: red;}—（class属性中有important）
子串匹配属性选择器：

[abc^="def"]    选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]   选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]    选择 abc 属性值中包含子串 "def" 的所有元素

选择子元素：h1 > strong {color:red;}—–把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
选择相邻兄弟：h1 + p {margin-top:50px;}—要增加紧接在 h1 元素后出现的段落的上边距

使用 margin 属性来水平对齐——只是整个框居中，如果里面有字，那么字没有居中

.center{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
}

使用 position 属性进行左和右对齐——-

.right{
    position:absolute;
    right:0px;//-----右对齐
    width:300px;
    background-color:#b0e0e6;
}

使用 float 属性来进行左和右对齐-—-

.right{
    float:right;//-----右对齐
    width:300px;
    background-color:#b0e0e6;
}

display:list-item—-类似于ul-li
diplay:table—–div宽度和父容器相同，table宽度根据内容而定，即table具有“包裹性”。
display:table-cell—多列布局
display:inline-block—-能被父容器居中、能设置高度宽度和margin、不会像table或div那样占一正行。将对象呈现为inline对象，但是对象的内容作为block对象呈现

选择一个祖先的所有子孙节点，例如 div p{…}
选择一个父元素的所有直属节点，例如 div > p{…}
选择某一个元素紧挨着的兄弟节点，例如 li + li{…}
选择某一个元素的所有同胞节点，例如 span ~ a{…}

//浏览器兼容。最后一个box-sizing限制盒子模型的宽度（所有加起来等于设置的width，否则width仅指内容宽度）

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
}

//用div画“三角”

div{
    border:10px solid;
    border-color:#333 transparent transparent transparent;
    width:0px;
}
用法：<div></div>

//在各个菜单之间加下划线

ul li + li {
    border-top: 1px solid #ccc;
}

设置链接的样式：（动态伪类，UI伪类）
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

结构化伪类—实现一个表格间隔显示背景颜色

table tr:nth-child(even) {
    background-color: chocolate;
}
table tr:nth-child(odd) {
    background-color: aquamarine;
}

伪元素——:before和:after 非常常用

span:before {
    content: "\e034";
}

span:after {
    content: "B";
}

float被设计出来的初衷是用于——文字环绕效果.被设置了float的元素会脱离文档流
div设置了float之后，其宽度会自动调整为包裹住内容宽度，而不是撑满整个父容器

<div style="border: 3px solid blue; padding: 3px; float: left; width: 200px">
    <img src="1.jpg" style="float: left" border="5px solid #f1f1f1">
    这样一问大家，我想绝大多数用float都是为了\n
</div>

//上面父布局设置float，img外部会包裹div。下面clear: both，div依然会占满整个一行

<div class="clearfix" style="border: 3px solid red;">
    <img src="1.jpg" style="float: left">
    <img src="1.jpg" style="float: left">
</div>
.clearfix:after {
    content: ' ';
    display: table;
    clear: both;
}

参考：http://www.cnblogs.com/wangfupeng1988/p/4325007.html
另外：学习css可以看看bootstrap，学习js可以看看jquery

ps：
html空格占位符

  == 普通的英文半角空格
  ==   ==   == no-break space （普通的英文半角空格但不换行）
　 == 中文全角空格 （一个中文宽度）
  ==   == en空格 （半个中文宽度）
  ==   == em空格 （一个中文宽度）
  == 四分之一em空格 （四分之一中文宽度）

css3新增：
添加圆角：border-radius:25px;
添加方框阴影：box-shadow: 10px 10px 5px #888888;
使用图片创建围绕div元素的边框：border-image:url(border.png) 30 30 round;

调整背景图片的大小：

div{
    background:url(bg_flower.gif);
    background-size:63px 100px;
    background-repeat:no-repeat;
}

对背景图片进行拉伸，使其完成填充内容区域：

div{
    background:url(bg_flower.gif);
    background-size:40% 100%;
    background-repeat:no-repeat;
}

background-origin 属性规定背景图片的定位区域。

div{
    background:url(bg_flower.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;//padding-box,border-box
}

text-shadow添加阴影

h1{
    text-shadow: 5px 5px 5px #FF0000;
}

word-wrap 属性允许您允许文本强制文本进行换行

p {
    word-wrap:break-word;
}

2D 转换

transform: rotate(30deg);//旋转
transform: translate(50px,100px);//平移
transform: scale(2,4);//宽度*2，高度*4
transform: skew(30deg,20deg);//翻转

3D 转换

transform: rotateX(120deg);//元素围绕其 X 轴以给定的度数进行旋转
transform: rotateY(130deg);