<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体</title>
<style>
/* 调整字体 */
.size {
font-size: 70px;
}
/* 字体粗细 */
/* 正常:normal 或 400 */
/* 加粗:bold 或 700 */
.weight {
font-weight: 100;
}
/* 字体倾斜 */
/* 正常:normal */
/* 倾斜:italic */
.italic {
font-style: italic;
}
/* 字体系列 */
.songti {
font-family: 宋体;
}
/* 样式层叠问题-覆盖性,选择最后一个 */
.more {
color: red;
color: blue;
}
/* font属性连写 */
.allfont1 {
/* font: style weight size 字体; */
font: italic 700 66px 宋体;
}
.allfont2 {
/* font: style weight size 字体; */
font: italic 700 66px 宋体;
/* 单独修改只能放后面 */
font-style: normal;
}
.allfont3 {
/* font: style weight size 字体; */
/* 只能省略前两个 */
font: 66px 宋体;
}
/* 文本缩进 */
.indent {
/* em:一个字的大小 */
text-indent: 2em;
}
/* 内容水平对齐方式 */
.align {
/* text-align: right; */
/* text-align: left; */
text-align: center;
}
/* 全局居中 */
body {
text-align: center;
}
/* 文本修饰 */
/* 下划线 */
.under {
text-decoration: underline;
}
/* 删除线 */
.linet {
text-decoration: line-through;
}
/* 上划线 */
.overl {
text-decoration: overline;
}
/* 无装饰线 */
.non {
text-decoration: none;
}
/* 调整行高 */
.hei {
/* line-height: 50px; */
/* 当前字号的倍数 */
line-height: 3;
}
.allfont4 {
/* font: style weight size/line-height 字体; */
font: italic 700 66px/1.5 宋体;
}
</style>
</head>
<body>
<!-- 默认字体字号16 -->
<p>前端</p>
<!-- 调整字号 -->
<div class="size">调整字号</div>
<!-- 字体粗细 -->
<div class="weight">你好</div>
<!-- 字体倾斜 -->
<div class="italic">世界</div>
<!-- 字体系列 -->
<!-- 默认微软雅黑 -->
<div>微软雅黑</div>
<div class="songti">宋体</div>
<!-- 样式的层叠问题 -->
<div class="more">层叠问题</div>
<!-- font属性连写--复合属性 -->
<div class="allfont1">font属性连写1</div>
<div class="allfont2">font属性连写2</div>
<div class="allfont3">font属性连写3</div>
<!-- 文本缩进 -->
<p class="indent">在刚刚结束的巴黎奥运会上,一个不寻常的场景吸引了世界的目光:乌克兰女子高跳运动员玛胡奇克,在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议,而且标志着一个重大胜利的前奏。结果正如预期,金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>
<!-- 内容水平对齐方式 -->
<p class="align">在刚刚结束的巴黎奥运会上,一个不寻常的场景吸引了世界的目光:乌克兰女子高跳运动员玛胡奇克,在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议,而且标志着一个重大胜利的前奏。结果正如预期,金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>
<hr>
<img src="image/i1.png" alt="无法显示" class="img">
<!-- 文本修饰 -->
<div class="under">下划线</div>
<div class="linet">删除线</div>
<br>
<div class="overl">上划线</div>
<div class="non">无装饰线</div>
<!-- 行高规定 -->
<p class="hei">在刚刚结束的巴黎奥运会上,一个不寻常的场景吸引了世界的目光:乌克兰女子高跳运动员玛胡奇克,在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议,而且标志着一个重大胜利的前奏。结果正如预期,金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>
<p class="allfont4">在刚刚结束的巴黎奥运会上,一个不寻常的场景吸引了世界的目光:乌克兰女子高跳运动员玛胡奇克,在比赛前夕竟在田径场地上舒适地睡着了。她的这一行为不仅令人感到新鲜和不可思议,而且标志着一个重大胜利的前奏。结果正如预期,金牌荣耀最终环抱着这位甜睡中的“奥运睡美人”。</p>
</body>
</html>
前端day8-字体和文本样式
最新推荐文章于 2024-09-11 22:31:16 发布