【CSS】第二天画盒子、笔墨控制属性

金歌 · 2025-1-6 05:21:33

1. 画盒子

目的：利用合适的选择器画盒子。
新属性

<!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>

复制代码

2. 笔墨控制属性

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>

复制代码

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>

复制代码

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>

复制代码

2.4 行高

作用：设置多行文本的间距
属性名：line-height
属性值

数字 + px
数字（当前标签font-size属性值的倍数）

line-height: 30px;
/* 当前标签字体大小为16px，写line-height: 2 那么行高就是32px */
line-height: 2;

复制代码

行高的构成

行高的测量方法：从一行笔墨的最顶端（最底端）量到下一行笔墨的最顶端（最底端）。

2.5 行高-垂直居中

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>

复制代码

// 拓展（了解）：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企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

【CSS】第二天画盒子、笔墨控制属性

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

【CSS】第二天 画盒子、笔墨控制属性

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

【CSS】第二天画盒子、笔墨控制属性