CSS文本属性可以定义文本的外观

通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等。

缩进文本

把web页面上的段落的第一行缩进，这是最常用的文本格式化效果。

css 提供了text-indent属性 该属性可以方便的实现文本缩进。

通过 text-indent属性 所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以为负值。

这个属性最常见的用途是将段落的首行缩进，下面的规则会是所有短路的首行缩进5em

  1. p {text-indent: 5em;}

注意:一般来说可以为所有的块级元素添加text-indent 但无法将此属性应用于行内元素 图像之类的替换元素也无法应用text-indent属性。不过，如果一个块级元素(比如段落),在首行终有一个图像。他会随着该行的其余文本移动。

提示:如果想把一个行内元素的第一行缩进，可以用做那边句或外边距创造出这种效果。

使用负值

text-indent可以使用负值，利用这种技术 可以实现很多有趣的效果  比如 悬挂缩进  即第一行悬挂在元素中余下部分的左边：

  1. p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

  1. p {text-indent: -5em; padding-left: 5em;}

使用百分比值
text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中，缩进值是父元素的 20%，即 100 个像素：

  1. div {width: 500px;}
  2. p {text-indent: %;}
  3.  
  4. <div>
  5. <p>this is a paragragh</p>
  6. </div>

继承

text-indent 属性可以继承，请考虑如下标记：

  1. div#outer {width: 500px;}
  2. div#inner {text-indent: %;}
  3. p {width: 200px;}
  4.  
  5. <div id="outer">
  6. <div id="inner">some text. some text. some text.
  7. <p>this is a paragragh.</p>
  8. </div>
  9. </div>

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

水平对齐

text-align是一个基本的属性，他会影响一个元素中的文本行互相之间的对齐方式 他的三个值相当直接 不过第四个 第五个则略有复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。
<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。

justify

在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。您也许已经注意到了，两端对齐文本在打印领域很常见。

字间隔

word-spacing 属性 可以改变单词之间的标准间隔 其默认值normal与设置值为0 是一样的。

word-sapcing属性接受一个正长度值或者负长度值。如果提供一个正长度值 那么字之间的间隔就会增加 为 word-spacing设置一个负值 会把它拉近

  1. p.spread {word-spacing: 30px;}
  2. p.tight {word-spacing: -.5em;}
  3.  
  4. <p class="spread">
  5. This is a paragraph. The spaces between words will be increased.
  6. </p>
  7.  
  8. <p class="tight">
  9. This is a paragraph. The spaces between words will be decreased.
  10. </p>

字母间隔

letter-spacing属性与word-spacing 的区别在于 字母间隔修改的是字符或者字母之间的间隔。

与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

  1. h1 {letter-spacing: -.5em}
  2. h4 {letter-spacing: 20px}
  3.  
  4. <h1>This is header </h1>
  5. <h4>This is header </h4>

字符转换

text-transform属性处理文本的大小写 这个属性有四个值：

none

uppercase

lowercase

capitalize

默认值none对文本不做任何改动 将使用源文本中的源有大小写。uppercase和lowercase分别是大写和小写 capitalize只对每个单词的首字母大写。

文本装饰

文本装饰属性就是text-decoration。它又下面几个值

none

underline

overline

line-through

blink

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

处理空白符

white-space属性会影响用户代理对源文本中的空格 华航 和 tab字符的处理

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

  1. <p>This     paragraph has    many
  2.     spaces           in it.</p>
  3. p {white-space: normal;}

例子:

1.设置文本颜色

  1. demo.css
  2. body {
  3.     color: red;
  4. }
  5. h1 {
  6.     color: green;
  7. }
  8.  
  9. p.ex {
  10.     color: blue;
  11. }
  12. demo.html
  13.     <head>
  14.         <meta charset="UTF-8">
  15.         <title>颜色</title>
  16.         <link rel="stylesheet" type="text/css" href="CSS/demo.css" />
  17.     </head>
  18.     <body>
  19.         <h1>这是 heading 1</h1>
  20.         <p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
  21.         <p class="ex">这是另一段文本 通过class索引设置样式</p>
  22.  
  23.     </body>

