上一章：无 下一章：第二章

第一章：HTML标题与CSS样式基础

本章内容

HTML标签：

  • <h1> - 一级标题

    网页中最重要的标题，每个页面通常只使用一次。

  • <h2> - 二级标题

    用于主要段落或区块的标题。

  • <h3> - 三级标题

    用于次要段落的标题。

CSS属性：

  • font-size

    设置文字大小，可用单位：px、em、rem

    font-size: 24px;
  • color

    设置文字颜色

    color: #333333;
  • margin

    设置元素的外边距

    margin: 20px 0;

综合示例：

HTML:

<h1>我的博客</h1>
<h2>关于我</h2>
<h3>我的技能</h3>

CSS:

h1 {
    font-size: 32px;
    color: #222;
    margin-bottom: 30px;
}

h2 {
    font-size: 24px;
    color: #444;
    margin: 20px 0;
}

h3 {
    font-size: 18px;
    color: #666;
    margin: 15px 0;
}

效果预览：

课后练习：

  1. 基础练习：标题层级

    • 创建一个包含三级标题的页面结构
    • 为每个标题设置不同的颜色
    • 调整标题之间的间距

  2. 样式挑战：

    • 使用渐变色设置标题颜色
    • 为标题添加底部边框
    • 添加鼠标悬停效果

HTML编辑器

CSS编辑器

预览结果