主题:css文本和字体的属性设置
 楼主 mmwbzq 发表于2010-11-17 9:45:44
css文本和字体的属性设置

缩进文本

把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

例:将段落的首行缩进5 em: p {text-indent: 5em;}

注意:无法将该属性应用于行内元素,图像之类的替换元素。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

 

使用负值

text-indent 还可以设置为负值。即第一行悬挂在元素中余下部分的左边:p {text-indent: -5em;}如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。

 

使用百分比值

text-indent 可以使用所有长度单位,包括百分比值。如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中,缩进值是父元素的 20%,即 100 个像素:

div {width: 500px;}

p {text-indent: 20%;}

<div>

<p>this is a paragragh</p>

</div>

继承

text-indent 属性可以继承

div#outer {width: 500px;}

div#inner {text-indent: 10%;}

p {width: 200px;}

<div>

<div>some text. some text. some text.

<p>this is a paragragh.</p>

</div>

</div>

以上标记中的段落也会缩进 50 像素,因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

 

水平对齐

text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

text-align:center 与 <CENTER>

<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。

最后一个水平对齐属性是 justify。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。

 

字间隔

word-spacing 属性可以改变字之间的间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:

p.spread {word-spacing: 30px;}

p.tight {word-spacing: -0.5em;}

<p>

This is a paragraph. The spaces between words will be decreased.

</p>

<p>

This is a paragraph. The spaces between words will be increased.

</p>

 

字母间隔

letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。

与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal。输入的长度值会使字母之间的间隔增加或减少指定的量:

h1 {letter-spacing: -0.5em}

h4 {letter-spacing: 20px}

<h1>This is header 1</h1>

<h4>This is header 4</h4>

 

字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值:

none:使用源文档中的原有大小写

uppercase :将文本转换为全大写

lowercase :将文本转换为全小写

capitalize :只对单词的首字母大写

 

文本装饰

text-decoration 属性有 5 个值:

none :不做修改

underline: 加下划线

overline :上划线

line-through :在文本中间画一个线

blink :让文本闪烁

例:设置所有超链接既有下划线,又有上划线,则规则如下:

a:link a:visited {text-decoration: underline overline;}

如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。

h2.stricken {text-decoration: line-through;} 所有 class 为 stricken 的 h2 元素都只有一个贯穿线

h2 {text-decoration: underline overline;} 既有下划线又有上划线

通过使用white-space 属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。

white-space 属性的行为:

值 空白符 换行符 自动换行

pre-line 合并 保留 允许

normal 合并 忽略 允许

nowrap 合并 忽略 不允许

pre 保留 保留 不允许

pre-wrap 保留 保留 允许

 

文本方向

direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。

对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。

属性 描述

color 设置文本颜色

direction 设置文本方向。

line-height 设置行高。

letter-spacing 设置字符间距。

text-align 对齐元素中的文本。

text-decoration 向文本添加修饰。

text-indent 缩进元素中文本的首行。

text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。

text-transform 控制元素中的字母。

unicode-bidi 设置文本方向。

white-space 设置元素中空白的处理方式。

word-spacing 设置字间距。

 

 1 hgjhkj 发表于2010-11-17 18:55:34

有些还不了解,学习一下。

 2 dawei 发表于2010-11-20 9:40:02

不错的贴

奇新云平台
切换