目录
选择器
id 和 class 选择器
若要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。
//id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id //选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="one1":
#para1
{
text-align:center;
color:red;
}
//class可以在多个元素中使用。在 CSS 中，类选择器以一个点 . 号显示
.center {text-align:center;}
p.center {text-align:center;}//所有的 p 元素使用 class="center" 让该元素的文本居中
文本
color //设置文本颜色
direction //设置文本方向。
letter-spacing //设置字符间距
line-height //设置行高
text-align //对齐元素中的文本
text-decoration //向文本添加修饰
text-indent //缩进元素中文本的首行
text-shadow //设置文本阴影
text-transform //控制元素中的字母
unicode-bidi //设置或返回文本是否被重写
vertical-align //设置元素的垂直对齐
white-space //设置元素中空白的处理方式
word-spacing //设置字间距背景
background-color //定义了元素的背景颜色.
background-image //描述了元素的背景图像.
background-repeat //设置背景图像是否及如何重复。
background-attachment //背景图像是否固定或者随着页面的其余部分滚动。
background-position //设置背景图像的起始位置。
边框(border)
CSS边框属性允许你指定一个元素边框的样式和颜色。
//border-style属性用来定义边框的样式
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
//border-width 属性为边框指定宽度
//border-color属性用于设置边框的颜色。
border:5px solid red; //5px宽，实线，红色内外边距
padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
//可以指定不同的侧面不同的填充：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;margin(外边距)属性定义元素周围的空间。
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
//可以指定不同的侧面不同的边距：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
对齐
元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto；
文本在元素内居中对齐，可以使用 text-align: center;
图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中；
左右对齐 ，可以使用 position: absolute; 属性来对齐元素；
左右对齐 ，可以使用 float 属性来对齐元素；
垂直居中对齐。 一个简单的方式就是头部顶部使用 padding；
垂直居中 - 使用 line-height；
字体
CSS字体属性定义字体，加粗，大小，文字样式。
font //在一个声明中设置所有的字体属性
font-family //指定文本的字体系列
font-size //指定文本的字体大小
font-style //指定文本的字体样式
font-variant //以小型大写字体或者正常字体显示文本。
font-weight //指定字体的粗细。a链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。
四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的时候
//文本颜色
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
//下划线
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
//背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html> 