码迷,mamicode.com
首页 > 其他好文 > 详细

第十章:为文本添加样式

时间:2015-11-30 23:50:30      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

本章内容:

1.选择字体的方法:在样式表中需要的选择器之后输入font-family:name。如:要将body元素的字体换成Geneva的代码:body{font-family:geneva;}。需要注意的是:虽然font-family属性是继承的,但是有几个元素不会继承父元素的字体设置,其中有表单的select、textarea、input 元素。但是可以强制它们继承父元素的字体设置,代码为:input,select,textarea{font-family:inherit;}

2.指定替代字体:字体列表成为字体栈,通常包括三个字体:希望使用的字体、一个或几个替代的字体、一个表示类属的标准字体。每个字体之间用逗号隔开。如:body{font-family:Geneva,Tahoma,sans-serif;}

3.创建斜体:font-style:italic(创建斜体)或oblique(创建倾斜文本)。注意:取消斜体是:font-style:normal。font-style属性时继承的。

4.应用粗体格式:输入:font-weight:blod 让文本显示为具有平均粗直的粗体。或者输入100~900之间100的倍数,400表示正常粗细,700代表粗体。再或者输入:bloder(更粗)或lighter(更细)。取消粗体格式:font-weight:normal。font-weight属性时继承的。

5.设置字体大小:(1)直接使用像素指定要使用的特殊字号。(2)用百分数、em或者rem指定相对于父元素文本的大小。使用em与百分比数的算法:要指定的字体的大小/父元素的字体大小=值。如:输入:font-size:字体大小值。

6.设置行高:行高指的是段落的行距,即段落内之间的距离。输入:line-height:n。这里的n是一个数字,它与元素的字体大小相乘,得出需要的行高。

7.设置字体颜色:输入:color:colorname。

8.设置背景:修改文本的背景颜色:background-color:colorname(颜色名称)或transparent(表示允许透过父元素的背景颜色)。使用背景图像作为背景:background-image:url(或者none表示不使用图像)。重复背景图像:输入:background-repeat:direction,这里的direction可以取四个值:repeat、repeat-x、repeat-y、no-repeat。控制背景图像是否随页面滚动:background-attachment:fixed(背景图像会附着在浏览器的窗口上)/scroll(访问者滚动页面时背景图像会移动)/local(只有访问者滚动背景图像所在的元素时,背景图像才会移动)。指定元素背景图像的位置:background-position_x y_,其中x和y可以表示为距离左上角的绝对距离或百分数。

9.控制间距:指定字间距:word-spacing:length这里的length是一个带单位的数字,如0.4em或5px。指定子偶间距:letter-spacing:length,这里的length是一个带单位的数字,如0.4em或5px。

10.添加缩进:text-indent:length 这里的length是一个带单位的数字,如1.5em或18px。

11.对其文本:输入:text-align:left(左对齐)/right(右对齐)/center(居中)。

12.修改文本的大小写:text-transform属性可以为样式定义文本的大小写。text-transform:capitalize让每个单词的首字母大写,text-transform:uppercase让所有字母大写,text-lowercase让所有字母小写,text-transform:none让文本保持原来的样子。

13.装饰文本:text-decoration:underline以添加下划线,或者输入overline以添加上划线,或者输入line-through以添加删除线。

14.设置空白属性:white-space:pre(让浏览器显示原文本中的所有空格和回车)、nowrap(确保所有空格不断行)、normal(按正常方式处理空格)。

第十章:为文本添加样式

标签:

原文地址:http://www.cnblogs.com/koto/p/5008612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!