标签：css
css指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中
css常用属性
背景：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
文本： text、word、direction（文本操作：通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。）
text-indent(缩进文本) text-indent: 5em;
text-align（水平对齐） text-align:center
word-spacing（字间隔） word-spacing: 30px;
text-decoration（文本装饰）text-decoration: none
direction（文本方向） direction:rtl;
框模型：背景应用于由内容和内边距、边框组成的区域。
padding（内边距）
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
margin（外边距）
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
border（边框）可设置值：宽度，样式，颜色
框线位置
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
文字对齐
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
定位：
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。
相对定位：注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
绝对定位：绝对定位使元素的位置与文档流无关，因此不占据空间。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
选择器
元素选择器
为某个 HTML 元素，比如 p、h1、em、a设置样式
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
选择器分组
h2 元素和段落都有灰色。
h2, p {color:gray;}
类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
.important {color:red;}
只有段落显示为红色文本：
p.important {color:red;}
假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和
warning 的所有元素还有一个银色的背景 。就可以写作：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
ID选择器
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
#intro {font-weight:bold;}
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
a[href] {color:red;}
a[href][title] {color:red;}
后代选择器
后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
h1 em {color:red;}
子元素选择器
选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器
h1 > strong {color:red;}
相邻选择器
增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1 + p {margin-top:50px;}
标签：css
原文地址：http://lxb994.blog.51cto.com/9805112/1743412
