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

相关推荐
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿3 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡4 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员5 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐5 小时前
前端图像处理(一)
前端