码迷,mamicode.com
首页 > 其他好文 > 详细

前端基础---文本样式

时间:2021-06-30 18:46:11      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:text   cti   ade   port   自动   The   load   cin   大小写   

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本样式</title>
        <style type="text/css">
            /* 
                text-transform可以来设置文本的大小写
                    可选值:
                        none 默认值 该怎么显示就怎么显示,不作任何处理
                        capitalize 单词的首字母大写,通过空格来识别单词
                        uppercase 所有的字母都大写
                        lowercase 所有的字母都小写
             */
            .p1{
                text-transform: capitalize;
            }
            
            /* 
                text-decoration可以用来设置文本的修饰
                    可选值:
                        none 默认值 不添加任何修饰,正常显示
                        underline 为文本添加下划线
                        overline 为文本添加上划线
                        line-through 为文本添加删除线
             */
            .p2{
                font: 20px/40px "微软雅黑";
                text-decoration: underline;
            }
            
            a{
                /* 
                    超链接会默认添加下划线,也就是超链接的text-decoration的默认值是underline
                        如果需要去除超链接的下划线,则需要将该样式设置为none
                 */
                text-decoration: none;
            }
            
            .p1{
                /*
                 letter-spacing可以指定字符间距
                 */
                letter-spacing: 3px;
                
                /* 
                 word-spacing 可以设置单词之间的间距
                    实际上就是设置词与词之间空格的大小
                 */
                word-spacing: 10px;
            }
            
            .p2{
                /* 
                    text-align用于设置文本的对齐方式
                    可选值:
                        left 默认值,文本靠左对齐
                        right 文本靠右对齐
                        center 文本居中对齐
                        justify 两端对齐
                                通过调整文本之间的空格大小,来达到一个两端对齐的目的
                 */
                text-align: center;
            }
            
            .p1{
                /* 
                    text-indent用来设置首行缩进
                        当给他指定一个正值是,会自动向右侧缩进指定的像素
                        如果给他一个负值,则会自动向左缩进指定像素
                            通过这种方式,可以将一些不想显示的文字隐藏起来
                 */
                text-indent: 2em;
            }
        </style>
    </head>
    <body>
        <a href="#">我是超链接</a>
        
        <p class="p1">
            The peaceful realm of Azeroth stands on 
            the brink of war as its civilization faces 
            a fearsome race of invaders: orc warriors 
            fleeing their dying home to colonize another.
             As a portal opens to connect the two worlds,
              one army faces destruction and the other 
              faces extinction. From opposing sides, two
               heroes are set on a collision course that 
               will decide the fate of their family, 
               their people, and their home.
        </p>
        
        <p class="p2">
            南无、喝啰怛那、哆啰夜耶,南无、阿唎耶
        </p>
    </body>
</html>

技术图片

 

前端基础---文本样式

标签:text   cti   ade   port   自动   The   load   cin   大小写   

原文地址:https://www.cnblogs.com/leiyanting/p/14954968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!