web前端6--文本样式
1、文本颜色
在CSS中,可以使用`color`属性来设置文本颜色。
颜色关键字:CSS中的颜色关键字是一组预定义的颜色名称,可以直接使用这些关键字来设置元素的颜色
| 颜色关键字 | 中文解释 |
| black | 黑色 |
| white | 白色 |
| red | 红色 |
| green | 绿色 |
| blue | 蓝色 |
| yellow | 黄色 |
| cyan | 青色 |
| magenta | 洋红 |
| aqua | 水色 |
| aquamarine | 绿玉 |
| azure | 蔚蓝 |
| beige | 米色 |
| brown | 棕色 |
| coral | 珊瑚色 |
| crimson | 绯红 |
| fuchsia | 紫红 |
| gold | 金色 |
| gray | 灰色 |
| indigo | 靛青 |
| khaki | 卡其色 |
| lavender | 薰衣草 |
| lime | 酸橙色 |
| maroon | 栗色 |
| navy | 海军蓝 |
| olive | 橄榄色 |
| orange | 橙色 |
| pink | 粉红 |
| purple | 紫色 |
| salmon | 鲑鱼色 |
| silver | 银色 |
| teal | 水鸭色 |
| violet | 紫罗兰 |
| wheat | 小麦色 |
| transparent | 透明色 |
**不太常用
- 十六进制 #000000 abcdef
。`#FF0000`表示红色,`#008000`表示绿色,`#0000FF`表示蓝色,
`#FFFF00`表示黄色
- rgb值 rgb(194, 238, 38); 介于0-255之间的整数
- rgba值 还要透明度0-1之间 rgba(194, 238, 38,0.5)
2、文本装饰
文本装饰是指在文本上应用一些装饰性效果,通过`text-decoration`来实现,以下是一些常见的文本装饰属性:
| 值 | 描述 |
| none | 去除装饰 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
`text-decoration-color`(文本装饰颜色):用于设置文本装饰的颜色。
`text-decoration-style`(文本装饰样式):用于设置文本装饰的样式,可以是 `solid`(实线,默认)、`double`(双线)、`dotted`(点线)等。
3、文本缩进
在CSS中,你可以使用`text-indent`属性来设置文本的缩进。该属性指定文本块中第一行的缩进。
- text-indent: 50px;
4、水平对齐方式
text-align 设置文本对齐方式
| 值 | 描述 |
| :-----: | :------------: |
| left | 默认值,左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
5、字符间距
`word-spacing`属性用于设置单词之间的额外间距。
`letter-spacing`属性用于设置字符之间的额外间距。
6、css继承性
大部分的**文本文字属性**都会继承,会被子元素继承自其父元素。
意味着父元素上设置的某些属性值会自动应用到其子元素上,除非子元素上明确指定了不同的值
7、元素的垂直对齐
**vertical-align**控制元素内部行内与行内块元素的垂直对齐方式。
baseline 默认 基线对齐
middle 中间
top 顶部
bottom 底部
8、应用实例
原文地址:https://blog.csdn.net/Lorcian/article/details/145301379
免责声明:本站文章内容转载自网络资源,如侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!