CSS世界Ⅱ(文本)

目录

一、文本颜色(color)

二、文本对齐方式(text-align)

三、文本修饰(text-decoration)

四、文本转换(text-transform)

五、文本缩进(text-indent)

六、文本方向(direction)

七、文本字符间距(letter-spacing)

八、文本行高(line-height)

九、文本阴影(ext-shadow)

十、文本设置或返回文本是否被重写(nicode-bidi)

十一、文本元素的垂直对齐(vertical-align)

十二、文本元素中空白的处理方式(white-space)

十三、文本字间距(word-spacing)


一、文本颜色(color)

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

十六进制值 - 如: #FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如: red

例如:

body {color:red;}

二、文本对齐方式(text-align)

文本排列属性是用来设置文本的水平对齐方式。

文本可居中(center)或对齐到左(right)或右(left),两端对齐(justify)。

例如:

h1 {text-align:center;}

三、文本修饰(text-decoration)

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
dotted 虚线
wavy 波浪线

例如:

h1 {text-decoration:overline;}

四、文本转换(text-transform)

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。

例如:

p.uppercase {text-transform:uppercase;}

五、文本缩进(text-indent)

文本缩进属性是用来指定文本的第一行的缩进。

描述
length 定义固定的缩进。默认值:0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。

例如:

p {text-indent:50px;}

六、文本方向(direction)

描述
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
inherit 规定应该从父元素继承 direction 属性的值。

例如:

div{ direction:rtl;}

七、文本字符间距(letter-spacing)

描述
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间(允许使用负值)。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

例如:

h1 {letter-spacing:2px}

八、文本行高(line-height)

描述
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

例如:

p.small {line-height:90%}

九、文本阴影(ext-shadow)

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

语法:

text-shadow: h-shadow v-shadow blur color;

例如:

h1{text-shadow: 2px 2px #ff0000;}

十、文本设置或返回文本是否被重写(nicode-bidi)

|---------------|-----------------------------------|
| 值 | 描述 |
| normal | 默认。不使用附加的嵌入层面。 |
| embed | 创建一个附加的嵌入层面。 |
| bidi-override | 创建一个附加的嵌入层面。重新排序取决于 direction 属性。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |

语法:

unicode-bidi: normal|embed|bidi-override|initial|inherit;

例如:

div {unicode-bidi:bidi-override; }

十一、文本元素的垂直对齐(vertical-align)

描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 使元素及其后代元素的底部与整行的底部对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length 将元素升高或降低指定的高度,可以是负数。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

例如:

img { vertical-align:text-top; }

十二、文本元素中空白的处理方式(white-space)

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

例如:

p { white-space:nowrap; }

十三、文本字间距(word-spacing)

描述
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。
inherit 规定应该从父元素继承 word-spacing 属性的值。

例如:

p{word-spacing:30px;}

相关推荐
沙蒿同学7 分钟前
我把架构约定编译成了会变红的测试:Wails v2 + Go + Vue3 桌面脚手架实战
前端·后端·github
cpolar技术支持10 分钟前
本地 Playwright 测试报告怎么远程复盘?Trace Viewer 跑起来后,用 cpolar 分享失败现场
前端·自动化测试·测试工具·cpolar·playwright
wordbaby10 分钟前
企业级后台管理系统路由设计与最佳实践指南
前端
胡志辉的博客19 分钟前
【完全开源】IP 纯净度检测 可一键部署到自己的CF
前端·javascript·chrome·ip·chromium
Hilaku1 小时前
作为面试官,我最怕遇到什么样的候选人?
前端·javascript·程序员
小李不想当小白1 小时前
PCB结构与组成(PCB设计入门学习笔记)
经验分享·笔记·单片机·嵌入式硬件·学习·pcb工艺·pcb
TiDi1 小时前
Pinia优化重复请求
前端
web3d5201 小时前
01-用 Leafletjs 10 分钟搭一张水利一张图(Vue3 + Vite 实战)
前端·javascript
晚安日记wanna1 小时前
Vue2 的 defineProperty 差在哪四层追问筛掉九成候选人
前端·vue.js·面试
TiDi2 小时前
吸顶导航交互实现
前端