CSS文本属性

CSS文本属性

1.文本颜色

  • 属性名:color
  • 作用:控制文字的颜色。
  • 可选值:
    1. 颜色名
    2. rgb或rgba
    3. HEX或HEXA (十六进制)
    4. HSL或HSLA

开发中常用的是:rgb/rgba 或 HEX/HEXA (十六进制)。

  • 举例:

    div {
    color: rgb(112,45,78);
    }

2.文本间距

  • 字母间距:letter-spacing
  • 单词间距:word-spacing (通过空格识别词)
  • 属性值为像素(px ),正值让间距增大,负值让间距缩小。

3. 文本修饰

  • 属性名:text-decoration

  • 作用:控制文本的各种装饰线。

  • 可选值

    1. none : 无装饰线(常用)
    2. underline :下划线(常用)
    3. overline : 上划线
    4. line-through : 删除线
  • 举例:

    a {
    text-decoration: none;
    }

4 .文本缩进

  • 属性名:text-indent

  • 作用:控制文本首字母的缩进。

  • 属性值:css中的长度单位,例如:px,em

  • 举例:

    div {
    text-indent:2em;
    }

5.文本对齐_水平

  • 属性名:text-align 。

  • 作用:控制文本的水平对齐方式。

  • 常用值:

    1. l eft :左对齐(默认值)
    2. r ight :右对齐
    3. c enter :居中对齐
  • 举例:

    div {
    text-align: center;
    }

6.行高

  • 属性名:line-height
  • 作用:控制一行文字的高度。
  • 可选值:
    1. normal :由浏览器根据文字大小决定的一个默认值。
    2. 像素(px)。
    3. 数字:参考自身font-size 的倍数(很常用)。
    4. 百分比:参考自身font-size 的百分比。
  • 备注:

由于字体设计原因,文字在一行中,并不是绝对垂直居中,若一行中都是文字,不会太影响观感。

  • 举例:

    div {
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
    }

  • 行高注意事项:

  1. line-height 过小会怎样?------ 文字产生重叠,且最小值是0,不能为负数。
  2. line-height 是可以继承的,且为了能更好的呈现文字,最好写数值。
  3. line-height 和height 是什么关系?
    设置了height ,那么高度就是height 的值。
    不设置height 的时候,会根据 line-height *行数 来计算高度。
  • 应用场景:
    1. 对于多行文字:控制行与行之间的距离。
    2. 对于单行文字:让height 等于line-height ,可以实现文字垂直居中。

备注:由于字体设计原因,靠上述办法实现的居中,并不是绝对的垂直居中,但如果 一行中都是文字,不会太影响观感。

7. vertical-align

  • 属性名:vertical-align 。
  • 作用:用于指定同一行元素之间,或 表格单元格 内文字的 垂直对齐方式。
  • 常用值:
    1. baseline (默认值):使元素的基线与父元素的基线对齐。
    2. top:使元素的顶部与其所在行的顶部对齐。
    3. middle :使元素的中部与父元素的基线加上父元素字母x的一半对齐。
    4. bottom :使元素的底部与其所在行的底部对齐。

特别注意:vertical-align 不能控制块元素。

相关推荐
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试