第4章 CSS3基础

Question

1. 使用内嵌样式表设置 h1 的属性，通过类选择器改变 span 的颜色，实现五彩标题，即每个 span 设置的字呈现不同的颜色，如图 4-43 所示。

Answer 1

这道题考查的是内部样式表和 class 类选择器的用法。思路很简单：先给 h1 设置统一的大字号，然后把"五""彩""标""题"四个字分别用 <span> 包起来，每个 span 赋予不同的 class，再在 <style> 里为每个 class 定义不同的颜色。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>五彩标题</title>
    <style type="text/css">
        h1 {
            font-size: 48px;     /* 设置标题字号 */
        }
        /* 通过类选择器为每个字设置不同颜色 */
        .c1 { color: red; }       /* 五 - 红色 */
        .c2 { color: orange; }    /* 彩 - 橙色 */
        .c3 { color: blue; }      /* 标 - 蓝色 */
        .c4 { color: green; }     /* 题 - 绿色 */
    </style>
</head>
<body>
    <h1>
        <span class="c1">五</span>
        <span class="c2">彩</span>
        <span class="c3">标</span>
        <span class="c4">题</span>
    </h1>
</body>
</html>

代码要点说明：

<span> 是行内元素，不会换行，非常适合在一行文字中"圈"出个别字来单独设置样式。
class 选择器以 . 开头，如 .c1，可以复用在多个元素上（跟 id 的区别就在这里）。
h1 标签默认就是粗体，所以我们只需要设置字号和颜色即可。
颜色可以用英文颜色名（red、orange...）或十六进制值（#ff0000）来表示，效果一样。

📖 参见 4.2.2 内部样式表、4.5.7 class 选择器

Answer 2

这道题考查的是 伪类选择器，特别是 :hover 的用法。观察截图：悬停前是一个带边框的普通链接文字，悬停后链接的背景色、文字颜色、字号都发生了变化。我们需要用 a:link（未访问状态）和 a:hover（悬停状态）分别定义样式。

记住伪类的顺序口诀："love hate"，即 :link → :visited → :hover → :active，顺序不能乱，否则样式会被覆盖。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬停效果</title>
    <style type="text/css">
        a:link {
            /* 未访问时的默认样式 */
            font-size: 16px;
            color: #333;
            text-decoration: none;  /* 去掉下划线 */
            border: 1px solid #999;
            padding: 8px 15px;
            display: inline-block;
        }
        a:visited {
            color: #333;
        }
        a:hover {
            /* 鼠标悬停时的样式 */
            font-size: 18px;
            color: #fff;
            background-color: #000;
            border: 3px dashed #fff;
            padding: 8px 15px;
        }
        a:active {
            color: yellow;
        }
    </style>
</head>
<body>
    <p>
        <a href="#">把鼠标移到此处试一试...</a>
    </p>
</body>
</html>

代码要点说明：

:link 定义链接未被访问时的样式；:hover 定义鼠标悬停时的样式。
四种伪类必须按照 link → visited → hover → active 的顺序书写，这是 CSS 层叠规则决定的。
text-decoration: none 可以去掉链接默认的下划线。
display: inline-block 让行内的 <a> 标签可以设置 padding 和 border，像"小盒子"一样。
悬停时背景变黑、文字变白、边框变为白色虚线，形成非常明显的视觉反馈。

📖 参见 4.5.8 伪类选择器、表 4-3 伪类

Answer 3

