您的位置：首页 > 职场人生

赢在职场－WEB全栈开发－1-9 文本样式概览

2016-06-04 21:54 423 查看
1-9 文本样式概览

font-size

    文字大小（一般均为偶数）

font-family

    字体（谷歌浏览器默认为宋体）

font-style

    文字倾斜

font-weight

    字体粗细

text-align

    文本对齐方式

text-decoration

    文字修饰//下划线、中划线等

text-indent

    首行缩进（em缩进字符）

color

    文字颜色（英文、RGB、十六位进制色彩值）

line-height

    行高

letter-spacing

    字母间距

word-spacing

    单词间距（以空格为解析单位）

<html>

    <head>

        <meta charset="utf-8">

        <title>

            Document

        </title>

        

        <style>

            .text

            {

                width: 400px;

                height: 200px;

                border: 1px solid red;

                

                font-size: 12px;

                font-family: "微软雅黑","SimSun”;      /*第二个为备选字体、可以设置多个备选字体，以“，”号分隔*/

                font-weight: bolder;                            /*normal、bolder，设置字体粗细*/

                font-style: italic;                                  /*italic |ɪˈtælɪk| adj斜体的*/

                text-align: left;                                    /*align |əˈlaɪn| verb使…成一直线。*/

                text-indent: 80px;                               /*首行缩进，仅限于首行；indent |ɪnˈdent|使…成锯齿状*/

                text-decoration: line-through;            /*中划线、none、overline、underline、decoration
|ˌdekəˈreɪʃn| noun 装饰品、装饰*/

                color: orangered;                               /*color: rgb(48,134,210); color: #CB9EAD;*/

                line-height: 40px;                               /*行高至少大于字体大小，建议使用相同大小。*/

                letter-spacing: 10;                             /*字母间距*/

                word-spacing: 20;                             /*单词间距、使用空格作为区分标志*/

            }

        </style>

    </head>

    

    <body>

        <div class = "text">

            路漫漫其修远兮，吾将上下而求索。Do one thing at a time, and do well.Neverforgettosay“thanks”. <!div中直接换行压根没用>

        </div>

    </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航