CSS文本属性

CSS 文本属性可定义文本的外观，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。

CSS 文本属性（Text）
序号 属性 描述
1 color 设置文本的颜色
2 text-align 规定文本的水平对齐方式
3 text-decoration 规定添加到文本的装饰效果
4 text-indent 规定文本块首行的缩进
5 line-height 设置行高
6 text-transform 控制文本的大小写
7 letter-spacing 设置字符间距
8 word-spacing 设置单词间距
1.CSS color 属性

要设置文本的颜色，最方便的方法是使用 color 属性，所有浏览器都支持 color 属性。

取值
值 描述
color_name 值为颜色名称的颜色（比如 red）。
hex_number 值为十六进制值的颜色（比如 #ff0000）。
rgb_number 值为 rgb 代码的颜色（比如 rgb(255,0,0)）。
inherit 从父元素继承颜色。

实例

为不同元素设置文本颜色：

body{
   color:red;
   }
h1{
   color:#00ff00;
   }
p{
   color:rgb(0,0,255);
   }
2.CSS text-align 属性

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

取值
值 描述
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

实例

为不同元素对齐文本：

h2 {text-align: center;}
h3 {text-align: left;}
h4 {text-align: right；}

<h2>淮阴工学院</h2>
<h3>计算机工程学院</h3>
<h4>信息技术教学部</h4>
单击我看效果
3.CSS text-decoration 属性

text-decoration 属性可以设置文本的上划线、下划线已经删除线等。

取值
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 规定应该从父元素继承 text-decoration 属性的值。

实例

设置 h1、h2、h3、h4 元素的文本修饰：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
p a {text-decoration:none}

<h1>WEB开发技术</h1>
<h2>ASP.NET技术</h2>
<h3>C#程序设计</h3>
<p><a href="http://www.hyit.edu.cn" target="_blank">淮阴工学院</a></p>
<a href="http://ced.hyit.edu.cn" target="_blank">计算机工程学院</a>
单击我看效果
4.CSS text-indent 属性

text-indent 属性可以设置文本中首行文本的缩进。

取值
值 描述
length 定义固定的缩进，具体单位参见“CSS单位”页面，默认值为0。
百分比 定义基于父元素宽度的百分比的缩进。
inherit 规定从父元素继承 text-indent 属性的值。

实例

缩进文本首行：

p {text-indent: 2em;}
p.one {text-indent:20px;}
p.two {text-indent:50%;}

<p>jQuery已经成为JavaScript事实上的代名词，很大程度上是因为其可扩展性，易用性以及在项目管理方面可控。随着用于平板电脑和智能手机等设备的触屏优化技术的演进，以及与此相关的web框架的发展，jQuery Mobile将成为跨平台，支持多设备的手机应用的非常重要的技术选择之一。</p>
<p class="one">越来越多的开发者开始考虑使用HTML 5技术来开发移动应用，建立一个稳定的易用性好的JavaScript框架将成为移动技术开发人员的重要选择。jQuery Mobile具备成为这一框架的事实上的基础。</p>
<p class="two">由于IE 9使用了DirectX10以及硬件加速技术，大幅度提高了浏览器的速度和承载能力，因此Internet Explorer 9 (IE9) 目前相对于其他竞争对手来说速度奇快。Google和Mozilla必然会争先抢后地使用这些相关技术譬如硬件加速技术来应对来自IE 9的压力和竞争。今年，我们大家的浏览器定会飞速，对我们大家绝对是利好消息。</p>
单击我看效果
5.CSS text-line-height 属性

text-line-height 属性可以设置行间的距离（行高）。

取值
值 描述
normal 默认行间距。
% 基于当前字体尺寸的百分比行间距。
length 使用像素值设置行间距。
number 使用一个数值来设置行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

实例

设置段落中的行间距：

