第5课:文本

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

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

文本缩进[text-indent]

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

p {text-indent: 30px;}

 

文本对齐[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;
}

文本装饰[text-decoration]

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

h1 {
 text-decoration:underline;
}

h2 {
 text-decoration:overline;
}

h3 {
 text-decoration:line-through;
}

字符间距[letter-spacing]

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

h1 {
 letter-spacing:6px;
}

p {
 letter-spacing:3px;
}

文本转换[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;
}

 

小结

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

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4972.html

(4)
江山如画的头像江山如画管理团队
上一篇 2020年2月22日 下午4:30
下一篇 2020年2月22日 下午4:51

99%的人还看了以下文章

  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    5.1K0
  • 第8课:组织元素(span和div)

    pan和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本…

    2020年2月25日
    3.0K0
  • HTML5画布(Canvas)速查表

    HTML5 <canvas> 标签用于绘制图像。<canvas> 元素本身仅仅是图形的容器,必须使用脚本来完成实际的绘图任务。HTML5 <canvas> 可用于在画布上绘制文本、线条、矩形、圆形等等。 HTML5画布(Canvas)元素 <canvas id=”myCanvas” width=”500″ heigh…

    2018年2月20日
    2.7K0
  • JavaScript 向数组的开头或末尾添加元素:unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 unshift() 实例: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    2018年9月5日
    14.1K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.5K0
  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    4.6K0

发表回复

登录后才能评论