【CSS】第二天 画盒子、笔墨控制属性
1. 画盒子目的：利用合适的选择器画盒子。
新属性
https://i-blog.csdnimg.cn/direct/6cb5029b93214f649d385628b3740dab.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red {
width: 100px;
height: 100px;
background-color: brown;
}
.orange {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="red">div标签</div>
<div class="orange">div2</div>
</body>
</html>
https://i-blog.csdnimg.cn/direct/5daf85b59a614f1ca8ffbf36bfc186a9.png
2. 笔墨控制属性
https://i-blog.csdnimg.cn/direct/1ad3aa0d57f84dd0ae007494f22c153f.png
2.1 字体巨细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
/* font-size 属性必须有单位，否则属性不生效，默认文字大小16px */
font-size: 30px;
}
</style>
</head>
<body>
<p>div标签</p>
<div>默认字体大小</div>
</body>
</html>
https://i-blog.csdnimg.cn/direct/124694c036eb422b8c035948a0b9423f.png
2.2 字体粗细
属性名：font-weight
属性值：
[*]数字 正常400 加粗700
[*]关键字 正常normal 加粗bold
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3 {
font-weight: 400;
}
div {
font-weight: 700;
}
</style>
</head>
<body>
<h3>123</h3>
<div>456</div>
</body>
</html>
https://i-blog.csdnimg.cn/direct/f5c3b2638e2d4b148027d9182ce0fc2b.png
2.3 字体样式是否倾斜
作用：打扫笔墨默认的倾斜效果
属性名：font-style
属性值：
[*]正常值:normal
[*]倾斜: italic
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
em {
font-style: normal;
}
div {
font-style: italic;
}
</style>
</head>
<body>
<em>em标签</em>
<div>div标签</div>
</body>
</html>
https://i-blog.csdnimg.cn/direct/2204cdf3bb9843ec851bd7eb30e4fb3d.png
2.4 行高
作用：设置多行文本的间距
属性名：line-height
属性值
[*]数字 + px
[*]数字（当前标签font-size属性值的倍数）
line-height: 30px;
/* 当前标签字体大小为16px，写line-height: 2 那么行高就是32px */
line-height: 2;
https://i-blog.csdnimg.cn/direct/2e6a0e489e6c48c59f1165430fff7a43.png
行高的构成
https://i-blog.csdnimg.cn/direct/da43fead08804944808ee8f2659c25b7.png
行高的测量方法：从一行笔墨的最顶端（最底端）量到下一行笔墨的最顶端（最底端）。
https://i-blog.csdnimg.cn/direct/77cca17b6c91402784d30028a1cf0b37.png
2.5 行高-垂直居中
https://i-blog.csdnimg.cn/direct/e78cf4b50f694272a69e9f5c6e1a4653.png
https://i-blog.csdnimg.cn/direct/5ccda97210a94e21b089c1384c4b4609.png
2.6 字体族
属性名：font-family
属性值：字体名
font-fanily：楷体;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
font-family: Heiti SC;
}
</style>
</head>
<body>
<div>测试文字</div>
</body>
</html>
https://i-blog.csdnimg.cn/direct/4ccb6f03792649e9bd620af9aca9b0fd.png
// 拓展（了解）：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
font-family 属性末了设置一个字体族名，网页开发建议利用无衬线字体
2.7 字体复合属性 font
DAY03 P37
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]