美文网首页
CSS-文本与字体属性

CSS-文本与字体属性

作者: 小驴拉磨 | 来源:发表于2020-08-05 15:37 被阅读0次

    属性列表:


    image.png

    效果图:


    image.png
    代码:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>文本字体属性</title>
        <style type="text/css">
            .mofa{
                color: rgb(255,0,255);
                text-decoration: overline;/*上划线*/
            }
            h2{
                text-align: center;/*文本居中显示*/
                text-decoration: underline;/*下划线*/
            }
            .lyl{
                color: rgb(255,0,255);
                text-decoration: line-through;/*删除线*/
            }
            
            u{
                text-decoration: none;/*去掉文本修饰线*/
            }
    
            .cap{
                text-transform: capitalize;/*首字母大写*/
            }
    
            .upper{
                text-transform: uppercase;/*全部转换成大写*/
            }
    
            .lower{
                text-transform: lowercase;/*全部转换成小写*/
            }
    
            p{
                text-indent: 2em;/*首行缩进px是距离,一个em就表示一个汉字的位置*/
            }
    
            .spacing{
                letter-spacing: 4px;/*字符间距*/
            }
    
            .wordS{
                word-spacing: : 10px;/*单词间距*/
            }
    
            .lh{
                /*行高的主要作用是用来设置文本的垂直方向居中对齐*/
                height: 40px;
                border: 1px solid #f00;
    
                line-height: 40px;
            }
    
        </style>
    </head>
    <body>
        <h2>全职法师</h2>
        <p>紫色粗壮的雷电形成一个晴空中忽然间拍落下来的<span class="mofa">魔鬼爪印</span>,触目惊心。
        那边冰公子<span class="lyl">柳一林</span>都来不及做一点心里准备,他哪里会想到对方的中阶魔法释放度会比他快了整整一倍!
        他的星图才描画一半啊!
        柳一林见势不妙,<u>急急忙忙使用了自己的盾魔具</u>,那是一块看上去宛如鱼翅展开的盾牌,上面分布着做工相当精致的鳞片,每一片鳞都反射着特殊的光彩。</p>
    
        <div class="cap">We discovered that your app contains hidden features.</div>
        <div class="upper">We discovered that your app contains hidden features.</div>
        <div class="lower">WE DISCOVERED THAT YOUR APP CONTAINS HIDDEN FEATURES.</div>
    
        <div class="spacing">WE DISCOVERED THAT YOUR APP CONTAINS HIDDEN FEATURES.</div>
    
        <div class="wordS">We discovered that your app contains hidden features.</div>
    
    
        <div class="lh">全职法师</div>
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:CSS-文本与字体属性

          本文链接:https://www.haomeiwen.com/subject/byvnrktx.html