CSS技巧:CSS格式化文本

作者: 来源: 更新时间:2013-03-02 12:12:47 点击:
选择字体

font-family: "Times New Roman", Times, serif;

注意:字体名称中包含多个单词要用("")括起来。

字体颜色

color:#cccccc(16进制)

color: rgb(0%, 100%, 0%) 或者 color: rbg(0, 255, 0)

rgb颜色,百分数表示0-255的一个数

修改字号

font-size

font-szie后面可接keywords(关键字) px 百分比 em

px:即像素值,最为常用,默认文本的像素值为16px;

keywords: 总共有7个关键字,分别为 xx-large, x-large, large, medium, small x-small, xx-small。但是关键字不精确,而且也缺乏灵活性,因此较少使用。

百分比:由于字号是一种可以继承的属性,因此使用百分比有时要通过计算。比如: 浏览器一般默认的字号都为16px,那么你将一个元素的字号设置为100%,那么这个元素的字号就为16px,也就是说100%对应16px,这是一个基准。因此,如果要将该元素的字号变为32px,那么,用百分比表示就是200%,即16 * 2。接下来,我们来看,如果有下面的结构:

<p> <!--字号为20px--> <span>文本</span> <!--字号为75%--></p>

由于span标签会继承p标签的字号20px,因此,此时span的字号计算公式为20 * 0.75(也就是75%) = 15px。类似的结构可以层层嵌套,只要计算一下就可以了。

em: 表示一个大写M的高度。但是他的作用与百分比很相近,1em = 100%, .75em = 75%, 2em = 200%。

格式化词语和字母

斜体化 font-style

italic(斜体) normal(正常) oblique(和italic一样)

粗体 font-weight

你可以选择100-900之间的整百数(900超粗,100不可见),但是由于浏览器支持的原因,用的很少。一般normal(正常) bold(粗体)

大写化

text-transform

uppercase(大写) lowercase(小写) capitalize(首字母大写) none(不进行大小写)

该属性可以被继承

小型大写字母

font-variant: small-cap;

文本修饰

text-decoration

underline line-through overline none

字母间距和字间距

letter-spacing word-spacing

对于这些属性,可以使用文本尺寸(px em 百分比) 正值代表扩大,负值为缩小。

行高

line-height

px em 百分比 缩放因子

要理解行高,首先要理解一些概念,可以参考这篇文章和里面的链接文章《深入理解css中的行高》

使用行高时要注意一些问题:

1 图片会将整行的行框撑开,但是却并不改变实际的行高

2 em和百分比是相对于文本的字号来计算的,比如文本字号为12px,而行高被设置为150%(1.5em),那么行高为12 * 1.5

3 行高可以被继承,但是em和百分比继承的是计算值,而缩放因子继承的是本身。比如p标签的行高被设置为150%,里面文本字号为10px,那么p里面所有标签都将继承15px的行高,而不是150%;但是缩放因子不同,如果p的缩放因子被设置为2,文本字号为10px,那么p里面所有后代标签都将继承2这个值,而不是20px的行高

垂直对齐

vertical-align

baseline:基线对齐

top:顶端对齐

middle:中线对齐

bottom:底端对齐

text-top:文本顶端对齐

text-bottom:文本底端对齐

sub:下标

super:上标

em 百分比

具体可以参考《垂直对齐:vertical-align属性》这篇文章

使用垂直对齐要注意:

1 浏览器的默认对齐方式为基线对齐,但是对于图片没有基线,故图片的底端会和基线对齐

2 em和百分比值是相对于行高值来计算的,用来改变元素基线的高度,可正可负,正数是元素的基线升高,负数使元素的基线下降

3 设置处置对齐可影响行框高

4 这个属性只是用与行内元素,表单元素,以及图片,表格单元格

文本对齐

text-align

left right center justify(两端对齐)

文本缩进

text-indent

px em 百分比

使用文本缩进要注意:

1 px是精确值

2 em相对于当前字号进行缩进

3 百分比不是相对于字号,而是相对于当前元素的宽度值来计算

4 可以使用负数来实现负缩进

文本格式化有个快捷方法,就是只使用font属性,但是该属性中必须要有字号和字体属性,同时也可以指定行高,具体做法是在字号的后面加上"/",然后加上行高值。而且这两种属性必须在最后,其他属性可以以任意属性出现。

 

给列表定义样式

项目符号和数字

list-style-type

对于无序列表ul有3中项目符号可以选择

disc(实心圆) square(方形) circle(空心圆)

对于有序列表,有6中数字可以选择

decimal(十进制) decimal-leadingzero(十进制前置0) upper-alpha(大写字母) lower-alpha(小写字母) upper-roman(大写罗马) lower-roman(小写罗马)

用list-style-type:none 隐藏这些样式

给项目符号和数字定位

list-style-position

outside:让项目符号和数字出现在文本外

inside: 让项目符号和数字出现在文本内

注意:可以使用padding-left调整项目符号和数字的间距,但是这种情况只有使用list-style-position:outside才有效或者根本没有使用list-style-position。

图形项目符号

list-style-image

url(images/...jpg)

注意:外部样式表中图片的路径是相对于样式表,而不是相对于网页

这种方法可能让你并不能很好的控制图片的位置,通常都会用到background-image,这会更好用

列表样式有一个快捷样式,list-style,它可以包含上面三种情况。