text-transform可以用来设置文本的大小写

可选值：

  1. none 默认值，该怎么显示就怎么显示，不做任何处理
  2. capitalize 单词的首字母大写，通过空格来识别单词
  3. uppercase 所有的字母都大写
  4. lowercase 所有的字母都小写

text-decoration可以用来设置文本的修饰

可选值：

  1. none：默认值，不添加任何修饰，正常显示
  2. underline 为文本添加下划线
  3. overline 为文本添加上划线
  4. line-through 为文本添加删除线

超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline，如果需要去除超链接的下划线则需要将该样式设置为none。

letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离，实际上就是设置词与词之间空格的大小

text-align用于设置文本的对齐方式

可选值：

  1. left 默认值，文本靠左对齐
  2. right ， 文本靠右对齐
  3. center ， 文本居中对齐
  4. justify ， 两端对齐

- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的

text-indent用来设置首行缩进

当给它指定一个正值时，会自动向右侧缩进指定的像素如果为它指定一个负值，则会向左移动指定的像素，通过这种方式可以将一些不想显示的文字隐藏起来，这个值一般都会使用em作为单位。

举个例子：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.         <style type="text/css">
  8.             /**
  9.              * text-transform可以用来设置文本的大小写
  10.              */
  11.  
  12.             .none {
  13.                 text-transform: none;
  14.             }
  15.  
  16.             .capitalize {
  17.                 text-transform: capitalize;
  18.             }
  19.  
  20.             .uppercase {
  21.                 text-transform: uppercase;
  22.             }
  23.  
  24.             .lowercase {
  25.                 text-transform: lowercase;
  26.             }
  27.             /**
  28.              * text-decoration可以用来设置文本的修饰
  29.              */
  30.  
  31.             .underline {
  32.                 text-decoration: underline;
  33.             }
  34.  
  35.             .overline {
  36.                 text-decoration: overline;
  37.             }
  38.  
  39.             .linethrough {
  40.                 text-decoration: line-through;
  41.             }
  42.             /**
  43.              * letter-spacing可以指定字符间距
  44.              */
  45.  
  46.             .letterspacing {
  47.                 letter-spacing: 20px;
  48.             }
  49.             /**
  50.              * word-spacing可以设置单词之间的距离，实际上就是设置词与词之间空格的大小
  51.              */
  52.  
  53.             .wordspacing {
  54.                 word-spacing: 20px;
  55.             }
  56.             /*text-align用于设置文本的对齐方式*/
  57.             .left{
  58.                 text-align: left;
  59.             }
  60.             .right{
  61.                 text-align: right;
  62.             }
  63.             .center{
  64.                 text-align: center;
  65.             }
  66.             .justify{
  67.                 text-align: justify;
  68.             }
  69.             .textindent{
  70.                 text-indent: 2em;
  71.             }
  72.         </style>
  73.     </head>
  74.  
  75.     <body>
  76.         <h3 class="none">Forgive me for needing you in my life;</h3>
  77.         <h3 class="capitalize">Forgive me for enjoying the beauty of your body and soul;</h3>
  78.         <h3 class="uppercase">Forgive me for wanting to be with you when I grow old</h3>
  79.         <br />
  80.         <h3 class="lowercase">If you were a teardrop;In my eye, </h3>
  81.  
  82.         <h3 class="underline">For fear of losing you,I would never cry </h3>
  83.         <h3 class="overline">And if the golden sun,Should cease to shine its light, </h3>
  84.         <h3 class="linethrough">Just one smile from you,Would make my whole world bright</h3>
  85.         <br />
  86.  
  87.         <h3 class="letterspacing">Without you?I'd be a soul without a purpose. </h3>
  88.         <h3 class="wordspacing">Without you?I'd be an emotion without a heart</h3>
  89.         <br />
  90.  
  91.         <h3 class="left">I'm a face without expression,A heart with no beat. </h3>
  92.         <h3 class="right">Without you by my side,I'm just a flame without the </h3>
  93.         <h3 class="center">If I cried a tear of painful sorrow</h3>
  94.         <h3 class="justify ">I lost all hope for a new tomorrow</h3>
  95.         <br/>
  96.         <p class="textindent">大道之行也，天下为公，选贤与能，讲信修睦。故人不独亲其亲，不独子其子，使老有所终，壮有所用，幼有所长，矜、寡、孤、独、废疾者皆有所养，男有分，女有归。货恶其弃于地也，不必藏于己；力恶其不出于身也，不必为己。是故谋闭而不兴，盗窃乱贼而不作，故外户而不闭，是谓大同</p>
  97.     </body>
  98.  
  99. </html>

