上一节:
下一节:

  CSS 文本

  • 文本颜色

    color属性用于设置文本的颜色。颜色由下式指定：
    • 颜色名称 - 如“红色”
    • 一个十六进制值 - 比如“＃ff0000”
    • RGB值 - 如“rgb（255,0,0）”
    页面的默认文本颜色在body选择器中定义。 
    body {
         color: blue;
       }

       h1 {
         color: green;
       }
    尝试一下
    注意：对于符合W3C的CSS：如果定义color属性，则还必须定义background-color。

  • 文本对齐

    text-align属性用于设置文本的水平对齐方式。文本可以左对齐，居中对齐或对齐。以下示例显示了中心对齐，左右对齐的文本（如果文本方向是从左到右，则左对齐是默认的，如果文本方向是从右到左，则右对齐是默认的）： 
    h1 {
             text-align: center;
           }

           h2 {
             text-align: left;
           }

           h3 {
             text-align: right;
           }
    尝试一下
    text-align属性设置为“justify”时，每行都被拉伸，以便每行具有相等的宽度，左右边距是直的（如杂志和报纸）： 
    div {
             border: 1px solid black;
             padding: 10px;
             width: 200px;
             height: 200px;
             text-align: justify;
           }
    尝试一下

  • 文本装饰

    text-decoration属性用于设置或删除文本中的装饰。值text-decoration: none;通常用于从链接中删除下划线： 
    a {
             text-decoration: none;
           }
    尝试一下
    其他text-decoration值用于装饰文本： 
    h1 {
             text-decoration: overline;
           }

           h2 {
             text-decoration: line-through;
           }

           h3 {
             text-decoration: underline;
           }
    尝试一下
    注意：不建议为不是链接的文本加下划线，因为这常常使读者感到困惑。

  • 文本转换

    text-transform属性用于指定文本中的大写和小写字母。它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写： 
    p.uppercase {
                 text-transform: uppercase;
               }

               p.lowercase {
                 text-transform: lowercase;
               }

               p.capitalize {
                 text-transform: capitalize;
               }
    尝试一下

  • 文本缩进

    text-indent属性用于指定文本第一行的缩进： 
    p {
             text-indent: 50px;
           }
    尝试一下

  • 字母间距

    letter-spacing属性用于指定文本中字符之间的空格。以下示例演示如何增加或减少字符之间的间距： 
    h1 {
             letter-spacing: 3px;
           }

           h2 {
             letter-spacing: -3px;
           }
    尝试一下

  • 文本行高

    line-height属性用于指定行之间的空格： 
    p.small {
         line-height: 0.7;
       }

       p.big {
         line-height: 1.8;
       }
    尝试一下

  • 文本方向

    direction属性用于更改元素的文本方向： 
    p.ex1 {
         direction: rtl;
       }
    尝试一下

  • 单词间距

    word-spacing属性用于指定文本中单词之间的空格。以下示例演示如何增加或减少单词之间的间距： 
    h1 {
         word-spacing: 10px;
       }

       h2 {
         word-spacing: -5px;
       }
    尝试一下

  • 文本阴影

    text-shadow属性为文本添加阴影。以下示例指定水平阴影的位置（3px），垂直阴影的位置（2px）和阴影的颜色（红色）： 
    h1 {
         text-shadow: 3px 2px red;
       }
    尝试一下

  • 所有CSS文本属性

    属性 描述
    color 设置文本的颜色
    direction 指定文本方向/写入方向
    letter-spacing 增加或减少文本中字符之间的间距
    line-height 设置行高
    text-align 指定文本的水平对齐
    text-decoration 指定添加到文本中的装饰
    text-indent 指定文本块中第一行的缩进
    text-shadow 指定添加到文本中的阴影效果
    text-transform 控制文本的大小写
    text-overflow 指定如何向用户发出未显示的溢出内容的信号
    unicode-bidi 与direction属性一起使用，用于设置或返回是否应该覆盖文本以支持同一文档中的多种语言
    vertical-align 设置元素的垂直对齐
    white-space 指定如何处理元素内部的空白
    word-spacing 增加或减少文字之间的间距

  • 相关页面

    HTML教程：HTML样式
上一节:
下一节: