自学内容网 自学内容网

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)!