前言
css可以做出很多使html样式的改变,今天主要说一说字体样式与背景样式
一、常用的字体属性都有什么？
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>
效果展示：
总结
为什么将这两个看似毫不相关的属性放在一起进行介绍呢,作者意在让大家体会对比学习,字体属性与背景属性两者都有很多属性，拿出来几个常用的属性他们功能很多都类似,这是共同点,字体与背景又有许多不同的属性,这样区分学习会更利于我们进行理解。
