CSS一些简单的样式

CSS文本样式

字体属性
- 字体类型
- 字体大小
- 字体风格
- 字体粗细
- 字体属性
文本样式
- 文本颜色
- 水平对齐方式
- 首行缩进和行高
- 文本装饰
- 垂直对齐方式

字体属性

字体属性就如之前用到的font-size属性，可以设置字体大小，除此之外还可以定义字体类型、字体是否加粗、字体风格等。

属性名	含义	示例
font-size	设置字体大小	font-size:12px;
font-family	设置字体类型	font-family:“微软雅黑”;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px “宋体”

字体类型

字体类型是通过font-family属性来控制的。例如将HTML中所有<p>标签中的英文和中文分别使用Verdana和楷体字体显示，就可以通过标签选择器来定义<p>标签中的元素的字体样式。

p{font-family: Verdana,"楷体";
}

这句代码同时声明了两种字体，分别是Verdana和楷体，这样浏览器会优先用Verdana字体显示文字，如果是Verdana字体里没有包含的字符（通常英文字体不支持中文），则从后面的中文字体里面寻找，这样就实现了英文使用Verdana、中文使用楷体的字体效果。

字体风格

在CSS中，使用font-stylle属性设置字体的风格，属性值有三个，分别是normal、italic和oblique，分别显示标准的字体样式、斜体字体样式和倾斜的字体样式，normal为默认值。italic和oblique在页面中显示的效果非常相似。
示例如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体风格</title><style>h1{font-style:normal;}span{font-style: italic;}p{font-style: oblique;}</style></head><body><h1>人物简介</h1><h2>李清照</h2><span>(1084年3月13日~1155年5月12日)</span><p>宋代女词人,号易安居士,婉约词派代表,<br>有&quot;千古第一才女&quot;之称.早期生活优裕,<br>金兵入据中原时,流寓南方,境遇孤苦.</p></body>
</html>

在浏览器中查看的网页效果，italic和oblique的显示效果有点相似。normal表示显示字体的标准样式。

字体粗细

CSS中使用font-weight属性控制文字粗细，重要的是CSS可以将文本是粗体的文字变为正常粗细。font-weight属性取值如下。

值	说明
normal	默认值，定义标准的字体
boid	粗体字体
boider	更粗的字体
lighter	更细的字体
100、200、300、 400 、500、600、 700 、800、900	定义由细到粗的字体，400相当于normal，700相当于bold（实际细不到100也粗不到900）

代码示例如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>字体风格</title><style>h1{font-weight: normal;}span{font-weight: 700;}p{font-weight: bold;}</style></head><body><h1>人物简介</h1><h2>李清照</h2><span>(1084年3月13日~1155年5月12日)</span><p>宋代女词人,号易安居士,婉约词派代表,<br>有&quot;千古第一才女&quot;之称.早期生活优裕,<br>金兵入据中原时,流寓南方,境遇孤苦.</p></body>
</html>

可以看出标题变为字体正常粗细，内容都是加粗。

字体属性

前面讲的都是几个字体属性单独使用，实际上在CSS中可以用font属性对同一部分的字体设置多种字体属性，就是简化以上操作，各个属性之间用空格分开，但需要注意字体属性的顺序依次为字体风格→字体粗细→字体大小→字体类型。
例如

p{font: oblique bold 12px "楷体";
}

文本样式

用于排版网页文本样式的属性有文本颜色、水平对齐方式、首行缩进、行高、文本装饰、垂直对齐方式等。

属性	含义	举例
color	设置文本颜色	color:#F00;
text-align	设置元素水平对齐方式	text-align:center;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line:height:25px;
text-decoration	设置文本的装饰	trxt-decoration:underline;

文本颜色

(1)RGB

在HTML中，颜色统一采用RGB格式，也就是通常说的“红绿蓝”三原色模式。虽然可以使用英文单词表示颜色，但是英文单词毕竟是有限的，因此在网页制作中基本上都采用十六进制表示颜色。十六进制可以表示所有的颜色，如“#A983D8”“#95F141”“#396”“#906”等。为什么有的六位，有的三位，用三位表示颜色是颜色属性值的简写，当六位颜色值相邻数字两两相同时，可以两两缩写，如“#336699”可以简写为“#369”。

(2)RGBA
RGBA在RGB的基础上增加了一个A（alpha）透明度的参数，这个参数的取值范围为0~1，如果是0，表示完全透明；如果是1，表示完全不透明。透明度的取值也不能是负数。

水平对齐方式

在CSS中，文本对齐方式是通过text-align属性来控制的，通过它可以设置文本左对齐、右对齐、居中对齐、两端对齐。

值	说明
left	把文本排列到左边，默认值，由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本的效果

在浏览新闻页面时会发现标题往往都居中显示，来源都居右显示，而CSS页面的所有内容都是默认居左显示。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>对齐方式</title><style>h1{text-align: center;}h3{text-align: right;}p{text-align: justify;}</style></head><body><h1>CSS介绍</h1><h3>来源：来自百度百科</h3><hr><p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body>
</html>

首行缩进和行高

在使用word编辑文档时，通常会设置段落的行距，并且段落的首行缩进两个字符。在CSS中通过line-height属性设置行高，通过text-indent属性设置首行缩进。

line-height属性和font-size属性值一样，也是通过数字表示单位也是px（像素）。除了用像素表示行高外，也可不加任何单位，按倍数表示，这时行高是字体大小的倍数。

text-indent直接以数字表示缩进距离，单位为em或px。对于中文网页em用的较多，通常设置为“2em”,表示缩进两个字符。em是相对单位，表示相当于本行中字符的倍数。无论字体大小如何变化，都会根据字符的大小自动适应。

文本装饰

网页中经常看到一些文字有下划线、删除线等，这些都是文本的装饰效果。在CSS中通过text-decoration属性来设置。

值	说明
none	默认值，定义标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文本的删除线

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文本装饰</title><style>a:nth-of-type(1){text-decoration: none;}a:nth-of-type(2){text-decoration: underline;}a:nth-of-type(3){text-decoration: overline;}a:nth-of-type(4){text-decoration: line-through;}</style></head><body><a href="#">无下划线：none</a><br><br><a href="#">下划线：underline</a><br><br><a href="#">上划线：overline</a><br><br><a href="#">删除线：line-through</a></body>
</html>

HTML标签中，a元素默认就有下划线，但是网页上大多数的a元素都没有下划线，这时候就要通过text-decoration属性把它删除。一般情况下none和underline是两个常用的值。

垂直对齐方式

在CSS中通过vertical-align属性设置文本垂直方向的对齐方式。在浏览器中，只能对表格单元格中的对象使用，而对一般的标签，如<h1>~<h6>、<p>、<div>标签等都是不起作用的，因此在设置文本标签的垂直对齐时并不常用，反而经常用来设置图片与文字的对齐方式。