（1）背景、文本、字体、链接、列表

CSS背景

设置body 的背景颜色：background-color

与此类推，想给不同元素设置就该该元素{}里写相应的标签

设置背景图片：background-image：url（''）

在水平方向重复背景：background-repeat:repeat-x（ps。不重复就是no-repeat）
背景图片定位：background-position:right top;
背景图片固定，不随页面滚动而滚动：background-attachment:fixed;
背景属性还可以像这样声明：background:#ffffff url('img_tree.png') no-repeat right top;（比较省事不用写那么多行）
可以给背景图片添加一个右（左、上、下）边距：margin-right:200px;

文本

文本颜色：body{color：red；}

文本对齐：body{text-align：center；}

文本修饰：text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

h1 {textdecoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

运行结果：

文本转换：文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进：文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

附css所以文本属性

字体

css字体：font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意：如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明
p{font-family:"Times New Roman", Times, serif;}

字体样式

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体大小：font-size 属性设置文本的大小。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议。1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em /
h2 {font-size:1.875em;} / 30px/16=1.875em /
p {font-size:0.875em;} / 14px/16=0.875em */

附css的所有字体属性

image.png

链接

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
在标签<a> 中使用了href属性来描述链接的地址。
默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

为访问和未访问的链接设置不同颜色

a:link {color:#000000;} /* 未访问链接/
a:visited {color:#00FF00;} / 已访问链接 /
a:hover {color:#FF00FF;} / 鼠标移动到链接上 /
a:active {color:#0000FF;} / 鼠标点击时 */

设置链接的文本装饰

a:link {text-decoration:none;} /* unvisited link /
a:visited {text-decoration:none;} / visited link /
a:hover {text-decoration:underline;} / mouse over link /
a:active {text-decoration:underline;} / selected link */

设置链接的背景颜色

a:link {background-color:#B2FF99;} /* 未访问链接 /
a:visited {background-color:#FFFF85;} / 已访问链接 /
a:hover {background-color:#FF704D;} / 鼠标移动到链接上 /
a:active {background-color:#FF704D;} / 鼠标点击时 */

超链接添加其他样式

a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
鼠标点击改变链接的颜色
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
鼠标点击改变链接的字体大小
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
鼠标点击改变链接的背景颜色
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}
鼠标点击改变链接的字体类型
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
鼠标点击改变链接的字体装饰

创建一个链接框

a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}

运行结果如下：

未点击

鼠标点击

CSS列表

列表中所有列表项的标记

ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
</style>