Day8-CSS字体属性和文本属性

ian燃.

已于 2023-01-18 22:08:39 修改

阅读量89

点赞数 1

分类专栏：工坊打卡前端学习文章标签： css html 前端 Powered by 金山文档

于 2023-01-18 22:06:35 首次发布

本文链接：https://blog.csdn.net/m0_73952430/article/details/128727362

版权

工坊打卡前端学习专栏收录该内容

28 篇文章 0 订阅

订阅专栏

CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体等）。

- 字体属性

CSS使用font-family属性定义文本的字体系列。

p { 
    front-family:'微软雅黑';
}
div {
    font-family:Arial,"Microsoft Yahei","微软雅黑";
}

各种字体之间必须用英文逗号隔开

一般情况下，如果有空格隔开的多个单词组成的字体，加引号“‘’”

尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正常显示

最常见的几个字体：body{font-family：'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';}

2.字体大小

CSS使用font-size属性定义字体大小。

p {
    font-size：20px；
    }

px（像素）大小是我们网页的最常用单位

谷歌浏览器默认的文字大小为16px

不同浏览器默认显示字号大小不一致，我们尽量给出一个明确的值，不要默认大小

可以给body指定整个页面文字的大小，标题标签比较特殊，需要单独指定文字大小

3.字体粗细

CSS使用font-weight属性设置文本字体的属性

.bold {
    font-weight:bold(700)/normal(400)...;
}

学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗

实际开发中，通常更加喜欢用数字表示粗细

4.文字样式

CSS使用font-style属性设置文本的风格

div {
    font-style:italic;
}

注意：

平时很少会给文字加斜体，反而要给斜体标签（em、i）改为不倾斜字体。

5.字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码。

body {
    font:font-style font-weight font-size/line-height font-family;
}

注意：

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范练习</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        /* .lan {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        /* #pink {
            color: pink;
        } */
        div {
        font: italic 700 18px 'Microsoft yahei';
        }
    </style>
</head>
<body>
    <div>湖北彭于晏</div>
</body>
</html>

6.字体属性总结

CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色

color属性用于定义文本的颜色

div {
    color: red;
}

颜色很多，不用都记下来，开发中常用的是十六进制。

2.对齐文本

text-align（对齐）属性用于设置元素内文本内容的水平对齐方式。

div {
    text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范练习</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        /* .lan {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        /* #pink {
            color: pink;
        } */
        /* div {
        font: italic 700 18px 'Microsoft yahei';
        } */
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1 class="center">你是</h1>
    <div class="center">湖北彭于晏</div>
</body>
</html>

3.装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、上划线、删除线等。

属性值	描述
noon	默认，没有装饰线
underline	下划线，链接a自带下划线
overline	上划线
line-through	删除线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法规范练习</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改样式{改什么样式} */
        /* .lan {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        } */
        /* #pink {
            color: pink;
        } */
        /* div {
        font: italic 700 18px 'Microsoft yahei';
        } */
        /* .center {
            text-align: center;
        } */
        a {
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <!-- <h1 class="center">你是</h1>
    <div class="center">湖北彭于晏</div> -->
        <a href="#">湖北彭于晏</a>
</body>
</html>