登录  /  注册

CSS常用文本样式实例介绍

php中文网
发布: 2016-06-01 09:53:14
原创
1573人浏览过

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>
登录后复制

在线运行

参考阅读: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>
登录后复制

在线运行

参考阅读: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>
登录后复制

在线运行

参考阅读: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>
登录后复制

在线运行

参考阅读: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>
登录后复制

在线运行

参考阅读: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>
登录后复制

在线运行

参考阅读:CSS text-decoration

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号