文本 - 简书

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /*文字默认高度为16px*/
        .div1{
            height: 200px;
            width: 400px;
            border: 1px solid black;
            border-width: 10px; /*覆盖了上面设置的边框宽度*/
            border-style: dotted;
            border-color: red; /*将上面的黑色覆盖了*/
            border-left: 5px solid green; /*单独设置左边的*/

            text-align: right; /*文本对齐方式，默认为左对齐*/
            line-height: 16px; /*单行文本高度*/
        }
        .div2{
            width: 500px;
            height: 100px;
            border: 2px solid black;
            /*设置单行文本高度为容器的高度，可以使文字垂直居中*/
            line-height: 100px;
            text-align: center; /*文本对齐方式问水平居中*/
        }
        .div3{
            width: 500px;
            height: 200px;
            border: 2px solid black;

            /*不要用 nbsp; */
            /*缩减两个文本*/
            /*正确方式为：*/
            text-indent: 2em;
            /* em 为相对单位，像素也是相对单位*/

            /*行高为字体高度的2倍*/
            line-height: 2em;
        }
        .div4{
            /*文本-装饰：横线穿过*/
            text-decoration:line-through;
        }
        .div5{/*模仿链接样式*/
            /*文本-装饰：下划线*/
            text-decoration: underline;
            /*上划线*/
            /*text-decoration: overline;*/
            /*光标移到该文本区域时*/
            cursor: help;
        }

        a{
            text-decoration: none; /*不显示下划线*/
        }
        /*伪类选择器*/
        a:hover{ /*光标移到链接区域时*/
            background-color: red;
            font-weight: bold;
            border-radius: 10px;
            text-decoration: underline; /*显示下划线*/
        }
    </style>
    <meta charset="UTF-8">
    <title>文本</title>
</head>
<body>
    <div class="div1">提交</div>
    <div class="div2">登录</div>
    <div class="div3">文本缩减问题文本缩减问题文本缩减问题文本缩减问题文本缩减问题</div>
    <del>del标签被很多浏览器废弃了</del> 
    <span class="div4">价格：100元</span>
    <span class="div5">下划线</span>
    <a href="baike.baidu.com">百度百科</a>
</body>
</html>
文本

推荐阅读更多精彩内容
