文本属性

最新推荐文章于 2021-12-15 11:51:36 发布

原创最新推荐文章于 2021-12-15 11:51:36 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

web基础专栏收录该内容

22 篇文章

订阅专栏

本文通过一个具体的HTML页面实例，深入探讨了CSS在网页布局和文本样式上的应用技巧，包括首行缩进、文本居中、行高设置、图片垂直对齐等关键样式效果的实现。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid red;

            /*首行缩进*/
            text-indent: 32px;

            /*文本居中*/
            text-align: center;

            /*行高*/
            line-height: 50px;


        }

        .box span{
            /*上划线 overline*/
            /*text-decoration: overline;*/
            /*下划线 underline*/
            /*text-decoration: underline;*/
            /*中划线/删除线 */
            text-decoration: line-through;
        }

        .box02{
            width: 300px;
            height: 100px;
            border: 1px solid black;

            /*设置行高等于元素的高度，可以实现垂直居中*/
            line-height: 100px;
        }

        /*给图片设置属性vertical-align， 可以调整图片周围文字的位置*/
        .box03 img{
            /*vertical-align: top;*/
            /*vertical-align: middle;*/
            vertical-align: bottom;
        }


    
    </style>


</head>
<body>


<div class="box">
        大雨落幽燕，
        白浪滔天，
        <span>秦皇岛外打鱼船。</span>

        一片汪洋都不见，
        知向谁边？
        往事越千年，
        魏武挥鞭，
        东临碣石有遗篇。
        萧瑟秋风今又是，
        换了人间。
</div>


<div class="box02">
    东临碣石有遗篇
</div>


<div class="box03">
    换了人间 <img src="./images/timg.jpg" alt="">
    
</div>




</body>
</html>