CSS3-文本样式、字体样式

最新推荐文章于 2022-12-20 21:53:11 发布

Rella_w

最新推荐文章于 2022-12-20 21:53:11 发布

阅读量386

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/Wjiahui/article/details/122815659

版权

3、美化网页元素

3、1为什么要美化网页?

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户
凸显页面的主题
提高用户的体验

span标签：重点要突出的字，使用span套起来

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

    <style>
        /*id选择器：#   */
        #title1{
            font-size: 50px;
        }

    </style>


</head>
<body>
欢迎学习<span id="title1">java</span>

</body>
</html>

请添加图片描述
3.2 字体样式
font属性

    <!--
    font-family:字体
    font-size  :字体大小
    font-weight:字体粗细
    color  :字体颜色
    -->
    <style>
        body{
            font-family: "Hiragino Maru Gothic ProN",楷体;
            font-size:20px;
            color:#267fc4;
        }
        h1{
            font-size: 30px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>

3.3 文本样式

颜色
文本对齐的方式
首行缩进
行高
装饰

    <!--
    颜色：
        单词
        RGB 0~F
        RGBA  A：0~1  透明度
        text-align:center  居中
        text-indent: 2em;    首行缩进：em为两个字
        height: 300px;   块高
        line-height: 100px;   行高，行和块的高度一致时就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.8);
            text-align: center;
        }
        .p1{
            text-indent: 2em;  
        }
        .p3{
            background: antiquewhite;
            height: 300px;
            line-height: 100px;
        }
        .l1{
            text-decoration: line-through;  /*中划线*/
        }
        .l2{
            text-decoration: underline;  /*下划线*/
        }
        .l3{
            text-decoration: overline;  /*上划线*/
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
        /*文本图片水平对齐*/
        img,span{
            vertical-align: middle;
        }
    </style>