- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS字体常用属性包括什么，功能及使用是什么呢？
CSS字体常用属性包括什么，功能及使用是什么呢？
Admin 2022-11-30 群英技术资讯 509 次浏览
这篇文章我们来了解“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字体属性
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
CSS中的position属性怎么实现定位，属性值有哪些
这篇文章主要介绍了css中的position属性值的探究(小结)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
-
CSS如何让元素旋转起来并点击就停止
方法：1、利用animation属性给元素绑定循环旋转动画；2、利用@keyframes规则设置动画的旋转动作；3、用“元素:active{animation-play-state:paused}”语句设置元素循环旋转时，点击元素停止旋转。
-
HTML中相对位置与绝对位置的用法是什么
用户在浏览网站时经常会看到左侧有一种宣传栏，它不会随着鼠标滚动而不被用户看到，它会始终以页面的中心为参照物始终保持在左侧一个固定的位置，今天我们来做一下这个小例子，让我
-
div背景透明如何实现？教你两个办法
我们在做网站页面设计时，往往会遇到背景透明的需求。一般，我们会用opacity属性来设置div背景透明度，其实还有别方法也能实现背景透明，这篇文章就带大家介绍一下如何现实div背景透明，本文有详细的方法示例，感兴趣的朋友可以了解一下。
-
HTML中相对位置与绝对位置是怎样，怎么使用
HTML中相对位置与绝对位置是怎样，怎么使用？一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