2:设置文本的背景颜色

  1. demo.css
  2. p span {
  3.     background-color: yellow;
  4. }
  5. demo.html
  6. <head>
  7.         <meta charset="UTF-8">
  8.         <title>背景颜色</title>
  9.         <link rel="stylesheet" type="text/css" href="CSS/demo.css" />
  10.     </head>
  11.     <body>
  12.         <h1>设置文本的背景颜色</h1>
  13.         <p>这是一段我精心准备的文本 <span>这些会包含在内敛元素span内 会有背景颜色</span>之外的这些没有颜色</p>
  14.         <div>
  15.             这是一个块元素 也被<span>span包含 但是不会有背景色</span>
  16.         </div>
  17.  
  18.     </body>

3:规定字符间距

  1. demo.css
  2. p.big {
  3.     letter-spacing: 2em;
  4. }
  5. p.small {
  6.     letter-spacing: -0.5em;
  7. }
  8. demo.html
  9. <head>
  10.         <meta charset="UTF-8">
  11.         <title>规定字符间距</title>
  12.         <link rel="stylesheet" type="text/css" href="CSS/demo.css" />
  13.     </head>
  14.     <body>
  15.         <p class="big">tianlianfeng</p>
  16.         <p class="small">tianlianfeng</p>
  17.     </body>

4.对齐文本

  1. <style type="text/css">
  2. h1 {text-align: center}
  3. h2 {text-align: left}
  4. h3 {text-align: right}
  5. </style>
  6. </head>
  7.  
  8. <body>
  9. <h1>这是标题 1</h1>
  10. <h2>这是标题 2</h2>
  11. <h3>这是标题 3</h3>
  12. </body>

