CSS-02样式-字体属性和文本属性

今天你好好生活了吗

已于 2023-01-29 12:55:28 修改

阅读量74

点赞数

文章标签： css 前端 html

于 2023-01-18 22:45:52 首次发布

本文链接：https://blog.csdn.net/qq_74031198/article/details/128729878

版权

字体属性【Fonts】

作用：定义字体系列，字体大小，粗细等

1.Font-family【字体系列】

注意：

各种字体之间必须用英文状态的逗号隔开
一般情况下如果有空格隔开的多个单词时，用引号括起这个字体
尽量使用系统默认的字体【因为字体需要安装才可以显示，如果用户那边没有安装该字体，则不会显示该字体】
常见字体：微软雅黑【Microsoft Yahei】
设置多种字体的好处，当一种字体无法显示时可以显示另一种
一般将该属性放在<body>标签中

2.font-size【字号大小】

注意：

像素【px】是常用的单位
不同浏览器会给不同的默认大小，我们自己书写代码时应设定一个明确大小
常用像素大小：14px，16px

3.font-weight【字体粗细】

注意：

可以用给定的属性值单词，如font-weight： bold；
也可以直接用数字font-weight：700；

4.font-style【字体样式】

属性值	作用
normal	显示浏览器标准的字体样式
italic	显示斜体

一般将斜体改为普通的标准字体

5.font的复合属性【同时改变多方面】

示例：

<style>
    h1{font:italic 700 16px 'Microsoft Yahei';}
</style>
<body >
    <h1>走近苏州</h1>
 
</body>

一定要严格按照font在前，后面的属性依次跟上的顺序，且各个属性之间一定要用空格隔开，其中加黑的两个一定不可以省略，其它可以省略但是要按照顺序
font:font-style font-weight font-size/line-hight font-family;

文本属性【Text】

作用：定义文本的外观

1.color【文本颜色】

注意：

有预定义的颜色值、十六进制、RGB代码三种表示形式

2.text-align【文本对齐】

注意：

只能设置水平对齐方式
本质是让盒子里的文字对齐

3.text-decoration【文本装饰】

属性值	描述
none	默认，无装饰
underline	下划线
overline	上划线
line-through	删除线

4.text-indent【文本缩进】

作用:设置段落文本第一行的缩进值
注意：

有正负之分，正值表示向右缩进，负值表示向左缩进
em是个相对单位，相对于当前元素【font-size】一个文字的大小，若未设置，则按照父元素一个文字的大小

5.line-height【行间距】

作用：设置行间距离，控制文字行与行之间的距离
示例:

p {
   line-height: 26px;}

注意;

行间距包括上间距、下间距以及文字高度本身
上间距和下间距相等