Web前端学习CSS（二）-CSDN博客

本文链接：https://blog.csdn.net/qq_29171215/article/details/121776403

个人学习期间常用的一些基本的CSS字体文本样式

Css 的继承性是什么?

在面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。
那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

CSS里的字体样式

color 设置字体颜色

font-family        字体样式
font-size        字体大小
font-weight        字体粗细
font-style        字体风格

字体风格里有倾斜，加粗

<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        .font-31{
            color:brown;/* 设置字体颜色为brown */
            font-family: "宋体";/*设置p标签里的字体样式为宋体*/
            font-size:12px; /* p标签里的字体大小为12像素 */
            font-weight: 400;/*设置p标签里的字体粗细*/
            font-style: italic;/* 设置p标签里的字体为倾斜*/
          }
    </style>
    </style>
</head>
<body>
    <p class="font-31">这是一个p标签，class名为font-31</p>

</body>
</html>

效果图：

CSS里的文本样式

text-align:设置文本水平对齐

text-decoration: 设置文本的上划线、下划线、删除线

line-height: 设置段落行高

text-indent:设置段落首行缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        .font-31{
            text-align: center;/*设置文本居中*/
            text-decoration: underline;/*给文本添加删除线*/
            line-height: 20px;/* 行高*/
            text-indent: 1em;/* 设置段落首行缩进*/
          }
        .font-32{
            text-align: center;
        }
    </style>
</head>
<body>
    <p class="font-32">这是一个p标签，class名为font-32</p>
    <p class="font-31">这是一个p标签，class名为font-31</p>


</body>
</html>

效果图

这里text-decoration可能是用的相对较多的，因为在html中，超链接是必不可少的，可是html中默认超链接a标签自带下划线，为了美化可以用text-decoration来去除下划线。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>

</body>
</html>

效果图：