这道题考查的是用 内部样式表 控制页面的背景色、文字颜色、字号、对齐等基本属性。观察截图可以看到：深灰色背景、白色小号文字、居中排列，共两行版权信息。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>社区网首页</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .footer {
            background-color: #3b3b3b;  /* 深灰色背景 */
            padding: 30px 0;
            text-align: center;         /* 文字居中 */
        }
        .footer p {
            color: #fff;                /* 白色文字 */
            font-size: 12px;
            line-height: 2;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="footer">
        <p>社区网（www.shequ.cn） * 2020 版权所有 All Rights Reserved.</p>
        <p>主办单位名称：社区研究会&nbsp; 网站备案号：京ICP备10006066号&nbsp;
           营业执照经营许可证编号：京ICP证160666号&nbsp;
           京公网安备：11011402010666号</p>
    </div>
</body>
</html>

代码要点说明：

.footer 是一个 class 选择器，把整个版权区域包在一个 <div> 里统一设置背景和对齐。
background-color: #3b3b3b 设置深灰色背景，color: #fff 设置白色文字，形成深底白字的效果。
padding: 30px 0 表示上下内边距 30px、左右为 0，让版权文字不紧贴边缘。
line-height: 2 设置行高为字号的 2 倍，让两行文字之间有足够的间距。
  用来在备案号之间添加空格间隔。

📖 参见 4.2.2 内部样式表、4.5.7 class 选择器、4.6.2 色彩单位

Answer 4

这道题难度稍高，考查的是 内部样式表的综合运用：渐变背景、浮动布局、字体设置、搜索栏等。观察截图可以看到：顶部有一行小字链接（登录 | 注册 | 管理人员登录），主体区域有渐变灰色背景，左侧是大号艺术字"金阳光社区网"，右侧是标语和搜索栏。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        body { font-family: "Microsoft YaHei", sans-serif; }

        /* 顶部登录栏 */
        .top-bar {
            text-align: right;
            padding: 5px 20px;
            font-size: 12px;
            color: #666;
        }
        .top-bar a {
            color: #666;
            text-decoration: none;
            margin: 0 3px;
        }
        .top-bar a:hover { color: #333; }

        /* Logo 主体区域 */
        .header {
            background: linear-gradient(to bottom, #e0e0e0, #f5f5f5);
            padding: 20px 30px;
            overflow: hidden;  /* 清除浮动 */
        }

        /* 左侧 Logo 文字 */
        .logo {
            float: left;
            font-size: 36px;
            font-weight: bold;
            color: #fff;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            line-height: 80px;
        }

        /* 右侧标语和搜索 */
        .right-area {
            float: right;
            text-align: right;
        }
        .slogan {
            font-size: 20px;
            color: #fff;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
            font-style: italic;
            margin-bottom: 10px;
        }
        .search-box input[type="text"] {
            width: 180px;
            height: 28px;
            border: 1px solid #ccc;
            padding: 0 8px;
            font-size: 12px;
        }
        .search-box input[type="button"] {
            height: 28px;
            padding: 0 15px;
            background: #888;
            color: #fff;
            border: none;
            font-size: 12px;
            cursor: pointer;
        }
        .search-box input[type="button"]:hover {
            background: #666;
        }
    </style>
</head>
<body>
    <!-- 顶部登录栏 -->
    <div class="top-bar">
        <a href="#">登录</a> |
        <a href="#">注册</a> |
        <a href="#">管理人员登录</a>
    </div>

    <!-- Logo 主体区域 -->
    <div class="header">
        <div class="logo">金阳光社区网</div>
        <div class="right-area">
            <div class="slogan">推进社区发展 服务百姓生活</div>
            <div class="search-box">
                <input type="text" placeholder="" />
                <input type="button" value="站内搜索" />
            </div>
        </div>
    </div>
</body>
</html>

代码要点说明：

linear-gradient(to bottom, #e0e0e0, #f5f5f5) 创建从上到下的灰色渐变背景，模拟截图中的效果。
float: left / right 实现左右分栏布局——Logo 靠左，标语和搜索框靠右。
overflow: hidden 加在父容器 .header 上，用来"清除浮动"，防止容器高度塌陷。
text-shadow 给文字添加阴影，让白色文字在灰色背景上更有立体感。
搜索栏用了 input[type="text"] 和 input[type="button"] 属性选择器来分别设置样式。

📖 参见 4.2.2 内部样式表、4.5.3 属性选择器、4.5.7 class 选择器、4.6.2 色彩单位

Answer 5

这道题是对本章知识的综合应用，考查了 内部样式表、伪元素 ::first-letter / ::first-line、元素选择器 等。观察截图：顶部有深色背景大标题"神奇的CSS"（红色描边艺术字效果），下方是正文段落，其中"CSS"三个字母加粗且为斜体，段落文字有首行缩进。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ex4-5.html</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            font-size: 14px;
            color: #333;
        }

        /* 顶部标题栏 */
        .banner {
            background-color: #444;
            text-align: center;
            padding: 25px 0;
        }
        .banner h1 {
            font-size: 48px;
            color: red;
            text-shadow: 2px 2px 0 #000, -1px -1px 0 #000,
                         1px -1px 0 #000, -1px 1px 0 #000;
            letter-spacing: 8px;
        }

        /* 正文内容区域 */
        .content {
            max-width: 700px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .content p {
            font-size: 14px;
            line-height: 2;
            text-indent: 2em;       /* 首行缩进 2 个字 */
            margin-bottom: 5px;
        }

        /* "CSS" 关键词加粗斜体 */
        .content em {
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 顶部标题栏 -->
    <div class="banner">
        <h1>神奇的CSS</h1>
    </div>

    <!-- 正文内容 -->
    <div class="content">
        <p>学习<em>CSS</em>的最好办法就是不断的练习、不断的思考、不断的再练习，对于刚刚接触<em>CSS</em>的读者，面对满满的代码背定是显得无从下手。</p>
        <p>这里给读者一些工作经验，希望能够帮助读者提高编写代码的能力：掌握(X)HTML代码中每个标签的含义；及时查阅<em>CSS</em>手册；多做<em>CSS</em>布局网站的练习；在网络中搜索并解决问题；分析、思考<em>CSS</em>布局网站的处理方式；善于总结经验。</p>
    </div>
</body>
</html>

代码要点说明：

.banner 使用深色背景（#444），标题用红色大号字，配合 text-shadow 多重阴影实现描边效果，让文字更有视觉冲击力。
text-shadow 写了 4 个阴影值（上下左右各偏移的黑色阴影），叠加起来就形成了"描边"的效果。
text-indent: 2em 是中文排版的标准首行缩进——2 个字符的宽度。em 是相对单位，1em = 当前字号。
letter-spacing: 8px 增大标题的字间距，让"神奇的CSS"更舒展。
正文中的"CSS"用 <em> 标签包裹，既有语义（表示强调），又通过 CSS 设置为加粗斜体，实现截图中的效果。

📖 参见 4.2.2 内部样式表、4.5.1 元素选择器、4.5.7 class 选择器、4.6.2 色彩单位

第4章 CSS3基础

编程题