字号
消失0px最小12px默认16px注意：一般写偶数，避免奇数字号有锯齿 px像素em参考当前元素字体大小的倍数rem参考根元素（html）字体大小的倍数，一般用在移动端font-size
<style>html{font-size: 20px;}.p1{font-size: 30px;height: 20em;width: 20em;background-color: green;}.p2{height: 20rem;width: 20rem;background-color: pink;}</style><p class="p1">文本文本文本1</p><p class="p2">文本文本文本2</p>
字体
字体系列font-family谷歌默认字体: 微软雅黑支持多个字体逗号隔开写法,使用的时候从前往后找,找到即可虽然不加引号也能用,但是建议加上引号<style>.p3{font-family: "楷体";font-family: "华文彩云";}</style>
字体粗细font-weight写法一: 数值100-900整百数 100-300细体400-500常规600-900加粗 写法二: 关键字 lighter细体normal常规bold加粗bolder更粗(移动端才看得到)
<style>.p4{/* */font-weight: 100;font-weight: 200;font-weight: 300;font-weight: 400;font-weight: 500;font-weight: 600;font-weight: 700;font-weight: 800;font-weight: 900;/* */font-weight: normal;font-weight: lighter;font-weight: bold;font-weight: bolder;}b,strong{font-weight: normal;}</style>
字体倾斜font-style倾斜italic更倾斜oblique不倾斜normal
<style>.p5{font-style: italic;font-style: oblique;font-style: normal;}i,em{font-style: normal;}</style>
文本修饰font-decoration下划线underline删除线line-through上划线overline没有none
<style>.p6{text-decoration: underline;text-decoration: line-through;text-decoration: overline;text-decoration: none;text-decoration: underline line-through overline;}a{text-decoration: none;}</style>
文本缩进text-indent: 2em注意: 独占一行的元素才有效
<style>.p1{width: 200px;height: 200px;background-color: skyblue;text-indent: 2em;}</style>
字间距letter-spacing: 可正可负
<style>.p2{letter-spacing: 10px;}</style>
词间距word-spacing: 可正可负
<style>.p3{word-spacing: 10px;}</style>
行高
line-height 数值百分比, 参考的是文字字号数字 1,2,3,4,5… 文字大小的倍数一行文本所占据的高度
上行间距+字号大小+下行间距
主要应用于: 单行文本垂直居中, 文字的行高=容器的高度
<style>.p5{width: 300px;height: 80px;font-size: 20px;line-height: 80px; line-height: 400%;line-height: 4;background-color: pink;}</style>
text-align left靠左center居中rigth靠右
<style>.p6{width: 300px;height: 80px;line-height: 80px; background-color: pink;text-align: center;}.p6:hover{color: white;background-color: skyblue;}</style>
网页布局
划分模块 头部headerbanner图主体main底部footer 找版心 页面中心区域固定宽高水平居中一般宽高900-1200固定内容区域宽度, 展示完整的布局 建立项目 html文件 放置所有的html文件首页index.html css文件夹 放置所有的css文件 index.cssreset.css 重置样式表 清除网页自带的样式规范不同浏览器之间的样式 js文件夹 放置所有js文件img文件夹 放置所有img图片 准备好所有文件就可以开始写代码了如果觉得《【HTML+CSS】字体字号行高》对你有帮助，请点赞、收藏，并留下你的观点哦！
