第四节：CSS中背景、文本、字体和链接的美化

本节将会和大家一起学习一下CSS的背景，文本，字体和链接的属性设置。

背景

CSS背景属性用来定义HTML元素的背景
背景定义属性有：

background-color 背景颜色
背景颜色CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如：“#ff0000”
- RGB - 如：“rgb(255,0,0)”
- 颜色名称 - 如：“red”

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

<div>
        <p>no red text</p><!--文字是非红色的-->
        <div>no red text</div>
        <p>red text</p><!--文字是红色的-->
        <h1> text</h1>
    </div>

以上实例中，h1,p,div元素拥有不同的背景颜色，如下图：

background-image 背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，url中写图片的路径（名字）。页面背景图片设置实例:

body {
	background-image: url("../html/1.png");
}

图片背景

background-repeat
默认情况下，background-image属性会在页面的水平或者垂直方向平铺。但是某些图像如果在水平方向与垂直方向平铺会导致很不协调，因此可以用该属性进行调整。如：

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x; /* 改为repeat-y是在y轴方向平铺 */
/* 如果不想让图像平铺，可以用`no-repeat` */
}

background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
background-position
可以利用 background-position 属性改变图像在背景中的位置，如：

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

可以简写属性，将背景属性设置在一个声明中，如：

body {background:#ffffff url('img_tree.png') no-repeat right top;}

文本

文本颜色

color

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
例子：

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式

text-align
文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

text-decoration属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线。
如下：

/* 删除链接的下划线 */
a {text-decoration:none;}
/* 文本的划线 */
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本修饰

文本缩进

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

p {text-indent:50px;}

还有很多在此不过多赘述，需要用到直接去查就好

小结

color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

字体

在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）

字体系列

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;}

italic 和 oblique 的区别
一种字体有粗体、斜体、下划线、删除线等诸多属性。
但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了~
这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！
另 CSS2.0 上边的解释：italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。

链接

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

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

<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>

text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

链接也有背景颜色，同样用background-color来进行设置

第四节：CSS中背景、文本、字体和链接的美化

背景

文本

文本颜色

文本的对齐方式

文本修饰

文本缩进

小结

字体

字体系列

字体样式

字体大小

设置字体大小像素

用em来设置字体大小

链接