一个文本-
text - 属性指定文本的装饰方式
常用的值有:
none - 默认值,这定义了一个普通文本
● - 从其父元素继承该属性
- 在文本上方画一条水平线
●-在文字下方画一条横线
line - 在文本中绘制一条水平线(替换 html 标记)
代码:
唯有创造才能进步生命,唯有适应才能生存
不要用昨天的泪水打湿今天的阳光
逼迫你前行的,不是前方梦想的微弱光芒,而是身后现实的茫茫深渊
只有真诚地爱自己,才能真诚地爱别人
多多益善
CSS 代码:
p.none{text-:none;}
p.{text-:;}
p.{text-:;}
p.{text-:;}
p.line-{ text-:line-; }
效果如下:
您可以组合 , 或 line- 添加多条装饰线。
text- 的另一个值是 blink,它使文本闪烁。
文字-:眨眼;
此值有效,但已弃用,并且被大多数浏览器忽略。
两个文本缩进
text- 指定在第一行文本开始之前应保留多少水平空间。 属性值有长度(px、pt、cm、em等)、%和
代码:
使用 text- 将文本向右缩进 60px。
CSS 代码:
p.text-{text-: 60px;}
效果如下:
允许负值。 如果该值为负数,则第一行将向左缩进。
三文——
文本 - 为文本添加阴影
它有四个值:
● 第一个值:定义阴影在x(水平)方向的距离
● 第二个值:定义y(垂直)方向的距离
●第三个值:定义阴影的模糊半径
● 地面四值:设置颜色
代码:
实践是思想的真理
CSS 代码:
p.text-{color:blue;font-size:30pt;text-:5px 2px 4px gray; }
效果如下:
在上面的例子中。
●5px:x坐标
2px:y坐标
4px:模糊半径
●灰色:影子的颜色
要向文本添加多个阴影,请使用逗号分隔阴影列表
处理阴影时,可以使用css支持的任何颜色样式
对于 x 和 y 偏移量,可以使用各种类型的单位(如 px、cm、mm、in、pc、pt 等)
也支持负值
下面的示例创建了一个蓝色阴影,它比正文高 2px,向左多 1px,并用 0.5em 模糊:
代码:
爱只是一种疯狂
CSS 代码:
p.text-{ font-size:20pt;text-:rgba(0,0,255,1) -1px -2px 0.5em;}
效果如下:
和早期版本不支持文本属性。
四文-
text-属性可以实现文本首字母大写的效果
代码:
每个单词中第一个的值;
所有其他。
CSS 代码:
p.{text-:;}
效果如下:
使用 text- 使文本显示为全部大写或全部小写
属性值:(全部大写)(全部小写)none(没有任何作用)
五-
- 该属性指定文本中字符之间的空格。
值可以设置为:
●定义了默认样式,字符之间没有多余的空格
●使用px、pt、cm、mm等度量单位来定义字符之间的额外空间
● 继承其父元素的属性
代码:
爱是一种甜蜜的痛苦
世间,除了生死,哪一物不闲
CSS 代码:
p.{ -:; }
p.{-:4px; }
效果如下:
- 使用负值减少字符间距
请设置间距后测试效果,以免影响文字的可读性
六个字——
word- 指定文本中单词之间的空格。 就像-属性一样,你可以将word-的值设置为,并且
当一个段落需要使用正常的字间距显示时,通常使用
要使用 word- 定义单词之间的间距,您可以使用 px、pt、pc、cm、mm、、em、ex 等度量单位
负值也是允许的
七白-
white - 可以处理元素内的换行符
参数可以是,等。
元素中的所有换行符和空格都将被屏蔽,将整个文本放在一行中
代码:
这有和
一个换行符,但它将是,因为我们使用了该值。
CSS 代码:
p. { 空白:; }
效果如下:
注意:您可以测试 white- 和 white-space 之间的区别
文本将在同一行继续,直到
标记
white-space 还支持其他值:
●pre:文本支持所有换行符和空格
●pre-line:文本支持换行,忽略多余空格
● 预换行:文本将在必要时换行或在行尾换行
pre-wrap 值的行为与 pre 值相同,只是它添加了额外的换行符以防止文本超出元素的框。