CSS/tutorials/lesson5

来自开放百科 - 灰狐
(版本间的差异)
跳转到: 导航, 搜索
(文本对齐[text-align])
(小结)
 
(未显示1个用户的9个中间版本)
第37行: 第37行:
  
 
==文本装饰[text-decoration]==
 
==文本装饰[text-decoration]==
 +
CSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如,你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中,我们为h1标题增添了下划线,为h2标题增添了上划线,为h3标题增添了删除线。
 +
 +
h1 {
 +
  text-decoration: underline;
 +
}
 +
h2 {
 +
  text-decoration: overline;
 +
}
 +
h3 {
 +
  text-decoration: line-through;
 +
}
 +
 +
[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson5-ex3.html 显示示例]
 +
 
==字符间距[letter-spacing]==
 
==字符间距[letter-spacing]==
 +
CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如,假如你希望p元素里的文本段落的字间距为3个像素,而h1标题的字间距为6个像素,代码可以这样写:
 +
 +
h1 {
 +
  letter-spacing: 6px;
 +
}
 +
p {
 +
  letter-spacing: 3px;
 +
}
 +
 +
[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson5-ex4.html 显示示例]
 +
 
==文本转换[text-transform]==
 
==文本转换[text-transform]==
 +
CSS属性text-transform用于控制文本的大小写。无论字母本来的大小写,你可以通过该属性令它首字母大写(capitalize)、全部大写(uppercase)或者全部小写(lowercase)。
 +
 +
比如,单词“headline”在展现给网页浏览者时,可以是“HEADLINE”或者“Headline”。text-transform属性有四个可选值:
 +
*capitalize
 +
将每个单词的首字母转换为大写。例如:“john doe”将被转换为“John Doe”。
 +
*uppercase
 +
所有字母都转换为大写。例如:“john doe”将被转换为“JOHN DOE”。
 +
*lowercase
 +
所有字母都转换为小写。例如:“JOHN DOE”将被转换为“john doe”。
 +
*none
 +
不作任何转换——文本怎么写的就怎么显示。
 +
 +
来举个例子,我们将使用一个姓名列表。所有姓名都用<li>(列表项)标签来标记。我们希望对姓名采用首字母大写的方式,而对标题采用全部大写的方式。
 +
 +
查看过该例的HTML代码后你会发现,其实在HTML代码里我们写的姓名和标题全部都是小写。
 +
 +
 +
h1 {
 +
  text-transform: uppercase;
 +
}
 +
li {
 +
  text-transform: capitalize;
 +
}
 +
 +
 +
[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson5-ex5.html 显示示例]
 +
 
==小结==
 
==小结==
 +
在上面三课里,你已经学习了一些CSS属性,不过还有更多需要学习。在[[CSS/tutorials/lesson6|下一课]]我们将对链接作有关介绍。
  
 
{{comment}}
 
{{comment}}
  
 
[[Category:CSS]]
 
[[Category:CSS]]

2010年10月16日 (六) 05:50的最后版本

目录

[编辑] 第5课:文本

文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解:

  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

[编辑] 文本缩进[text-indent]

CSS属性text-indent用于为段落设置首行缩进,以令其具有美观的格式。在下例中,我们为采用p元素的段落应用了30像素的首行缩进。

p {
 text-indent: 30px;
}

Icon-example.gif 显示示例

[编辑] 文本对齐[text-align]

CSS属性text-align与HTML属性align的功能相同。该属性的值可以是:left(左对齐)、right(右对齐)或者center(居中)。除了上面三种选择以外,你还可以将该属性的值设为justify(两端对齐),即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。

在下例中,标题(th)中的文字被设置为右对齐,而表中数据(td) 被设置为居中。正常的文本段落被设置为两端对齐。

th {
 text-align: right;
}
td {
 text-align: center;
}
p {
 text-align: justify;
}

Icon-example.gif 显示示例

[编辑] 文本装饰[text-decoration]

CSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如,你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中,我们为h1标题增添了下划线,为h2标题增添了上划线,为h3标题增添了删除线。

h1 {
 text-decoration: underline;
}
h2 {
 text-decoration: overline;
}
h3 {
 text-decoration: line-through;
}

Icon-example.gif 显示示例

[编辑] 字符间距[letter-spacing]

CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如,假如你希望p元素里的文本段落的字间距为3个像素,而h1标题的字间距为6个像素,代码可以这样写:

h1 {
 letter-spacing: 6px;
}
p {
 letter-spacing: 3px;
}

Icon-example.gif 显示示例

[编辑] 文本转换[text-transform]

CSS属性text-transform用于控制文本的大小写。无论字母本来的大小写,你可以通过该属性令它首字母大写(capitalize)、全部大写(uppercase)或者全部小写(lowercase)。

比如,单词“headline”在展现给网页浏览者时,可以是“HEADLINE”或者“Headline”。text-transform属性有四个可选值:

  • capitalize

将每个单词的首字母转换为大写。例如:“john doe”将被转换为“John Doe”。

  • uppercase

所有字母都转换为大写。例如:“john doe”将被转换为“JOHN DOE”。

  • lowercase

所有字母都转换为小写。例如:“JOHN DOE”将被转换为“john doe”。

  • none

不作任何转换——文本怎么写的就怎么显示。

来举个例子,我们将使用一个姓名列表。所有姓名都用
  • (列表项)标签来标记。我们希望对姓名采用首字母大写的方式,而对标题采用全部大写的方式。 查看过该例的HTML代码后你会发现,其实在HTML代码里我们写的姓名和标题全部都是小写。 h1 { text-transform: uppercase; } li { text-transform: capitalize; } Icon-example.gif 显示示例

    [编辑] 小结

    在上面三课里,你已经学习了一些CSS属性,不过还有更多需要学习。在下一课我们将对链接作有关介绍。

    Comment-32x32.png

    <discussion>characters_max=300</discussion>

  • 分享您的观点
    个人工具
    名字空间

    变换
    操作
    导航
    工具箱