CSS-字体文本样式，超链接伪类

美化网页元素

1.为什么要美化网页

  1. 传递页面信息
  2. 凸显主题
  3. 提高用户体验

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

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

2.字体与文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
       font-family: 字体
       font-size: 字体大小
       font-width: 字体粗细
       color：字体颜色
       text-align: 排版，居中
       text-indent: 2em： 段落首行缩进
       height: 100px;
       line-height: 100px;
       行高和块的高度一致，就可以实现文字上下居中

       -->
    <style>
        body{
            font-family: "Arial Black",楷体;
            color: #45afff;
        }
        h1{
            font-size: 50px;
            color: red;
            text-align: center;
        }
        .p1{
            font-width: bold;
            text-indent: 2em;
        }
        .p3{
            background: aliceblue;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>

<h1>海贼王介绍</h1>
<p class="p1">《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。</p>

<p>
    2012年5月11日，《航海王》获得第41回日本漫画家协会赏。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画”。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”。
</p>
<p class="p3">
    I just wish someday and somehow，We can be back together， Together we'll stay，Always and forever。
</p>

</body>
</html>

3.超链接伪类

正常情况下 a, a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;  /*去掉下划线*/
            color: aqua;
        }
        /*鼠标的悬浮状态*/
        a:hover{
            color: orange;
        }
    </style>
</head>
<body>

<a href="#">
    <img src="images/book.jpg" alt="">
</a>
<p>
    <a href="#">海贼王105话</a>
</p>
<p>
    <a href="">作者：尾田荣一郎</a>
</p>
<p>
    $20
</p>

</body>
</html>

posted @ 2020-08-29 17:32  LaughTale  阅读(254)  评论(0)    收藏  举报