CSS之美化网页（其二）

最新推荐文章于 2024-03-06 20:28:35 发布

没事找找Bug

最新推荐文章于 2024-03-06 20:28:35 发布

阅读量211

点赞数

文章标签： css 前端 html5 idea java

本文链接：https://blog.csdn.net/qq_42405743/article/details/121667981

版权

3、美化网页

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮才能吸引用户

3、凸显页面主题

4、提高用户的体验

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>

3.2、字体样式

<!--
  font-family：字体
  font-size：字体大小
  font-weight：字体粗细
  color：字体颜色
  -->
<style>
    body{
        font-family: 楷体;
        color: red;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bold;
    }
</style>

3.3、文本样式

1、颜色 color 、RGB 、RGBA

2、文本对齐方式 text-align＝center 排版，居中

3、首行缩进 text-indent:2em 段落首行缩进

4、行高 line-height:

5、（装饰）下划线 text-decoration

6、文本图片水平对齐 vertical-align: middle

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    颜色：
      RGB  0~F
      RGBA  A:0~1
      text-align     排版，居中
      text-indent    段落首行缩进
      height: 300px
      line-height: 300px   行高，和 块的高度一致，就可以上下居中
      text-decoration: underline;   下划线
      text-decoration: line-through;  中划线
      text-decoration: overline;     上划线
      -->
    <style>
        h1{
            color: red;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        .c1{
            text-decoration: underline;
        }
        .c2{
            text-decoration: line-through;
        }
        .c3{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }

        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>
<a href="">123121213</a>

<p class="c1">123123123</p>
<p class="c2">123123123</p>
<p class="c3">123123123</p>
<p>
    <img src="images/a.png" alt="">
    <span>adadadadadadahhahdo</span>
</p>

<h1>故事介绍</h1>
<p class="p1">
    这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！
    魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。
    在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。
    魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。
    很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。
    村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。
    然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。
    受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<P class="p3">
    If you were a teardrop In my eye，For fear of losing you，I would never cry。
    And if the golden sun，Should cease to shine its light，Just one smile from you，Would make my whole world bright
</P>
</body>

3.4、阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: red 10px 0px 2px;
}

3.5、超链接伪类

正常情况下，a，a:hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: black;
}
/*鼠标悬浮的状态*/
a:hover{
    color: orange;
    font-size: 50px;
}
/*鼠标按住未释放的状态*/
a:active{
    color: green;
}

没事找找Bug

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之美化网页（其二）

3、美化网页3.1、为什么要美化网页1、有效的传递页面信息2、美化网页，页面漂亮才能吸引用户3、凸显页面主题4、提高用户的体验span标签：重点要突出的字，使用span 套起来<head> <meta charset="UTF-8"> <title>Title</title> <style> #title1{ font-size: 50px;
复制链接

扫一扫