前端学习 -- Css -- 文本样式
2017-04-16 16:46
801 查看
text-transform可以用来设置文本的大小写
可选值:none 默认值,该怎么显示就怎么显示,不做任何处理
capitalize 单词的首字母大写,通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
text-decoration可以用来设置文本的修饰
可选值:none:默认值,不添加任何修饰,正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline,如果需要去除超链接的下划线则需要将该样式设置为none。
letter-spacing可以指定字符间距
word-spacing可以设置单词之间的距离,实际上就是设置词与词之间空格的大小
text-align用于设置文本的对齐方式
可选值:left 默认值,文本靠左对齐
right , 文本靠右对齐
center , 文本居中对齐
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>
效果图:
代码见:
https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson11.html
相关文章推荐
- 前端学习笔记7 CSS为文本添加样式
- css文本样式-css学习之旅(4)
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
- css文本样式-css学习之旅(4)
- 从零开始前端学习[15]:css样式之border-radius圆角使用
- css文本样式-css学习之旅(4)
- HTML学习笔记(3)——CSS的引入,选择器和文本样式
- 前端学习 -- Css -- 文本标签
- HTML5学习_day01(7)--css常用文本样式
- 【HTML5学习笔记】19:CSS文本样式 上
- 从零开始前端学习[9]:css中的背景样式background的使用
- css文本样式-css学习之旅(4)
- 从零开始前端学习[11]:控制文本显示的样式属性
- 前端学习 -- Css -- 默认样式
- 【HTML5学习笔记】20:CSS文本样式 下
- 前端学习 -- Css -- 样式的继承
- 【前端学习笔记】关于CSS通过一个块改变另一个块的样式
- CSS学习系列六:文本样式
- JavaScript CSS修改学习第五章 给“上传”添加样式
- css 文字按钮实现样式submit按钮以文本的形式显示出来