<p>国外技术站点Mashable.com评出了开发人员在2011年应该关注的5项Web开发技术，包括jQuery Mobile(jQuery移动版)、Hardware-Accelerated Web Browsers(基于硬件加速的浏览器)、Node.js(服务器端JavaScript)、Real-Time Clickstream Sharing(实时点击流分享)、NoSQL Databases(NoSQL数据库)入选。</p>
<p style="line-height:80%;">jQuery已经成为JavaScript事实上的代名词，很大程度上是因为其可扩展性，易用性以及在项目管理方面可控。随着用于平板电脑和智能手机等设备的触屏优化技术的演进，以及与此相关的web框架的发展，jQuery Mobile将成为跨平台，支持多设备的手机应用的非常重要的技术选择之一。</p>
<p style="line-height:200%;">越来越多的开发者开始考虑使用HTML 5技术来开发移动应用，建立一个稳定的易用性好的JavaScript框架将成为移动技术开发人员的重要选择。jQuery Mobile具备成为这一框架的事实上的基础。（因jQuery目前的应用范围相当广泛和普遍）</p>
<p style="line-height:10px;">由于IE 9使用了DirectX10以及硬件加速技术，大幅度提高了浏览器的速度和承载能力，因此Internet Explorer 9 (IE9) 目前相对于其他竞争对手来说速度奇快。Google和Mozilla必然会争先抢后地使用这些相关技术譬如硬件加速技术来应对来自IE 9的压力和竞争。今年，我们大家的浏览器定会飞速，对我们大家绝对是利好消息。</p>
<p style="line-height:30px;">Node.js技术被很多网站描述成为事件驱动的JavaScript V8引擎。本质上，他是一个工具，为了用JavaScript技术来编写服务端事件驱动的工具集。什么意思？简单的说，技术编程的时候，根本不需要等待一个输入输出I/O 操作完成才能去进行另一个输入输出操作。对于Node.js来说，意味着它可以在服务端做所有数据运算等工作，减轻了客户端的压力。对于一些数据处理类的APP应用来说，像是像实时应用、搜索引擎Web爬虫、文件上传，流媒体技术等等，速度是至关重要的首要环节。</p>
<p style="line-height:0.5;">有无数多的方法来实现将用户分享的内容呈现到互联网上，包括今年出现的一些社交网站分享或者一些在线分享或者在线发布工具等。随着大规模集成分享按钮的应用，以及逐渐采用客户端、weidget页面组件、和在线书签等的应用方式，这，将使分享越来越容易和简便。实时分享的下一方向将会是个人在线阅历或经验分享，在 2011年，这点将会决定互联网是否更加好用。</p>
<p style="line-height:2;">NoSQL，是一个泛定义词汇，用来说明取代现有使用SQL的数据技术，这种NoSql技术不会采用目前已经广泛使用的传统关系型数据库技术。这种 NoSQL技术近些年已经开始兴盛。无表数据库技术已经被Google Amazon 谷歌和亚马逊等巨头所关注，其取代技术有Google的BigTable技术和亚马逊Amazon的 Dynamo技术，阿帕奇的Apache Cassandra, MongoDB, CouchDB, Voldemort 以及Riak技术等等。</p>
单击我看效果
6.CSS text-transform 属性

text-transform 属性可以控制文本的大小写。

取值
值 描述
none 默认。
uppercase 设置文本中所有字母为大写。
lowercase 设置文本中所有字母为小写。
capitalize 设置文本中的每个单词首字母为大写。
inherit 规定应该从父元素继承 text-transform 属性的值。

实例

控制文本中的字母的大小写：

<p style="text-transform:uppercase;">Huaiyin institute of technology</p>
<p style="text-transform:lowercase;">Huaiyin institute of technology</p>
<p style="text-transform:capitalize;">Huaiyin institute of technology</p>
单击我看效果
7.CSS text-letter-spacing 属性

text-letter-spacing 属性可以设置文本中字符间的距离。

取值
值 描述
normal 默认，字符间没有额外的距离。
length 定义字符间的固定距离（可以使用负值）。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

实例

增加或减少字符间距：

<p style="letter-spacing:-0.2em;">Huaiyin institute of technology</p>
<p style="letter-spacing:1em;">Huaiyin institute of technology</p>
<p style="letter-spacing:20px;">Huaiyin institute of technology</p>
单击我看效果
8.CSS text-word-spacing 属性

text-word-spacing 属性可以设置文本中单词间的距离。

取值
值 描述
normal 默认，字符间没有额外的距离。
length 定义单词间的固定距离。
inherit 规定应该从父元素继承 letter-spacing 属性的值。

实例

增加或减少单词间距：

<p style="word-spacing:-0.2em;">Huaiyin institute of technology</p>
<p style="word-spacing:1em;">Huaiyin institute of technology</p>
<p style="word-spacing:20px;">Huaiyin institute of technology</p>
单击我看效果

©版权所有: 淮安深度人工智能科技有限公司2020, 备案号:苏ICP备2020056902号-2 | 技术支持：淮阴工学院计算机与软件工程学院《Web开发技术》教学团队