CSS 文本格式

CSS 文本格式主要用来设置 HTML 元素文本的颜色,对齐方式,行间距等属性

文本格式

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "运行范例 »" link

文本颜色

CSS color 属性用来设置文字的颜色

颜色是通过 CSS 最经常的指定

  1. 十六进制值 - 如: #FF0000
  2. 一个 RGB 值 - 如: RGB(255,0,0)
  3. 颜色的名称 - 如: red

参阅 CSS 颜色值 查看完整的颜色值

下面的 CSS 样式设置了 body 、h1 、 h2 元素的文本颜色

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

运行范例 »

文本的对齐方式

CSS text-align 属性用来设置文本的水平对齐方式

文本可居中或对齐到左或右,两端对齐

当 text-align 设置为 "justify" ,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

运行范例 »

文本修饰

CSS text-decoration 属性用来设置或删除文本的装饰

从设计的角度看 text-decoration 属性主要是用来删除链接的下划线

a {text-decoration:none;}

运行范例 »

当然我们也可以装饰文字

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

运行范例 »

我们不建议强调指出不是链接的文本,因为这常常混淆用户

文本转换

CSS text-transform 属性用来设置在一个文本中的大写和小写字母

可用于所有字句变成大写或小写字母,或每个单词的首字母大写

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

运行范例 »

文本缩进

CSS text-indent 属性用于设置定文本的第一行的缩进

p {text-indent:50px;}

运行范例 »

更多范例

  1. 指定字符之间的空间

    演示了如何增加或减少字符之间的空间。

  2. 指定行与行之间的空间

    演示了如何指定在一个段落中行之间的空间

  3. 设置元素的文本方向

    演示了如何改变元素的文本方向

  4. 增加单词之间的空白空间

    演示了如何增加一个段落中的单词之间的空白空间。

  5. 在元素内禁用文字环绕

    演示了如何禁用一个元素内的文字环绕

  6. 垂直对齐图像

    演示了如何设置文本的垂直对齐图像

  7. 添加文本阴影

    演示了如何设置文本阴影

CSS 文本属性

下表列出了所有的 CSS 文本属性

属性 描述
color 设置文本颜色
direction 设置文本方向
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.