<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.frontSty{
font-size: 50px;
/* 加粗效果 */
font-weight: 700; /* 400-normal 正常 ; 700-bold 加粗*/
/* 是否倾斜效果 italic-倾斜 normal-正常*/
font-style: normal;
}
.mydiv2{
height: 50px;
background-color: beige;
line-height: 50px; /*行高和div高度保持一致 形成垂直居中的效果,但是只能用于单行文字*/
}
.mydiv3{
font-family: '楷体';
}
.mydiv4{
/* 复合属性 依次是 是否倾斜 加粗 大小/行距 字体 注意：字号和字体必须写否则不生效 */
font: normal 700 30px/2 '楷体';
}
</style>
</head>
<body>
<div class="frontSty"> 测试字体样式</div>
<div class="mydiv2">定位</div>
<div class="mydiv3">字体测试</div>
<div class="mydiv4">字体复合属性 font 测试</div>
<div>
<!-- 测试居中效果 -->
<div style="width: 100px; text-align: center; background-color: aqua;">居中</div>
<div style="width: 100px; text-align: right; background-color: aqua;">居右</div>
<div style="width: 100px; text-align: left; background-color: aqua;">居左</div>
</div>
<div>
<!-- 去除效果 -->
<div style="text-decoration: none;">测试下划线</div>
<!-- 下划线 -->
<div style="text-decoration: underline;">测试下划线</div>
<!-- 删除线 -->
<div style="text-decoration: line-through;">测试下划线</div>
<!-- 上划线 -->
<div style="text-decoration: overline;">测试下划线</div>
</div>
</body>
</html>css+html案例
星空2026-03-27 10:58
相关推荐
yivifu12 分钟前
创建支持交叉链接且鼠标悬停显示注释框的HTML文件星辰徐哥14 小时前
本地视频预览别只自己看：把Remotion动效项目发给客户远程验收Solara20 小时前
中文字体子集化实录：3.2MB → 200KB 的完整脚本、踩坑清单与三条反直觉经验样子20181 天前
Js 之根据白名单过滤 HTML(防止 XSS 攻击)CoderYanger1 天前
Java EE 进阶：2.3 JavaScript芳心粽伙饭1 天前
CSS第四章 布局CoderYanger1 天前
Java EE 进阶：2.3 JavaScript 综合案例梦醒沉醉1 天前
7、CSS入门——区块盒子与行内盒子labixiong2 天前
transition 写在 CSS 变量上为什么不生效？给变量补张「类型身份证」世岩清上2 天前
展厅数字内容同质化严重，怎样打造专属叙事风格？