0
点赞
收藏
分享

微信扫一扫

8、前端开发:CSS知识总结——文本样式(1)


1、text-transform

可用来设置文本的大小写;

可选值:


描述

none

默认。定义带有小写字母和大写字母的标准的文本。

capitalize

文本中的每个单词以大写字母开头。

uppercase

定义仅有大写字母。

lowercase

定义无大写字母,仅有小写字母。

inherit

规定应该从父元素继承 text-transform 属性的值。

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>半壁为璜</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

运行结果:

THIS IS SOME TEXT.

this is some text.

This Is Some Text.

2、text-decoration

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。

text-decoration 属性是以下三种属性的简写:

        text-decoration-line       text-decoration-color       text-decoration-style

/*关键值*/
text-decoration: none; /*没有文本装饰*/
text-decoration: underline red; /*红色下划线*/
text-decoration: underline wavy red; /*红色波浪形下划线*/

/*全局值*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

 可选值:


描述

none

默认。定义标准的文本。

underline

定义文本下的一条线。

overline

定义文本上的一条线。

line-through

定义穿过文本下的一条线。

blink

定义闪烁的文本。

inherit

规定应该从父元素继承 text-decoration 属性的值。

3、letter-spacing

 letter-spacing 属性增加或减少字符间的空白(字符间距)

可选值:


描述

normal

默认。规定字符间没有额外的空间。

length

定义字符间的固定空间(允许使用负值)。

inherit

规定应该从父元素继承 letter-spacing 属性的值。

4、word-spacing 

 word-spacing属性增加或减少字与字之间的空白。

可选值:


描述

normal

默认。定义单词间的标准空间。

length

定义单词间的固定空间。

inherit

规定应该从父元素继承 word-spacing 属性的值。

5、text-align

text-align属性指定元素文本的水平对齐方式。

可选值:


描述

left

把文本排列到左边。默认值:由浏览器决定。

right

把文本排列到右边。

center

把文本排列到中间。

justify

实现两端对齐文本效果。

inherit

规定应该从父元素继承 text-align 属性的值。

6、text-indent 

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

举报

相关推荐

0 条评论