css 文本样式text-decoration
css text-decoration 属性规定添加到文本的修饰. text-decoration 属性值如下:
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| 定义闪烁的文本。 | |
| inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
实例:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
<##ads_in_article_manong##>
css 文本样式text-transform
css text-transform 属性控制文本的大小写。text-transform 属性值如下:
| 值 | 描述 |
|---|---|
| none | 默认。定义带有小写字母和大写字母的标准的文本。 |
| capitalize | 文本中的每个单词以大写字母开头。 |
| uppercase | 定义仅有大写字母。 |
| lowercase | 定义无大写字母,仅有小写字母。 |
| inherit | 规定应该从父元素继承 text-transform 属性的值。 |
实例:
<!DOCTYPE html>
<html>
<head>
<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>
css 文本样式text-indent
css text-indent 属性规定文本块中首行文本的缩进。text-indent 属性值如下:
| 值 | 描述 |
|---|---|
| length | 定义固定的缩进。默认值:0。 |
| % | 定义基于父元素宽度的百分比的缩进。 |
| inherit | 规定应该从父元素继承 text-indent 属性的值。 |
实例
<!DOCTYPE html>
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}p {text-indent:50px;}
p {text-indent:50px;}p {text-indent:50px;}</p>
</body>
</html>
css文本样式text-align
css text-align属性指定元素文本的水平对齐方式。text-align属性值如下表所示:
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值:由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
实例:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class=\"date\">2015 年 3 月 14 号</p>
<p class=\"main\">“当我年轻的时候,我梦想改变这个世界;当我成熟以后”</p>
<p><b>注意:</b> 重置浏览器窗口大小查看 \"justify\" 是如何工作的。</p>
</body>
</html>
继续阅读与本文标签相同的文章
-
微软建议企业客户卸载KB4520062累积更新
2026-05-14栏目: 教程
-
他让我国芯片研究停滞13年,还骗走11亿研发资金,现状如何?
2026-05-14栏目: 教程
-
健乐教学机器人可开展的教学实训内容
2026-05-14栏目: 教程
-
5G套餐曝光遭“吐槽”,iphone11受追捧,导致苹果11销量比较高
2026-05-14栏目: 教程
-
为什么修电脑的叫自己不要杀毒和清理垃圾?
2026-05-14栏目: 教程
