- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS字体常用属性包括什么，功能及使用是什么呢？
CSS字体常用属性包括什么，功能及使用是什么呢？
Admin 2022-11-30 群英技术资讯 305 次浏览
这篇文章我们来了解“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
在CSS3中default伪类选择器作用和用法是什么
CSS3 :default 伪类选择器只能作用在表单元素上，表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介，感兴趣的朋友跟随脚本之家小编一起看看吧
-
怎样保留hover的状态，有什么方法呢？
如何保留 hover 的状态？下面本篇文章给大家介绍一下不借助javascript保留hover状态的方法，希望对大家有所帮助！
-
CSS中什么方法实现下凹字体，代码怎样写？
这篇文章给大家分享的是CSS实现下凹字体的方法。实现下凹字体并不难，文中的示例代码介绍得很详细，有需要的朋友可以参考，对新手学习CSS的使用会有帮助，接下来就跟随小编一起了解看看吧。
-
用HTML+CSS怎么制作鼠标移过出现下拉效果的菜单栏
这篇文章主要介绍了利用html+css实现菜单栏缓慢下拉效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
-
CSS的when/else语法如何用，有什么技巧
when/else 语法更多用法组合使用内联使用新的媒体查询写法总结大家都知道CSS已经有@media、@support 查询形式的条件，可以非常灵活地选择对应的样式，然而还有一个新的提议
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
