下篇是对上篇更简略的总结
/*字体样式*/
font-family：字体1，字体2，字体3；
font-size：关键字或像素值;
color: 颜色值;
font-weight: 粗细值;
font-style: 取值;
/*注释的内容*/
/*文本样式*/
text-decoration: 属性值;
text-transform: 属性值;
font-variant: 取值;
text-indent: 像素值;
text-align: 属性值;
line-height: 像素值;
letter-spacing: 像素值;
word-spacing: 像素值;
/*边框样式*/
border-width: 像素值;
border-style: 属性值; /*none hidden solid dashed dotted double inset outset ridge groove*/
border-color: 颜色值;
border: 1px solid Red;
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
border-top: 1px solid red;
border-bottom: 1px solid blue;
border-left: 1px solid green;
border-right: 1px solid orange;
border-bottom:0px
border-bottom:none
/*背景样式*/
background-color:颜色值;
background-image: url("图像地址");
background-repeat: 取值; /* no-repeat repeat repeat-x repeat-y */
background-position: x像素值 y像素值或水平竖直关键字; /* 空格隔开，关键字：top bottom left right center 表示左上、正中等 */
background-attachment: scroll或fixed;
/*超链接样式*/
text-decoration: none;
a:link {CSS样式}
a:visited {CSS样式}
a:hover {CSS样式}
a:actived {CSS样式}
a {CSS样式}
a:hover {CSS样式}
元素:hover {}
cursor: 属性值;
cursor:url("地址"),属性; /*自定义鼠标样式*/
cursor:url("default.cur"),default;
cursor:url("pointer.cur"),pointer;
/*图片样式*/
width: 像素值;
height: 像素值;
text-align: 属性值; /*水平对齐text-align属性只对文本和img标签有效，对其他标签无效。left center right*/
vertical-align: 属性值; /*图片垂直对齐，top middle baseline bottom*/
float: 取值; /*left right*/
margin-top: 像素值;
margin-bottom: 像素值;
margin-left: 像素值;
margin-right: 像素值;
/*列表样式*/
list-style-type: 属性值; /*有序：decimal lower-roman upper-roman lower-alpha upper-alpha 无序：disc circle square 去除：none*/
list-style-image: url(图像地址);
/*表格样式*/
border-collapse: 属性值; /*seperate collapse 去除单元格之间的空隙，是表格独有的属性*/
border-spacing: 像素值; /*（仅在不折叠边框时有效）指定单元格边界之间的距离。当只指定了一个像素值时，这个值将作用于横向和纵向上的间距；当指定了两个length值时，第一个作用于横向间距，第二个作用于纵向间距。*/
caption-side: 属性值; /*定义表格标题的位置 top bottom*/
/*CSS 盒子模型*/
width：像素值;
height：像素值;
padding-top:像素值;
padding-right:像素值;
padding-bottom:像素值;
padding-left:像素值;
padding:像素值;
padding:像素值1 像素值2;
padding:像素值1 像素值2 像素值3 像素值4;
border:像素值 边框类型 颜色值
margin-top:像素值;
margin-right:像素值;
margin-bottom:像素值;
margin-left:像素值;
margin:像素值;
margin:像素值1 像素值2;
margin:像素值1 像素值2 像素值3 像素值4;
/*浮动布局*/
float: 取值; /*left right*/
clear:取值; /*left right both 清除浮动都是在定义了浮动的元素之后设置的,除了使用clear属性来清除浮动，还可以采用“overflow:hidden;”来清除浮动。*/
/*定位布局*/
position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值; /*注意，这4个值的参考对象是浏览器的4条边。（这4个属性不一定全部都用到）*/
position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
CSS 浮动的三个特性： 参考：CSS浮动的3个特性（高手绕行）
- 浮动元素会脱离正常的文档流，按照其外边距指定的位置相对于它的上一个块级元素（或父元素）显示；
- 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐，但是边框和背景却忽略浮动元素而向上一个任意非浮动元素靠齐；
- 浮动元素后面的内联元素会向此浮动元素的外边距靠齐。
HTML 标签语义
webstorm 书写html的实用技巧 参考：webstorm快速输入标签
> \> ：下一个子标签
\* ：多少个标签
$ ：标签的名称序号
{} :标签的内容
\# : 指明标签的id
. : 指明标签的class
[]: 指明标签的属性
\+ : 并列的标签
link:css : <link rel="stylesheet" href="css/mycss.css">
script:src : <script src=""></script>
a:link : <a href="http://"></a>
a[href=#] : <a href="#"></a>
input:button : <input type="button" value="">
form:get : <form action="" method="get"></form>
div.one.two : <div class="one two"></div>
