美化网页元素

为什么要美化网页

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #title1{
    font-size: 80px;
    }
  </style>
</head>
<body>
欢迎学习<span id="title1">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:"Agency FB",楷体;
            color: darkorange;
        }
        h1{
            font-size: 50px;
        }
        p{
            font-size: 30px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>《狂飙》简介</h1>

<p class="p1">《狂飙》电视剧是由爱奇艺、留白影视出品，由中央政法宣传教育局，中央政委政法综治信息中心指导，徐纪周执导，张译、张颂文、李一桐、张志坚领衔主演，韩童生特邀主演，吴健、郝平友情出演，高叶、贾冰、李健主演。</p>
<p>该剧是一部黑恶势力崛起的编年史，细数黑恶毒瘤非法生长的升级路，一部扫黑除恶坚决斗争的回忆录，横跨20年的群像叙事全景式展现时代变迁下的黑白较量与复杂人性。</p>
<p>You never know your luck.</p>
</body>
</html>

文本样式

颜色 color rgb rgba
文本对齐的方式 text-align=center
首行缩进
行高
下划线
文本图片水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
  颜色：
      单词
      RGB  0~F
      RGBA A（透明度）的值0-1
      text-align：排版，center剧中left靠左
      text-indent段落首行缩进 em为单位1em是一个字
      height: 300px;
      line-height: 300px;
      行高，和快的高度一直就可以上下剧中  单行文字
      -->
  <style>
    h1{
      /*color: #FF0000;*/
      color: rgba(255,0,0,0.5);
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p3{
        background: rgba(255, 213, 0, 0.93);
        height: 300px;
        line-height: 300px;
        text-align: center;
    }
    /*下划线*/
    .l1{
        text-decoration: underline;
    }
    /*中划线*/
    .l2{
        text-decoration: line-through;
    }
    /*上划线*/
    .l3{
        text-decoration: overline;
    }
    /*水平对齐~参照物，a，b*/
    .p4 img,span{
        vertical-align: middle;
    }
    /*a标签（超链接）取消下划线*/
    a{
        text-decoration: none;
    }
  </style>
</head>
<body>
<a href="">123456</a>
<p class="p4">
    <img src="images/牛顿.png" alt="" id="img1">
    <span id="span1">sasdfasfssdf</span>
</p>
<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>
<h1>狂飙简介</h1>
<p class="p1">《狂飙》电视剧是由爱奇艺、留白影视出品，由中央政法宣传教育局，中央政委政法综治信息中心指导，徐纪周执导，张译、张颂文、李一桐、张志坚领衔主演，韩童生特邀主演，吴健、郝平友情出演，高叶、贾冰、李健主演。</p>
<p>该剧是一部黑恶势力崛起的编年史，细数黑恶毒瘤非法生长的升级路，一部扫黑除恶坚决斗争的回忆录，横跨20年的群像叙事全景式展现时代变迁下的黑白较量与复杂人性。</p>
<p class="p3">You never know your luck.</p>
</body>
</html>