前端学习 -- Css -- 文本样式

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作为单位。

举个例子:

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/**
* text-transform可以用来设置文本的大小写
*/ .none {
text-transform: none;
} .capitalize {
text-transform: capitalize;
} .uppercase {
text-transform: uppercase;
} .lowercase {
text-transform: lowercase;
}
/**
* text-decoration可以用来设置文本的修饰
*/ .underline {
text-decoration: underline;
} .overline {
text-decoration: overline;
} .linethrough {
text-decoration: line-through;
}
/**
* letter-spacing可以指定字符间距
*/ .letterspacing {
letter-spacing: 20px;
}
/**
* word-spacing可以设置单词之间的距离,实际上就是设置词与词之间空格的大小
*/ .wordspacing {
word-spacing: 20px;
}
/*text-align用于设置文本的对齐方式*/
.left{
text-align: left;
}
.right{
text-align: right;
}
.center{
text-align: center;
}
.justify{
text-align: justify;
}
.textindent{
text-indent: 2em;
}
</style>
</head> <body>
<h3 class="none">Forgive me for needing you in my life;</h3>
<h3 class="capitalize">Forgive me for enjoying the beauty of your body and soul;</h3>
<h3 class="uppercase">Forgive me for wanting to be with you when I grow old</h3>
<br />
<h3 class="lowercase">If you were a teardrop;In my eye, </h3> <h3 class="underline">For fear of losing you,I would never cry </h3>
<h3 class="overline">And if the golden sun,Should cease to shine its light, </h3>
<h3 class="linethrough">Just one smile from you,Would make my whole world bright</h3>
<br /> <h3 class="letterspacing">Without you?I'd be a soul without a purpose. </h3>
<h3 class="wordspacing">Without you?I'd be an emotion without a heart</h3>
<br /> <h3 class="left">I'm a face without expression,A heart with no beat. </h3>
<h3 class="right">Without you by my side,I'm just a flame without the </h3>
<h3 class="center">If I cried a tear of painful sorrow</h3>
<h3 class="justify ">I lost all hope for a new tomorrow</h3>
<br/>
<p class="textindent">大道之行也,天下为公,选贤与能,讲信修睦。故人不独亲其亲,不独子其子,使老有所终,壮有所用,幼有所长,矜、寡、孤、独、废疾者皆有所养,男有分,女有归。货恶其弃于地也,不必藏于己;力恶其不出于身也,不必为己。是故谋闭而不兴,盗窃乱贼而不作,故外户而不闭,是谓大同</p>
</body> </html>

效果图:

前端学习 -- Css -- 文本样式

代码见:

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

上一篇:第 15 章 CSS 文本样式[上]


下一篇:SpringBoot配置文件注入值数据校验