四、文本样式
| 序号 |
中文说明 |
标记语法 |
备注 |
| 1 |
行 间 距 |
{line-height:数值|inherit|normal;} |
|
| 2 |
文本修饰 |
{text-decoration:inherit|none|underline|overline|line-through|blink} |
|
| 3 |
段首空格 |
{text-indent:数值|inherit} |
|
| 4 |
水平对齐 |
{text-align:left|right|center|justify} |
|
| 5 |
垂直对齐 |
{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super} |
|
| 6 |
书写方式 |
{writing-mode:lr-tb|tb-rl} |
|
语法：{line-height:数值|inherit|normal}
作用：行与行之间的距离
说明：行间距离取值
·不带单位的数字：以1为基数，相当于比例关系的100%
·带长度单位的数字：以具体的单位为准
·比例关系
注意：行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。
语法：{text-decoration:inherit|none|underline|overline|line-through|blink}
作用：文本修饰，用于控制文本元素所用的效果，特别适用于引人注意的说明，警告等文本效果。
说明：
·inherit 继承
·none 无文本修饰，缺省设置
·underline 下划线
·overline 上划线
·line-through 删除线
·blink 闪烁
注意：同一语句中可以组合多个关键字。
例子：下划线 上划线 删除线 闪烁
使用下列语句可以使连接不再有下划线:A:link,A:visited,A:active { text-decoration: none }
语法：{text-indent:数值|inherit}
说明：取值范围
·带长度单位的数字
·比例关系
注意：文本缩进可以使文本在相对默认值较窄的区域里显示，主要用于中文板式的首行缩进，或是为大段的引用文本和备注做成缩进的格式。在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，其实事实并非如此，整个浏览器的窗口才是浏览器所默认的参照物。另外，text-indent是块级属性，只能用于
、、
、
~
等标识符里。
语法：{text-align:left|right|center|justify}
作用：在元素框中水平对齐文本
说明：
·left 左对齐
·right 右对齐
·center 居中
·justify 两端对齐，均匀分布
注意：text-alight是块级属性，只能用于
、、
、
~
等标识符里。文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。
语法：{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
说明：
·inherit 继承
·top 顶对齐
·bottom 底对齐
·text-top 相对文本顶对齐
·text-bottom 相对文本底对齐
·baseline 基准线对齐
·middle 中心对齐
·sub 以下标的形式显示
·super 以上标的形式显示
注意：文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。
例子：105 105 105 105
语法：{writing-mode:lr-tb|tb-rl}
作用：文字的书写方式
说明：
·lr-tb 从左向左，从上往下
·tb-rl: 从上往下，从右向左
五、背景样式
| 序号 |
中文说明 |
标记语法 |
备注 |
| 1 |
背景颜色 |
{background-color:数值} |
|
| 2 |
背景图片 |
{background-image: url(URL)|none} |
|
| 3 |
背景重复 |
{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} |
|
| 4 |
背景固定 |
{background-attachment:fixed|scroll} |
|
| 5 |
背景定位 |
{background-position:数值|top|bottom|left|right|center} |
|
| 6 |
背影样式 |
{background:背景颜色|背景图象|背景重复|背景附件|背景位置} |
|
语法：{background-color:数值}
说明：参数取值和颜色属性一样
注意：在HTML当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了，而且对象的范围很广，可以是一段文字，也可以只是一个单词或一个字母。
例子：给部分文字加背景颜色给部分文字加背景颜色
| 表格背影颜色：style="background-color:red" |
语法：{background-image: url(URL)|none}
说明： URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径，将什么也不显示。
例子：给部分文字加背景图片 .imgbgstyle { background-image: url(logo.gif)}
语法：{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用：背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片
说明：参数取值范围：
·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺
注意：如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。
| 4．背景固定：background-attachment |
语法：{background-attachment:fixed|scroll}
说明：参数取值范围
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动
·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动
注意：背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。
例子：使背景图案不随文字“滚动”的CSS
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
| 5．背景定位：background-position |
语法：{background-position:数值|top|bottom|left|right|center}
作用：背景定位用于控制背景图片在网页中显示的位置。
说明：参数取值范围
·带长度单位的数字参数
·top：相对前景对象顶对齐
·bottom：相对前景对象底对齐
·left：相对前景对象左对齐
·right：相对前景对象右对齐
·center：相对前景对象中心对齐
·比例关系
关键字解释如下:
top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
注意：参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。
语法：{background:背景颜色|背景图象|背景重复|背景附件|背景位置}
作用：背景属性是一个更明确的背景—关系属性的略写。以下是一些背景的声明:
例子：
BODY { background: white url(http://www.yidi.net/logo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
注意：当一个值未被指定时，将接受其初始值。例如，在上述的前三条规则，背景位置属性将被设置为0% 0%。为了避免与用户的样式表之间的冲突，背景和颜色应该一起被指定。
