CSS 层叠样式表——文本属性:文本颜色、对齐文本、装饰文本、文本缩进、行间距。

CSS 层叠样式表是前端不可或缺的一部分
下面是一些 CSS 的学习笔记,希望可以帮到大家。

CSS 文本属性

  • CSS Text(文本)属性可定义文本的外观。比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

  • color属性用于定义文本的颜色

    div {
    	color: red;
    }
    
    表示方式属性值
    预定义的颜色值red,green,blue,pink …
    十六进制#FF0000,#FF6600,#29D794 (开发时最常用)
    RGB代码rgb(255,0,0)或rgb(100%,0%,0%)
  • 十六进制写法中,第一二位,三四位,五六位分别对应红色,绿色,蓝色。如果一组数字相同,例如#888888或#ff00ff这种两两相同的组合,可以使用简写,即#888和#f0f

对齐文本

  • text-align属性用于设置元素内文本内容的水平对齐方式。基本语法如下:

    div {
    	text-align: center;
    }
    
    属性值解释
    left左对齐(默认值)
    right右对齐
    center居中对齐
  • <hr>单标签可用于添加水平分割线

装饰文本

  • text-decoration属性规定添加到文本的额修饰。可以给文本添加下划线、删除线、上划线等。基本语法如下:

    div {
    	text-decoration: underline;
    }
    
    属性值描述
    none默认。没有装饰线(最常用)
    underline下划线。常用于取消链接a自带的下划线
    overline上划线(几乎不用)
    line-through删除线(不常用)

文本缩进

  • text-indent属性用来指定文本的第一行的缩进,通常缩进段落首行。基本语法如下:

    div {
    	text-indent: 10px;
    }
    

    通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

  • 比px(像素)更常用的单位是em。em是一个相对单位,就是当前元素(font-size)一个文字的大小,如果当前元素没有设置大小,则会取父元素的一个文字大小。

    p {
    	text-indent: 2em;
    }
    

    行间距

  • line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。基本语法如下:

    p {
    	line-height: 26px;
    }
    

在这里插入图片描述

summary:

属性表示注意点
color文本颜色通常用十六进制 如:#fff
text-align文本对齐可以设定文字水平的对齐方式
text-indent文本缩进通常我们用于段落首行缩进2个字的距离:text-indent: 2em;
text-decoration文本修饰添加下划线:underline 取消下划线:none
text-height行高控制行与行之间的距离

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值