效果图：

代码见：

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson11.html

前端学习 -- Css -- 文本样式的更多相关文章

  1. 前端学习 -- Css -- 默认样式

    浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果, 所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的. 所以我们往往在编写样式 ...

  2. HTML和CSS前端教程03-CSS文本样式

    目录 1.CSS颜色-建议就用十六进制 2.CSS长度的度量单位-建议就用px 3.CSS文本样式 3.1. 字体属性 3.1. 文本样式 1.CSS颜色-建议就用十六进制 p{ color: #ff ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 第 15 章 CSS 文本样式[下]

    学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．文本总汇 本节课, ...

  5. 第 15 章 CSS 文本样式[上]

    学习要点: 1.字体总汇 2.字体设置 3.Web 字体 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一．字体总汇 本节 ...

  6. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  7. 【CSS学习】--- 文本样式

    一.前言 CSS文本属性可以定义文本的外观.通过文本属性,可以定义文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. CSS常用的文本属性目录: text-align 文本对齐属性 te ...

  8. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  9. （3）css文本样式

    本篇学习资料主要讲解: 如何用css 的样式定义方法来介绍文字的使用. 第(1)节:用css设置文本样式.                       一.弄懂文本文字的制作.利用css的样式定义版面 ...

随机推荐

  1. Python实现随机读取文本N行数据

    工作中需要判断某个文本中的URL是否能正常访问,并且随机获取其中N行能正常访问的URL数据,我的思路是:读取文本每一行数据,用urlopen访问,将返回状态码为200的URL保存到一个列表,获得列表长 ...

  2. c# 无边框窗体的边框阴影

    Windows API: using System; using System.Collections.Generic; using System.ComponentModel; using Syst ...

  3. 20155229《网络对抗技术》Exp6：信息收集与漏洞扫描

    实验内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点 (4)漏洞扫描:会扫,会看报告,会查漏洞说明,会修补 ...

  4. 备忘：BLOCK CORRUPTION IN SYSTEM DATAFILE

    http://www.onlinedbasupport.com/2010/12/10/block-corruption-in-system-datafile/

  5. raft--分布式一致性协议

    0. 写在前面的话 一直从事分布式对象存储工作,在分布式对象存储的运营,开发等工作中,数据一致性是至关重要的.因此想写一篇关于分布式一致性的文章.一来,可以和大家分享.二来,可以提高自己的文字提炼能力 ...

  6. React Native 'config.h' file not found 问题、 'glog/logging.h' file not found 问题、configure: error: C compiler cannot create executables问题解决过程记录

    1.在github 上面 git clone 一个RN 项目代码,npm install (yarn)后,准备运行iOS工程,发现'config.h' file not found ,恶心!!! 百度 ...

  7. underscore.js源码解析（一）

    一直想针对一个框架的源码好好的学习一下编程思想和技巧,提高一下自己的水平,但是看过一些框架的源码,都感觉看的莫名其妙,看不太懂,最后找到这个underscore.js由于这个比较简短,一千多行,而且读 ...

  8. Centos6.5下进行PHP版本升级

    http://blog.csdn.net/aliveqf/article/details/70444387

  9. 《Linux内核设计与实现》 第三周 读书笔记

    第一章 Linux内核简介 1. Unix的历史 Unⅸ虽然已经使用了40年,但计算机科学家仍然认为它是现存操作系统中最强大和最优秀的系统. Unix强大的根本原因: 简洁 在Unix中所有的东西都被 ...

  10. （第三周）使用visual studio 2015进行单元测试

    Microsoft visual studio是目前最流行的windows平台应用程序的集成开发环境.最新版本为 Visual Studio 2015 .Visual Studio 2015 包含许多 ...