css 文本样式介绍

时间:2016-07-04
css文本样式包括text-decoration、text-transform、text-indent、text-align等等,本文章向大家全面介绍css 文本样式的使用方法和使用实例,需要的朋友可以参考一下。

css 文本样式text-decoration

css text-decoration 属性规定添加到文本的修饰. text-decoration 属性值如下:

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
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>

在线运行

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>

在线运行

上一页 下一页

原文地址:http://www.manongjc.com/article/1138.html