欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS文本属性

程序员文章站 2023-08-30 14:10:08
CSS文本属性 1. CSS Text(文本)属性定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等 2. 文本颜色 color属性定义文本的颜色 ~~~html div{ color:red; } ~~~ | 表示 | 属性值 | | | | | 预定义颜色值 | red、gr ......

css文本属性

  1. css text(文本)属性定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

  2. 文本颜色

    • color属性定义文本的颜色

    • <style type="text/css">
          div{
              color:red;
          }
      
      </style>
      • 表示 属性值
        预定义颜色值 red、green....
        十六进制 #ff0000,##ff6600....
        rgb rgb(255,0,0)或者rgb(100%,0%,0%)
  3. 对齐文本

    • text-align属性用于元素内文本内容的水平对齐

    • <style type="text/css">
          div{
              text-align:center;
          }
      
      </style>
    • 属性值 解释
      left 左对齐
      right 右对齐
      center 居中对齐
  4. 装饰文本

    • text-decoration属性规定添加文本的装饰,可以给文本添加下划线、删除线、上划线

    • <style type="text/css">
          div{
              text-decoration:underline;
          }
      </style>
    • 属性值 描述
      none 默认。没有装饰线
      underline 下划线。链接<a> 自带下划线
      overline 上划线
      line-through 删除线
  5. 文本缩进

    • text-indent属性用来指定文本的第一行缩进,通常是将段落的首行缩进

    • <style type="text/css">
          div{
              text-indent:2em;
          }
      </style>
    • em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照元素的1个文字大小

  6. 行间距

    • line-height属性用于设置行间的距离(行高),可以控制文字行与行之间的距离

    • <style type="text/css">
          div{
              line-height:26px;
          }
      </style>
    • 行间距包括:上间距、文本高度、下间距

属性 表示 说明
color 文本颜色 通常使用十六进制
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常缩进两个字符,用2em表示
text-decoration 文本装饰 underline增加下划线,none取消下划线
line-height 行高 控制行与行之间的距离