CSS学习07之字体样式

最新推荐文章于 2022-11-08 08:38:21 发布

小黑神zxs

最新推荐文章于 2022-11-08 08:38:21 发布

阅读量768

点赞数 1

分类专栏： CSS3详解文章标签： css3 html 前端 css文字样式 idea

本文链接：https://blog.csdn.net/zxs1002/article/details/122888225

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

属性选择器

为带有属性的 HTML 元素设置样。
顾名思义可以设置带有特定属性或属性值的 HTML 元素的样式。

使用方式

属性选择器：元素类型[属性名=属性值（正则）]

字体样式和span标签（追加）

文字设置

设置文字的风格，大小，粗细，字体

span标签

把一些比较重要的文字我们用span便签框起来

span标签的简单应用

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        #s1{
            font-size: 3em;
            /*font-size: 60px;1em=20px*/
        }
    </style>
</head>
<body>
欢迎学习<span id="s1">Java</span>
</body>
</html>

效果

在这里插入图片描述

文字样式的简单应用

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体、文本样式</title>
    <style>
        
        body{
            font-family: 华文楷体;
        }
        /*首行缩进*/
        p{
            text-indent: 2em;
        }
        #p1{
            font-size: 30px;
            font-weight: bold;
            color: red;
        }
        #p2{
            font-size: 30px;
            font-weight: bold;
            color: deeppink;
        }
        
        #p3{
            font: oblique 30px bolder 隶书;
            color: rgba(0,255,255,0.3);
            background: black;
            height: 100px;
            line-height: 100px;
        }
        /*underline  下划线
        line-through  中划线
        overline  上划线
        */
        .p4{
           text-decoration: underline;
        }
        .p5{
            text-decoration: line-through;
        }
        .p6{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>

<p class="p4">动动小手点点赞</p>
<p class="p5">动动小手点点赞</p>
<p class="p6">动动小手点点赞</p>
<a href="">超链接去下划线</a>
<!--文本居中-->
<h1 style="text-align: center">故事介绍</h1>

<p id="p1">2022年，电子机械制造商“ARGUS”开发“NERvGear”装戴在头上的机器，
    能够控制人类的脑神经连接虚拟世界，于是人类终于实现了完全的虚拟实境。</p>

<p id="p2">身为VRMMORPG（虚拟大规模线上角色扮演游戏）《刀剑神域〈SAO〉》中的其中一名玩家：
    桐人和其他一万个玩家才刚登入享受此游戏之时，游戏中的管理员对大家宣布了一个令人惊恐的消息!</p>

<p id="p3">
    那就是，现在唯一要登出此游戏的方法只有将这个游戏破关，
    并且在这个游戏中GAME OVER的话，也就代表了现实世界中的“死亡”。</p>


</body>
</html>

效果

在这里插入图片描述

小结

line-height 行高，和块的高度一致可以上下居中；

font-family 字体
font-size 字体大小
font-weight 字体粗细
font 的样式可以简写为：font ：风格（可以忽略，了解），粗细，大小，字体

color 字体颜色：可以单词描述，可以rgb（）和rgba（）函数，a是透明度

首行缩进：

/*首行缩进*/
p{
    text-indent: 2em;
}

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习07之字体样式

回顾属性选择器为带有属性的 HTML 元素设置样。顾名思义可以设置带有特定属性或属性值的 HTML 元素的样式。使用方式属性选择器：元素类型[属性名=属性值（正则）]字体样式和span标签（追加）文字设置设置文字的风格，大小，粗细，字体span标签把一些比较重要的文字我们用span便签框起来span标签的简单应用代码<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