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>
效果展示：
总结：
为什么将这两个看似毫不相关的属性放在一起进行介绍呢,作者意在让大家体会对比学习,字体属性与背景属性两者都有很多属性，拿出来几个常用的属性他们功能很多都类似,这是共同点,字体与背景又有许多不同的属性,这样区分学习会更利于我们进行理解。
到此这篇关于 css常用字体属性与背景属性介绍的文章就介绍到这了,更多相关 css常用字体属性与背景属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！