美化网页元素

最新推荐文章于 2024-02-15 15:35:25 发布

VIP文章 Massimo_ycw

最新推荐文章于 2024-02-15 15:35:25 发布

阅读量256

点赞数

分类专栏： CSS 文章标签： css html css3 前端 html5

本文链接：https://blog.csdn.net/Massimo__JAVA/article/details/124959609

版权

一、为什么要美化网页元素

有效的传递页面信息
美化页面、吸引用户
凸显页面的主题
提高用户的体验

二、span标签

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

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #Massimo{
     
            font-size: 50px;
        }
    </style>
</head>
<body>
 欢迎来到<span id="Massimo">Java</span>的世界
</body>
</html>

效果：
在这里插入图片描述

三、字体样式

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    font-family  :  字体
    font-size   : 字体大小
    font-weight  : 字体粗细
    color   : 字体颜色
-->
    <style>
        body{
     
            font-family: 楷体;
            color: #a232be;
        }

        h1{
     
            font-size: 50px;
        }

        .p1{
     
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>内容简介</h1>

<p class="p1">
    讲述了天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人，种种打击接踵而至。就在他即将绝望的时候，
    一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启，经过艰苦修炼最终成就辉煌的故事。
</p>

<p>
    这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！
</p>

</body>
</html>

效果：
在这里插入图片描述

四、文本样式

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

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
    颜色：
        单词
        RGB  0-F
        RGBA  A ： 0-1
    text-align  : 排版
    text-indent:2em   ;段落首行缩进
    height: 300px;
    line-height: 300px;
        行高和块的高度一致，就可以上下居中
-->
    <style>
        h1{
     
            color: rgba(0 , 255 , 255 , 0.9);
            text-align: center;
        }

        .p1{
     
            text-indent: 2em;
        }

        .p3{
     
            background: aquamarine;
            height: 300px;
            line-height: 300px;
        }

        /*下划线*/
        .l1{
     
            text-decoration: underline;
        }

        /*中划线*/
        .l2

最低0.47元/天解锁文章

Massimo_ycw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
美化网页元素

一、为什么要美化网页元素有效的传递页面信息美化页面、吸引用户凸显页面的主题提高用户的体验二、span标签重点要突出的字，使用span标签套起来案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #Massimo{
复制链接

扫一扫