文本样式-CSDN博客

本文链接：https://blog.csdn.net/qq_52040402/article/details/127289072
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        p{
            /* 文本缩进
                属性名:text-indent
                取值:数字+px / 数字+em(1em=当前标签的font-size的大小)
                首行缩进两个字大小,浏览器默认字体大小16px */
            /* text-indent: 32px; */
            font-size: 20px;
            text-indent: 2em;
            text-align: left;
            text-decoration: line-through;
            /* 行高:控制一行的上下间距
            属性名:line-height
            取值:数字+px/倍数(当前标签font-size的倍数)
            应用::
            1.让单行文本垂直居中可以设置line-height:文字父元素高度
            2.网页精准布局时,会设置line-height:1 可以取消上下间距
            行高与font连写的注意点:
            1.如果同时设置了行高和font连写,注意覆盖问题
            2.font: style weight size/line-height family */
            line-height: 50px;
            line-height: 2;
            font: italic 700 33px/2 宋体;
        }
        
        h1{
           /* 文本水平对齐方式
                属性名:text-align
                属性值:left--左对齐
                        center--居中对齐
                        right--右对齐
                如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置 */ 
            text-align: center;
            /* text-align:center可以让文本,span标签,a标签,input标签,img标签水平居中 */
        }
        body{
            text-align: center;
        }
        /* 文本修饰
            属性名:: text-decoration
            属性值: underline--下划线
                    line-through--删除线
                    overline上划线
                    none--无装饰线 
        开发时会使用text-decoration:none;清楚a标签默认的下划线*/
        div{
            text-decoration: underline;
        }
        h4{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
        /* 标签水平居中(div,p,h)
            margin: 0 auto; */
    h3{
        width: 400px;
        height: 400px;
        background-color: pink;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <h1>散文标题</h1>
    <p>想把我唱给你听，又不知道会唱出怎样的声音；想用我的声音打动你，又不知道你会有怎样的反应；想深情地望你一眼，又不知道视线一旦移开又是几年；想向你许下一生的承诺，又不知道现实会怎样将我打磨；想和你相守在一起为你遮风挡雨，又不知道你是不是想先只依靠自己；想和你说太多话语把一切都告诉你，又不知道从哪里说起；想让我住进你的心底，又不知道你介不介意；想轻轻地在你耳边吻一吻你，又不知道自己会不会紧张到无法呼吸！我愿意尝试靠近心与心之间的距离， 愿意为此流下纯净的泪滴，然后认真地把每一滴都收集，封存在我的记忆里，我愿意小心翼翼，守护这里面的甜蜜！可以轻松拥有很多很多很好很好的体验，可是很难很难获得一种难以言说的感觉，正因为很难很难，所以会很向往很向往，如果真的很幸运很幸运，一不小心拥有这种感觉，就会很珍惜很珍惜，然后就会很努力很努力，最后就会很幸福很幸福！</p>
    <br>
    <img src="images/4.jpg" alt="" width="600">
    <p>555555</p>
    <div>8888888</div>
    <h4>00000000</h4>
    <a href="#">超链接</a>
    <h3></h3>
</body>
</html>