【HTML+CSS】字体字号行高

字号

font-size

1. 消失0px
2. 最小12px
3. 默认16px
4. 注意：一般写偶数，避免奇数字号有锯齿

• px像素
• em参考当前元素字体大小的倍数
• rem参考根元素（html）字体大小的倍数，一般用在移动端

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

网页布局

1. 划分模块
   • 头部header
   • banner图
   • 主体main
   • 底部footer
2. 找版心
   • 页面中心区域
   • 固定宽高
   • 水平居中
   • 一般宽高900-1200
   • 固定内容区域宽度, 展示完整的布局
3. 建立项目
   • html文件
     • 放置所有的html文件
     • 首页index.html
   • css文件夹 放置所有的css文件
     • index.css
     • reset.css 重置样式表
       • 清除网页自带的样式
       • 规范不同浏览器之间的样式
   • js文件夹 放置所有js文件
   • img文件夹 放置所有img图片
4. 准备好所有文件就可以开始写代码了