文章目录

  • ​​一、color 文本颜色​​
  • ​​二、text-align 文本对齐方式​​
  • ​​三、line-height 行间距设置​​
  • ​​四、text-indent 首行缩进设置​​
  • ​​五、text-decoration 文本装饰设置​​
  • ​​六、完整代码示例​​
  • ​​代码​​
  • ​​效果​​






一、color 文本颜色



color 属性 可以 定义 文本颜色

  • 预定义颜色 : 直接使用 颜色的英文名称
  • 十六进制颜色 : #FF0000 红色 , #00FF00 绿色 , #0000FF
  • RGB 代码颜色 :
  • 数值形式 : rgb(255, 0, 0)
  • 百分比形式 : rgb(100%, 0%, 0%) , rgb(0%, 100%, 0%) , rgb(0%, 0%, 100%)


代码示例 :






二、text-align 文本对齐方式



text-align 属性 , 可以设置 文本对齐方式



text-align 属性 取值 :

  • left : 左对齐
  • right : 右对齐 ;
  • center : 居中对齐 ;


text-align 属性 是 让标签中的 文本内容 对齐 , 标签的位置大小区域不变 ;



在 head 标签设置

居中对齐 文本样式 , 将该样式定义在 .tac 类选择器 中 ; 将 tac 类 设置到 h1 标签中 , 让该标签中的内容居中对齐 ;

显示效果如下 :

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_color


为一个 div 设置 上述 居中对齐的 tac 样式 , 整个 div 中的内容 , 包括字标签中的内容 , 也一并居中对齐 ;

展示效果如下 :

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_html_02






三、line-height 行间距设置



line-height 属性 , 用于 设置 行间距 , 又称为 行高 ;

line-height 属性 取值 :

  • 像素 px : 最常用的单位 , 一般情况设置文字默认 16 px , 行高为 24 px 即可 ;
  • 相对值 em ;
  • 百分比 ;

]

默认情况下 行间距 显示效果如下 :

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_html_03


设置了行间距后 :

运行效果 :

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_css_04






四、text-indent 首行缩进设置



text-indent 属性 , 用于 设置 首行缩进



text-indent 属性值 :

  • em 值 : 字符宽度倍数 , 如果在 汉子段落 设置 2em , 就是首行缩进 2 个汉字 ; 推荐使用 ;
  • px 值 : 指定 缩进像素值
  • 百分比值 : 指定 相对于浏览器窗口的百分比值


​ ​



代码示例 :

首行缩进前的效果 :

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_css_05

首行缩进后的效果 :

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_html_06






五、text-decoration 文本装饰设置



text-decoration 属性 , 用于 设置 文本装饰

text-decoration 属性 常用于为 链接 修改 装饰效果 ;



text-decoration 属性值 :

  • none : 默认属性 , 没有装饰 , 取消链接的下划线
  • underline : 保留链接的下划线
  • overline : 在文本上面划一条线
  • line-through : 穿过文本一条线


代码示例 : em 标签下设置下划线 ;

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_color_07






六、完整代码示例



代码

效果

【CSS】CSS 文本样式 ④ ( CSS 外观属性 | color 文本颜色 | text-align 文本对齐方式 | line-height 行间距设置 | 首行缩进设置 | 文本装饰设置 )_text-align_08