CSS常用文本样式实例介绍

WBOY
Freigeben: 2016-06-01 09:53:14
Original
1754 Leute haben es durchsucht

CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中,内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容。本文将详细介绍文本相关样式。

css text-indent首行缩进

定义:首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格,类似于此。

注意:该属性可以为负值

text-indent值: | | inherit

text-indent初始值: 0

text-indent应用于: 块级元素(包括block和inline-block)

text-indent继承性: 有

text-indent百分数: 相对于包含块的宽度

 

CSS text-indent 实例

缩进段落的第一行50像素:

<code class="language-html">


<style>
p {text-indent:50px;}
</style>



<p>文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:50px;}p {text-indent:50px;}
p {text-indent:50px;}p {text-indent:50px;}</p>


</code>
Nach dem Login kopieren

在线运行

参考阅读:CSS text-indent

 

css text-align 水平对齐

text-align定义:水平对齐是影响一个元素中的文本的水平对齐方式。

text-align值: left | center | right | justify | inherit

text-align初始值: left

text-align应用于: 块级元素(包括block和inline-block)

text-align继承性: 有

 

css text-align实例

h1, h2, 和 h3元素设置文本的对齐方式:

<code class="language-html">


<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>



<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候,我梦想改变这个世界;当我成熟以后,我发现我不能够改变这个世界,
  我将目光缩短了些,决定只改变我的国家;当我进入暮年以后,我发现我不能够改变我们的国家,我的最
  后愿望仅仅是改变一下我的家庭,但是,这也不可能。当我现在躺在床上,行将就木时,我突然意识到:
  如果一开始我仅仅去改变我自己,然后,我可能改变我的家庭;在家人的帮助和鼓励下,
  我可能为国家做一些事情;然后,谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意:</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>


</code>
Nach dem Login kopieren

在线运行

参考阅读:CSS text-align

 

css word-spacing字间隔

字间隔是指单词间距,用来设置文字或单词之间的间距。实际上,"字"表示的是任何非空白符字符组成的串,并由某种空白符包围

[注意]单词之间用空格分开,单词之间的间距 = word-spacing + 空格大小

[注意]字间隔可为负值

word-spacing值: | normal | inherit

word-spacing初始值: normal(默认为0)

word-spacing应用于: 所有元素

word-spacing继承性: 有

 

css word-spacing实例:

指定段字之间的空间,应该是30像素:

<code class="language-html">


<style>
p
{ 
word-spacing:30px;
}
</style>



<p>
This is some text. This is some text.
</p>


</code>
Nach dem Login kopieren

在线运行

参考阅读:CSS word-spacing

 

css letter-spacing字母间隔

字母间隔是指字符间距

[注意]字母间隔可为负值

letter-spacing值: | normal | inherit

letter-spacing初始值: normal(默认为0)

letter-spacing应用于: 所有元素

letter-spacing继承性: 有

 

CSS letter-spacing 实例

设置为h1和h2元素的字母间距:

<code class="language-html">


<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>



<h1>This is heading 1</h1>
<h2>This is heading 2</h2>

</code>
Nach dem Login kopieren

在线运行

参考阅读:CSS letter-spacing

 

css text-transform文本转换 

text-transform文本转换用于处理英文的大小写转换

text-transform值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

text-transform初始值: none

text-transform应用于: 所有元素

text-transform继承性: 有

 

CSS text-transform 实例

转换不同元素中的文本:

<code class="language-html">


<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>



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

</code>
Nach dem Login kopieren

在线运行

参考阅读:CSS text-transform

 

css text-decoration文本修饰

text-decoration文本修饰用于为文本提供修饰线

[注意]text-decoration文本修饰线的颜色与文本颜色相同

text-decoration值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

text-decoration初始值: none

text-decoration应用于: 所有元素

text-decoration继承性: 无

 

CSS text-decoration 实例

设置h1,h2,h3和h4元素文本装饰:

<code class="language-html">


<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>



<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>


</code>
Nach dem Login kopieren

在线运行

参考阅读:CSS text-decoration

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!