CSS字体常用属性包含什么，功能及使用是什么呢？
发布时间：2023-07-03 11:25:32 所属栏目：语言 来源：
导读：这篇文章我们来了解“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> ② background-image: url(…/…/5.png); 图片的路径,比较简单,在此就不进行代码示例了。 ③background-repeat: no-repeat; 不加这个属性的话默认图片是重复展示的 代码示例： <!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: 2000px; height: 800px; background-image: url(../../e.jpg); background-size: 400px 300px; /* background-position: center; */ background-repeat: no-repeat; } </style> </head> <body> <div> </div> </body> </html> ④background-size: cover; 这个修改的是背景的大小,而cover是进行覆盖,也可以使用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> <style> div { width: 2000px; height: 800px; background-image: url(../../e.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } </style> </head> <body> <div> </div> </body> </html> 效果展示： 添加属性前： 添加属性后： ⑤background-attachment: fixed; 这个属性设置的是背景图片是否根据字体进行滚动 fixed是不进行滚动 scroll是背景图随着字体的滚动而滚动 代码示例： <!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> p { color: chartreuse; } /* 将整个图片铺满整个屏幕 */ body { /* 精确给出图片的位置 */ background-position: 0px 0px; background-image: url(../../1.png); background-repeat: no-repeat; background-size: cover; /* 设置背景图片是滚动的还是固定的 */ /* scroll是将图片设为滚动,如果图片滚动那么图片会随图片上的东西拉伸,直至显示完所有的东西 */ /* background-attachment: scroll; */ /* 图片固定不会拉伸图片以适应图片上的文字,图片会保持原比 */ background-attachment: fixed; } </style> </head> <body> <div class="firstdiv">Hello World</div> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> </body> </html> 效果展示：（由于作者不会做动图,大家可以赋值代码自己体会一下） ⑥大杂烩 background 代码示例： <!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 { background: chartreuse url(../../1.jpg) fixed no-repeat 0px 0px; } p { color: springgreen; } </style> </head> <body> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> <p>Hello World</p> </body> </html> 总结： 为什么将这两个看似毫不相关的属性放在一起进行介绍呢,作者意在让大家体会对比学习,字体属性与背景属性两者都有很多属性，拿出来几个常用的属性他们功能很多都类似,这是共同点,字体与背景又有许多不同的属性,这样区分学习会更利于我们进行理解。 （编辑：聊城站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
