首页 前端知识 CSS常用属性(文本属性)

CSS常用属性(文本属性)

2024-11-04 09:11:11 前端知识 前端哥 482 1000 我要收藏

一、文本颜色

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

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

举例:

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

二、文本间距

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

三、文本修饰

属性名: text - decoration 作用:控制文本的各种装饰线 可选值:
  1. none : 无装饰线(常用)
  2. underline :下划线(常用)
  3. verline : 上划线
  4. line - through : 删除线

可搭配如下值使用:

  1. dotted :虚线
  2. wavy :波浪线
  3.  也可以指定颜色
举例:
a {
    text-decoration: none;
}

四、文本缩进

属性名: text - indent 作用:控制文本首字母的缩进。 属性值: css 中的长度单位,例如: px 举例:
div {
    text-indent:40px;
}

五、文本对齐_水平

属性名: text - align 作用:控制文本的水平对齐方式。 常用值:
  1. left :左对齐(默认值)
  2. right :右对齐
  3. center :居中对齐
举例:
div {
    text-align: center;
}

六、font-size

1. 由于字体设计原因,文字最终呈现的大小,并不一定与 font - size 的值一致,可能大,也可能小。( 例如: font - size 设为 40px ,最终呈现的文字,可能比 40px 大,也可能比 40px 小。)

2. 通常情况下,文字相对字体设计框,并不是垂直居中的,通常都靠下 一些。

七、行高

属性名: 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 ,可以实现文字垂直居中。

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

八、文本对齐_垂直  

顶部: 无需任何属性,在垂直方向上,默认就是顶部对齐。 居中: 对于单行文字,让 height = line - height 即可。( 多行文字垂直居中可以用定位去做 底部: 对于单行文字,目前一个临时的方式:         让 line - height = ( height × 2 ) - font - size - x x 是根据字体族,动态决定的一个值。         垂直方向上的底部对齐,同样用定位去做)

九、vertical-align

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

vertical-align 不能控制块元素。)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19842.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!