CSS字体常用属性包含什么，功能及使用是什么呢？
发布时间：2023-09-08 11:39:55 所属栏目：语言 来源：
导读：这篇文章我们来了解“CSS字体常用属性包括什么，功能及使用是什么呢？”的内容，小编通过实际的案例向大家展示了操作过程，简单易懂，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习
|
这篇文章我们来了解“CSS字体常用属性包括什么，功能及使用是什么呢？”的内容，小编通过实际的案例向大家展示了操作过程，简单易懂，有需要的朋友可以参考了解看看，那么接下来就跟随小编的思路来往下学习吧，希望对大家学习或工作能有帮助。 一、常用的字体属性都有什么？ 1.属性分类 字体样式的分类根据名字就可以判断出来 ①font-size: 字体大小,这个属性后面跟的是标签中包含的字体大小,衡量单位是像素px 代码示例： <!-- 字体的属性一般有样式,大小,倾斜度,粗细,行高(行与行之间的间隔) --> <!DOCTYPE html> <html lang="en"> <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>Document</title> <!-- 字体的大小 可以拿body作为选择器,改变body内的文字大小--> <style> /* body { font-size: 70px; } */ p { font-size: 70px; } </style> </head> <body> <p>Hello World</p> </body> </html> 效果展示： ②font-family: 这个标签改变的是使用哪个版本的字体:幼圆、黑体.... 代码示例： <!DOCTYPE html> <html lang="en"> <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>Document</title> <style> /* 设置字体的样式,可以是网上有的各种类型的样式,但一般选择微软雅黑 */ body { /* font-family: 'Microsoft yahei'; */ font-family: '黑体' ; } </style> </head> <body> <div>Hello Walord</div> </body> </html> 效果展示： ③font-weight: 700; 这个属性改变的是字体的粗细程度数值越大代表越粗,一般来说有以下几种值 代码示例： <!DOCTYPE html> <html lang="en"> <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>Document</title> <style> /* 设置字体的粗细,一般700表示加粗,400表示正常 */ p { /* font-weight: 700; 粗*/ /* font-weight: 100; 细*/ font-weight: 700; } </style> </head> <body> <p>Hello world</p> </body> </html> 效果展示： ④ font-style: italic; 这个属性管的是字体的样式,是否倾斜 p { font-style: oblique; } div { font-style: italic; } 这两个值都可以使字体倾斜,但oblique用于文本倾斜,用的较少 代码示例： <!DOCTYPE html> <html lang="en"> <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"> <!-- 设置字体是否倾斜,默认是不倾斜 --> <style> p { font-style: oblique; } div { font-style: italic; } </style> <title>Document</title> </head> <body> <p>Hello World</p> <div>Hello world</div> </body> </html> 效果展示： ⑤font: italic 700 20px/1px ‘幼圆’ 字体属性大杂烩,将一个标签所有字体属性写在一块 是否倾斜,粗细程度，字体大小行间距,字体样式 代码示例： <!DOCTYPE html> <html lang="en"> <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>Document</title> <!-- 字体的样式可以分开写也可以写在一起 --> <!-- 注意：写在一起的话size与family不可以省略 --> <style> p { /* font: 70px '微软雅黑' 可以这么写*/ font: italic 700 20px/1px '幼圆' } /* p标签的字体限定与div标签的字体限定有相同的结果,只有写的形式上有所不同 */ /* 注意区分weight与size的区别,weight不带px，而size带px */ div { font-size: 20px; font-family: '幼圆'; font-weight: 700; font-style: italic; } </style> </head> <body> <p>Hello world</p> <p>Hello world</p> <p>Hello world</p> </body> </html> 效果展示： 二、常用的背景属性都有什么？ 一个好看的页面会让人看起来更舒服,所以熟悉常用的背景属性尤为重要。 1.常见的背景属性 ①background-position: center center; 背景图片是如何进行展示的,如果不改这个属性默认从 左上角进行对齐,修改会会将中央位置放在中间 代码示例： <!DOCTYPE html> <html lang="en"> <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>Document</title> <style> div { width: 300px; height: 200px; background-image: url(../../e.jpg); background-size: 400px 300px; background-position: center; } </style> </head> <body> <div> </div> </body> </html> （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
