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

最新推荐文章于 2024-05-22 13:52:22 发布

A08110123

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量89

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/androidsuperman/p/6719182.html

版权

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

转载于:https://www.cnblogs.com/androidsuperman/p/6719182.html

A08110123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习 -- Css -- 文本样式

text-transform可以用来设置文本的大小写可选值：none 默认值，该怎么显示就怎么显示，不做任何处理capitalize 单词的首字母大写，通过空格来识别单词uppercase 所有的字母都大写lowercase 所有的字母都小写text-decoration可以用来设置文本的修饰可选值：none：默认...
复制链接

扫一扫