1、背景（backgound）
背景颜色，{background-color：red;}
背景图片，{background-image:url('test.jpg')}
2、文字（text）
文字颜色，{color:red;}
水平对齐，{text-align:center;}，左对齐/居中/右对齐，left/center/right
与图片的垂直对齐，<img style="vertical align:middle;" />
3、字体（font）
字体，{font-family: "微软雅黑";}
字体大小，{font-size:30px;} 或者是1.1em(默认字体为16px,1.1em为1.1x16=17.6px)
字体加粗，html中可以用<b></b>标签完成，css可以用{font-weight:bold;} 或者{font-weight:700;}
4、链接（link）
主要是用颜色来表明链接的状态。
<html>
<head>
<style>
a:link{color:purple;font-size: 20px;background-color: #c0c0c0;}/*未访问*/
a:visited{color:red;} /*已访问*/
a:hover{color:yellow;} /*悬停*/
a:active{color:black} /*点击，鼠标按下暂未放开时*/
</style>
</head>
<body>
<a href="http://www.baidu.com">这是一个连接</a>
</body>
</html>
说明：a:link{...}为伪类（正常的类语法为a.link{...}）
5、列表样式（ul）
设置列表的样式，直接用默认的样式就好，这个不常用到。
<html>
<head>
<style>
ul.a {
text-indent: px;
list-style-type: square;
/* list-style-image: url("my_logo.png"); */
/* list-style-position: inside; */
}
ol.b {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<!-- 无序列表 -->
<p>
这是一个列表
</p>
<ul class="a">
<li>
~~~~~~~~~~~~~~~~~~~~~~
</li>
<li>
~~~~~~~~~~~~~~~~~~~~
</li>
</ul>
<!-- 有序列表 -->
<ol class="b">
<li>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</li>
<li>
~~~~~~~~~~~~~~~~
</li>
</ol>
</body>
</html>
6、尺寸
设置元素的宽度width和高度height，下面例子实现了文字的水平和垂直对齐。
<html>
<head>
<style>
p {
background-color: lightgrey;
text-align: center;
width: 300px;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<p>
this is a paragraph;
</p>
</body>
</html>
