CSS9：CSS的作用及字体样式

最新推荐文章于 2022-08-07 22:14:17 发布

工一木子

最新推荐文章于 2022-08-07 22:14:17 发布

阅读量309

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/Prince140678/article/details/119855055

版权

CSS学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

9、CSS的作用及字体样式

3、美化网页元素

3.1、为什么要美化网页

1.有效的传递页面信息

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

3.凸显页面的主题

4.提升用户的体验

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

欢迎学习<span id="title">CSS</span>

3.2、字体样式

body {
    font-family: "楷体","Arial Black";
    color: red;
}
h1 {
    font-size: 60px;
}
.p1 {
    font-weight:bolder;
}

代码show

1.span之index.html

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

2.字体样式之index.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: "楷体","Arial Black";
                color: red;
            }
            h1 {
                font-size: 60px;
            }
            .p1 {
                font-weight:bolder;
            }
        </style>
    </head>
    <body>
        <h1>故事介绍</h1>
        <p class="p1">
            《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。
            2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1]  。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2]  。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日” [3]  。
        </p>
        <p>
            I love three things in this world.Sun, moon and you.<br>
            Sun for morning, moon for night,and you forever.
        </p>
    </body>
</html>

3.字体样式之index2.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            p {
                font: oblique bolder 16px "楷体";
            }
        </style>
    </head>
    <body>

        <p>
            《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。
            2012年5月11日，《航海王》获得第41回日本漫画家协会赏 [1]  。本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” [2]  。2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日” [3]  。
        </p>
    </body>
</html>

彩蛋

1.查看百度百科关于海贼王词条设计的字体样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qb589ok2-1629624100982)(C:\Users\Administrator\Desktop\学习笔记\前端学习\CSS\9、CSS的作用及字体样式.assets\image-20210822172125277.png)]$

工一木子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS9：CSS的作用及字体样式

9、CSS的作用及字体样式3、美化网页元素3.1、为什么要美化网页1.有效的传递页面信息2.美化网页，页面漂亮，才能吸引用户3.凸显页面的主题4.提升用户的体验span标签：重点要突出的字，使用span套起来欢迎学习<span id="title">CSS</span>3.2、字体样式body { font-family: "楷体","Arial Black"; color: red;}h1 { font-size: 60px;
复制链接

扫一扫