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 | 行高 | 控制行与行之间的距离 |