标签：

1.层叠样式表：

外部样式表 - link

<link rel="stylesheet" href=http://www.mamicode.com/"css/style.css">

内部样式表 - style

<style type="text/css"> *{ margin: 0px; padding: 0px; }</style>

行内样式表 - 不保举使用

<div style="background-color: #006633;color: #00FFFF;" >请交功课</div> 2.选择器：

通配符选择器 - *

*{ }

标签选择器 - p

p{ }

属性选择器 - input[type=text]

input[type=text]{ }

类选择器 - .foo

.foo{ }

ID选择器 - #bar

#bar{ }

组合类型的选择器
~ 儿女：p h1
~ 父子：p>h1
~ 兄弟：p~h1
~ 相邻兄弟：p+h1

p h1{ } p>h1{ } p~h1{ } p+h1{ } 3.三条原则：

重要性原则 - !important

p { background: red !important; }

具体性原则 - # > . > tag[...] > tag > *

就近原则

4.常用属性：

颜色：color - red / rbg / rgba / hsl / hsla / hex code

p { color: red; color: #000000; color: rgb(0,0,0); color: rgba(111,111,111,0.5); /* 0.5是透明度 */ color:hsla(120,65%,75%,0.3); /* HSL（色调，饱和度，明度）。色相是在色 轮上的水平（从0到360）-0（或360）是红色的，，120是绿色的，240是蓝色的。饱和度是一个百分比值;0％意味着灰色和100％的暗影，是全彩。亮度也是一个百分点;0％是黑色的，100％是白色的。 α是Alpha参数界说的不透明度。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。 */ }

尺寸：width / height - px / cm / em / percentage

name 感化
height   设置元素的高度  
  max-height  
  max-width  
  min-height  
  min-width  
  width  

字体：font

@font-face { /* 加载本地字体加载后定名为fatdog*/ font-family:fatdog; src: url(fonts/chunkfive.ttf); } h3{ text-transform: uppercase; /* 字母大写 */ font-family: fatdog; /* 使用字体fatdog*/ } body { font-size: 80%; font-family: "Courier New", Courier, monospace; }

文本：text-align / line-height / text-decoration / letter-spacing / vertical-align

text-align:right; /* center居中;left左对齐; */ line-height:20px; /* 行高 */ text-decoration:underline; /* none 默认。界说标准的文本。 underline 界说文本下的一条线。 overline 界说文本上的一条线。 line-through 界说穿过文本下的一条线。 blink 界说闪烁的文本。 */ letter-spacing: -3px ; /*字符间距 */ vertical-align /* baseline 默认。元素安排在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素安排在父元素的中部。 bottom 把元素的底端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百分比值来摆列此元素。允许使用负值 */

边框/轮廓：border / outline

border:5px solid red; border-style:dotted solid double dashed; /* 上边框是点状 右边框是实线 下边框是双线 左边框是虚线 */ outline:green dotted thick; /* thin 规定细轮廓。 medium 默认。规定中等的轮廓。 thick 规定粗的轮廓。 length 允许您规定轮廓粗细的值。 */

列表：list-style-type / list-style-image / list-style-position

list-style-type:none;/* none 无符号。 disc 默认。符号是实心圆。 circle 符号是空心圆。 square 符号是实心方块。 decimal 符号是数字。 decimal-leading-zero 0开头的数字符号。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) */ list-style-image:url('sqpurple.gif'); list-style-position: inside; /*inside 列表项方针记安排在文本以内，且环绕文本按照符号对齐。 outside 默认值。连结符号位于文本的左侧。列表项方针记安排在文本以外，且环绕文本不按照符号对齐。*/

表格：border-collapse / border-spacing / empty-cells / table-layout

table { border-collapse:separate; border-spacing:10px 50px; } /*border-spacing:0; 可以用来合并边框效果超好 */ /*collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 separate 默认值。边框会被分隔。不会忽略 border-spacing 和 empty-cells 属性*/ empty-cells:hide; /*empty-cells 属性设置是否显示表格中的空单元格（仅用于"疏散边框"模式）。 hide 不在空单元格周围绘制边框。 show 在空单元格周围绘制边框。默认。 */ table-layout:fixed; /*automatic 默认。列宽度由单元格内容设定。 fixed 列宽由表格宽度和列宽度设定。*/