likes
comments
collection
share

CSS文本样式

作者站长头像
站长
· 阅读数 254

文本text属性

写在前面:上午我在做计组实验就没有去写博客,现在赶紧补上,还有五门期末考试要复习,加油。

注意区分text和font,text是是对文本的整体结构排版的调整,而font的对文字本身的一个效果。

属性说明
text-indent首行缩进
text-align水平对齐
text-decoration文本修饰
text-transform大小写转换
line-height行高
letter-spacing字母间距
word-spacing词间距

加深理解:1、text-indent indent就是缩进的意思,之前我们缩进的时候使用的是 ;而且如果是文字的话,段落首行要使用6个 ;如果使用这个的话,我们就更加方便了。这里的间隔单位我们可以使用px(pxcel像素)来表示。如果是首段空两个文字就是font-size的两倍2、text-align align是对齐的意思。一般会使用center属性就够了3、text-decoration decoration是修饰的意思。有两个常用属性,none,line-through,前面一个是默认的,它最经常用于链接样式的修改,因为标签中的链接会默认有下滑线。而后者中划线常用于商品价格的变动。4、text-transfrom transform是转换的意思。可以将英文字符转变大小写。5、line-height 控制一行文字的段落,单位也可以用px,这个在CSS的进阶教程中有非常详细的介绍(我还没有学习到),这里只是一个非常简单的了解。最终示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS font Style</title>
        <style type="text/css">
            p{
                /* font-family: "宋体"; */
                font-weight: 400;
                /* font-size:14px; */
                text-indent:32px;/*要记得默认字体像素大小是16px;*/
            }
            #A{text-align: left;}
            #B{text-align: center;}
            #C{text-align: right;}
            #D{text-decoration: underline;}
            #E{text-decoration: line-through;}
            a{text-decoration: none;}
            #F{text-transform: lowercase;}
            #G{text-transform: uppercase;}
            #H{text-transform: capitalize;}
            #I{line-height: 15px;}
            #J{line-height: 20px;}
            #K{line-height: 25px;}
        </style>
    </head>
    <body>
        <h1>阿Q正传</h1>
        <div id="A"><strong>鲁迅</strong></div>
        <div id="B">鲁迅</div>
        <div id="C">鲁迅</div>
        <p id="D">《阿Q正传》</p>
        <p id="E">是鲁迅创作的中篇小说</p>
        <p>阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力气画圆圈。
            他生怕被人笑话,立志要画得圆,但这可恶的笔不但很沉重,并且不听话,刚刚一抖一抖的几乎要合缝,
            却又向外一耸,画成瓜子模样了。
            阿Q正羞愧自己画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。
        </p>
        <a href="https://segmentfault.com/u/y_luoe_hai_61a734cbf3c94/articles" >欢迎访问我的思否主页</a>
        <div id="F">Love the life you live, live the life you love.</div>
        <div id="G">Love the life you live, live the life you love.</div>
        <div id="H">Love the life you live, live the life you love.</div>
        <div id="I">阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力气画圆圈。
            他生怕被人笑话,立志要画得圆,但这可恶的笔不但很沉重,并且不听话,刚刚一抖一抖的几乎要合缝,
            却又向外一耸,画成瓜子模样了。
            阿Q正羞愧自己画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。
        </div>
        <hr>
        <div id="J">阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力气画圆圈。
            他生怕被人笑话,立志要画得圆,但这可恶的笔不但很沉重,并且不听话,刚刚一抖一抖的几乎要合缝,
            却又向外一耸,画成瓜子模样了。
            阿Q正羞愧自己画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。
        </div>
        <hr>
        <div id="K">阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力气画圆圈。
            他生怕被人笑话,立志要画得圆,但这可恶的笔不但很沉重,并且不听话,刚刚一抖一抖的几乎要合缝,
            却又向外一耸,画成瓜子模样了。
            阿Q正羞愧自己画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。
        </div>
        <br>
    </body>
</html>

效果图:CSS文本样式