5:修饰文本

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title>规定字符间距</title>
  4.         <style type="text/css">
  5.             p.underline {
  6.                 text-decoration: underline;
  7.             }
  8.             p.overline {
  9.                 text-decoration: overline;
  10.             }
  11.             p.linethrough {
  12.                 text-decoration: line-through;
  13.             }
  14.             p.none {
  15.                 text-decoration: none;
  16.             }
  17.             /*事实证明对p是没效果的*/
  18.             p.blink  {
  19.                 text-decoration: blink;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <p class="underline">这段标题下面有下划线</p>
  25.         <p class="overline">这段话上面又一个线</p>
  26.         <p class="linethrough">中间穿过一条线</p>
  27.         <p class="none">没有任何效果</p>
  28.         <p class="blink">会闪烁据说</p>
  29.     </body>

6:缩进文本

  1. <style type="text/css">
  2. p {text-indent: 1cm}
  3. </style>
  4. </head>
  5.  
  6. <body>
  7. <p>
  8. 这是段落中的一些文本。
  9. 这是段落中的一些文本。
  10. 这是段落中的一些文本。
  11. 这是段落中的一些文本。
  12. 这是段落中的一些文本。
  13. 这是段落中的一些文本。
  14. 这是段落中的一些文本。
  15. 这是段落中的一些文本。
  16. 这是段落中的一些文本。
  17. 这是段落中的一些文本。
  18. 这是段落中的一些文本。
  19. 这是段落中的一些文本。
  20. </p>
  21. </body>

7:控制字符大小写

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title>控制大小写</title>
  4.         <style type="text/css">
  5.             p.uppercase {
  6.                 text-transform: uppercase;
  7.             }
  8.             p.lowercase {
  9.                 text-transform: lowercase;
  10.             }
  11.             p.capitalize {
  12.                 text-transform: capitalize;
  13.             }
  14.             h1 {
  15.                 text-transform: uppercase;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <h1>This Is An H1 Element</h1>
  21.         <p class="uppercase">This is some text in a paragraph.</p>
  22.         <p class="lowercase">This is some text in a paragraph.</p>
  23.         <p class="capitalize">This is some text in a paragraph.</p>
  24.     </body>

8:增加单词间的间距

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title>单词间距</title>
  4.         <style type="text/css">
  5.             p.big {
  6.                 word-spacing: 1cm;
  7.             }
  8.             p.small {
  9.                 word-spacing: -0.5cm;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <p class="big">this is tianlianfeng</p>
  15.         <p class="small">this is tianlianfeng</p>
  16.     </body>

控制折行

  1. <head>
  2.         <meta charset="UTF-8">
  3.         <title>单词间距</title>
  4.         <style type="text/css">
  5.             p {
  6.                 /*保留折行 和空格*/
  7.                 /*white-space: pre-wrap;*/
  8.                 /*没有空格和折行*/
  9.                 /*white-space: nowrap;*/
  10.                 /*忽略空白符 保留折行*/
  11.                 white-space: pre-line;
  12.             }
  13.         </style>
  14.     </head>
  15.     <body>
  16.         <p>
  17.             这是一些文本。    这是一些文本。
  18.                     这是一些文本。      这是一些文本。
  19.             这是一些文本。
  20.                 这是一些文本。    这是一些文本。
  21.  
  22.             这是一些文本。
  23.         </p>
  24.     </body>

HTML 学习笔记 CSS样式（文本）的更多相关文章

  1. 前端学习笔记--CSS样式--文本

    1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:

  2. HTML 学习笔记 CSS样式（定位）

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  3. HTML 学习笔记 CSS样式（边框）

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  4. HTML 学习笔记 CSS样式（字体）

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  5. HTML 学习笔记 CSS样式（外边框 外边框合并）

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  6. HTML 学习笔记 CSS样式（框模型）

    CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述

  7. HTML 学习笔记 CSS样式（链接）

    我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...

  8. HTML 学习笔记 CSS样式（简介和语法）

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  9. 学习笔记 css样式

    大小 width:宽度  height:高度 背景 background-color  背景色   background-image  背景图片     background-repeat  背景平铺 ...

随机推荐

  1. SQL for SQLite

    语法 verb + subject + predicate commannds(命令) SQL由命令组成,以分号为结束.命令有token组成,token由white space分隔,包括空格.tab. ...

  2. phonegap创建的ios项目推送消息出现闪退现象

    使用phonegap创建的ios项目,推送消息时,当程序在前台运行或者在后台运行状态下,推送消息过来,可以解析并且跳转: 但是在程序从后台退出的状态下,当消息推送过来的时候,点击通知栏,打开程序,程序 ...

  3. 是否要学SpringMVC

    如题,希望大侠们指出,不能用Spring就觉得他什么都好,本帖子意在实际工作中,对是否将Spring引入项目及如何更好的使用Spring提出启发式意见.目前已有高人表达了自己对Spring的不满,让我 ...

  4. jax-rs中的一些参数标注简介(@PathParam,@QueryParam,@MatrixParam,@HeaderParam,@FormParam,@CookieParam)

    先复习一下url的组成: scheme:[//[user:password@]host[:port]][/]path[?query][#fragment] jax-rs anotation @Path ...

  5. Socket的简单使用

    一.Socket: Socket又称”套接字" 网络上的两个程序通过一个双向的通信链接实现数据的交换,这个连接的一端成为一个socket 应用程序通常通过”套接字”向网络发出请求或者应答网络 ...

  6. iOS-字符属性NSAttributedString描述

    /* 字符属性 字符属性可以应用于 attributed string 的文本中. NSString *const NSFontAttributeName;(字体) NSString *const N ...

  7. 史上最详细“截图”搭建Hexo博客——For Windows

    http://angelen.me/2015/01/23/2015-01-23-%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86%E2%80%9C%E6%88 ...

  8. 6、后记：PMO项目管理 - PMO项目管理办公室

    PMO项目管理办公室的作用,按笔者所简化的理解,其作用就是将项目资源标准化.规范化.文档化.然后,根据实际的项目情况,对项目间的资源内容进行协调沟通和培训,让项目组能够更快更好的完成项目建设任务. 不 ...

  9. informatica powercenter学习笔记（LookUp 使用）

    LOOKUP TRANSFORMATION的使用点评: LOOKUP基本用法不熟的话请参考下附属信息. 用法感受: 1 LOOKUP的作用跟我们以前在EXCEL的函数功能类似,就是隔表取值.优点就是用 ...

  10. 挖一挖C#中那些我们不常用的东西之系列（1）——ToDictionary,ToLookup

    这个系列我们看看C#中有哪些我们知道,但是又不知道怎么用,又或者懒得去了解的东西,比如这篇我们要介绍的toDictionary 和ToLookup. 从图中我们看到有四个ToXXX的方法,其中ToAr ...