打卡十八天（发现自己更适合前端，并且相对于后端的学习来说，我会觉得更加有趣，对我来说后端好像更无聊，我还承认一点是我觉得后端很难，我没有那个脑子，前端对我来说艺术性偏多，做的会更舒服）

最新推荐文章于 2024-08-30 14:40:01 发布

wdchun__

最新推荐文章于 2024-08-30 14:40:01 发布

阅读量526

点赞数 8

文章标签：前端学习 css3 开发语言

本文链接：https://blog.csdn.net/wdchun__/article/details/140809463

版权

CSS

美化网页元素

1.有效的传递页面信息

2.美化网页

3.凸显页面的主题

4.提高用户的体验

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

  <style>
    #title1{
      font-size: 50px;
    }
    
  </style>
</head>
<body>

欢迎学习<span id="title1">JAVA</span>
</body>
</html>

3.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--font-family  字体
font-size   字体大小
font-weight   字体粗细



-->
    <style>
        body{
            font-family: 楷体;
            color: brown;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">元泱境界包含平行的天地两界。魁拔前72年两界首次接触。天界更为文明，时间流速慢于地界。其居民自称天神，行事遵从理性思维。</p>

<p>天神分为镜、朴、泱、焰、尘五系（对应五行，每系有一位主神）和至高神“元”。“元点”是天界的能量核心。</p>

<p>曲境是平行空间间的通道。纹耀则是曲境的碎片，多种多样，既代表持有者社会地位，又可在其使用脉术时增幅力量。</p>

<p>I have searched a thousand years,</p>
<p>And I have cried a thousand tears.</p>
<p> I found everything I need,</p>
<p>You are everything to me.</p>
</body>
</html>

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

<!--    字体风格  -->
<style>

    p{
        font: oblique bolder 12px "楷体";
    }
</style>

</head>
<body>
<p>曲境是平行空间间的通道。纹耀则是曲境的碎片，多种多样，既代表持有者社会地位，又可在其使用脉术时增幅力量。</p>


</body>
</html>

3.3 文本样式

1.颜色 color rgb rgba

2.文本对齐的方式 text-align = center

3.首行缩进 text-decoration

4.行高 line-width /height (px 像素点)

5.装饰 text-decoration

<!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;/*em=字符数*/   首行缩进

                 height: 100px;   颜色高度
            line-height: 100px;   行高    高度一致时，就可以上下居中
            text-decoration: underline;   下划线
            text-decoration: line-through;  中划线
            text-decoration: overline;   上划线
            水平对齐~~参照物    a,b
-->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;/*em=字符数*/
        }
        .p3{
            background: yellow;
            height: 100px;
            line-height: 100px;
        }
        .l1{
            text-decoration: underline;
        }
        l2{
            text-decoration: line-through;
        }
        l3{
            text-decoration: overline;
        }

        img{
            width: 500px;
            height: 400px;
        }
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    <img src="images/tu1.png" alt="">
    <span>123123123212</span>
</p>
<p class="l1">123122313</p>
<p class="l2">123122313</p>
<p class="l3">123122313</p>
<h1>故事介绍</h1>
<p class="p1">元泱境界包含平行的天地两界。魁拔前72年两界首次接触。天界更为文明，时间流速慢于地界。其居民自称天神，行事遵从理性思维。</p>

<p>天神分为镜、朴、泱、焰、尘五系（对应五行，每系有一位主神）和至高神“元”。“元点”是天界的能量核心。</p>

<p>曲境是平行空间间的通道。纹耀则是曲境的碎片，多种多样，既代表持有者社会地位，又可在其使用脉术时增幅力量。</p>

<p class="p3">I have searched a thousand years,And I have cried a thousand tears.</p>
<p> I found everything I need,You are everything to me.</p>
</body>
</html>

3.4 阴影 and 3.5 超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--   text-decoration: none;
            color: black;    默认的颜色-->
    <!--    a:hover{
            color: #bbb72a;
    font-size: 100px;
        }   鼠标悬浮的颜色、大小-->
    <style>
        a{
            text-decoration: none;
            color: black;
        }

        a:hover{
            color: #bbb72a;
    font-size: 100px;
        }
           a:active{/*鼠标未释放状态*/
               color:green;
           }
           a:visited{/*已访问链接*/
               color: red;
           }
           /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
           #price{
               text-shadow: #49aabb 10px 0px 5px;
           }
    </style>
</head>
<body>
<a href="#">
    <img src="images/tu1.png" alt="">
</a>
<p>
    <a href="#">我的世界</a>
</p>
<p>
    <a href="#">作者：村村</a>
</p>
<p id="price">
    $22
</p>
</body>
</html>

wdchun__

关注

8
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
打卡十八天（发现自己更适合前端，并且相对于后端的学习来说，我会觉得更加有趣，对我来说后端好像更无聊，我还承认一点是我觉得后端很难，我没有那个脑子，前端对我来说艺术性偏多，做的会更舒服）

<style>#title1{</style>欢迎学习<span id="title1">JAVA</span>
复制链接

扫一扫