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 不能控制块元素。

相关推荐
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲5 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel8 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript
赵得C9 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG9 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904279 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js