练习06-CSS设置样式

题目1：故事：彩虹之约

阿飞最近喜欢阅读童话故事，有一天他心血来潮自己写了一篇，文章初稿已经完成，但是文章格式看起来不太美观，请你阅读以下要求，帮阿飞修改一下文章格式吧：

在body元素选择器中填入合适的代码，将文章字体的种类设置为sans-serif，背景颜色设置为#f4f4f4；
设置文章一级标题（即h1元素）为居中对齐，字体颜色为#333333；
设置文章段落字体颜色为rgb(66, 66, 66)。

答案

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 设置body元素的字体的种类设置为sans-serif，背景颜色设置为#f4f4f4 */
        body {
            font-family: sans-serif;
            background-color: #f4f4f4;
        }

        /* 设置文章一级标题（即h1元素）为居中对齐，字体颜色为#333333 */
        h1 {
            color: #333333;
            text-align: center;
        }

        /* 设置文章段落（即p元素）的字体颜色为rgb(66, 66, 66) */
        p {
            color: rgb(66, 66, 66);
        }
    </style>
</head>
<body>
    <h1>彩虹之约</h1>
    <h2>故事梗概</h2>
    <p>在一片遥远的森林中，住着一只名叫贝贝的小松鼠。它活泼可爱，热爱探险，总是对未知的世界充满好奇。有一天，它听说了一个神奇的传说，传说中有一个彩虹国，那里有无尽的宝藏和美食，还有最美丽的风景。贝贝决定踏上寻找彩虹国的旅程，于是，一场充满挑战与奇遇的冒险就这样开始了。
    </p>
    <h2>正文</h2>
    <p>在浓密的森林里，贝贝收拾好自己的小行李，告别了森林里的朋友，义无反顾地踏上了寻找彩虹国的旅程。在这段旅程中，贝贝遇到了许多有趣的伙伴：会说话的动物们、善良的小精灵们，还有神奇的飞龙。这些新朋友们都帮助贝贝克服了许多困难和挑战，让贝贝离彩虹国越来越近。
    </p>
    <p>经过无数次的探险和挑战，有一天，贝贝终于来到了彩虹国。这里的一切都超出了它的想象。彩虹国的风景如画，遍地都是五颜六色的鲜花和闪烁的宝石。空中悬挂着七彩的桥梁，连接着每一个角落。在彩虹国里，小松鼠贝贝结识了许多新朋友，它们教会了贝贝如何使用彩虹国的宝藏和美食。贝贝和朋友们一起度过了许多快乐的时光，它们在七彩的桥梁上跳舞，在宝石般的湖面上划船，还参加了盛大的彩虹宴会。
    </p>
    <p>然而，在欢乐之余，小松鼠贝贝发现彩虹国正面临着巨大的危机。一群邪恶的黑雾巫师企图夺取彩虹国的宝藏，将整个国家笼罩在黑暗之中。为了拯救彩虹国，小松鼠贝贝和它的朋友们决定与黑雾巫师展开一场激战。在战斗中，贝贝巧妙地利用了彩虹国的宝藏和自然力量，激发出了自己和伙伴们的潜能。经过一番艰苦的努力，他们终于打败了黑雾巫师，将彩虹国从邪恶的势力中解救出来。
    </p>
    <h2>结局</h2>
    <p>彩虹国的国王为了感谢小松鼠贝贝和它的朋友们，举办了一场盛大的庆祝活动。国王将最珍贵的宝藏和美食赐予了贝贝和它的伙伴们，还为他们在彩虹国建立了美丽的家园。从此以后，小松鼠贝贝和它的朋友们过上了幸福快乐的生活。在彩虹国的每一天都充满了快乐与惊喜。
    </p>
</body>
</html>

题目2：故事：彩虹之约2.0

阿飞修改完文章后，他觉得很不错，拿去给他的好朋友小明欣赏，小明觉得文章写得不错，但是格式还需要进一步优化，提了一点建议，请你根据小明的建议帮阿飞进一步修改一下文章格式：

设置文章段落（即p元素）的行高为默认行高的1.5倍，首行缩进36px；
设置class="cnt"的元素字体粗细为600，字体颜色为rgb(68, 161, 215)；
给class="ending"的元素添加删除线line-through。

答案：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333333;
            text-align: center;
        }
        h2 {
            color: rgb(60, 60, 59);
            text-indent: 18px;
        }
        p {
            color: rgb(66, 66, 66);
            /* 设置p元素的行高为默认行高的1.5倍，首行缩进36px */
            line-height: 1.5;
            text-indent: 36px;
        }
        /* 设置class="cnt"的元素字体粗细为600，字体颜色为rgb(68, 161, 215) */
        .cnt {
            font-weight: 600;
            color: rgb(68, 161, 215);
        }
        /* 给class="ending"的元素添加删除线line-through */
        .ending {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1>彩虹之约</h1>
    <h2>故事梗概</h2>
    <p>在一片遥远的森林中，住着一只名叫<span class="cnt">贝贝</span>的<span class="cnt">小松鼠</span>。它<span class="cnt">活泼可爱，热爱探险</span>，总是对未知的世界充满好奇。有一天，它听说了一个神奇的传说，传说中有一个<span
            class="cnt">彩虹国</span>，那里有无尽的宝藏和美食，还有最美丽的风景。贝贝决定踏上寻找彩虹国的旅程，于是，一场<span class="cnt">充满挑战与奇遇的冒险</span>就这样开始了。
    </p>
    <h2>正文</h2>
    <p>在浓密的森林里，贝贝收拾好自己的小行李，告别了森林里的朋友，义无反顾地<span
            class="cnt">踏上了寻找彩虹国的旅程</span>。在这段旅程中，贝贝遇到了许多有趣的伙伴：会说话的动物们、善良的小精灵们，还有神奇的飞龙。这些新朋友们都帮助贝贝克服了许多困难和挑战，让贝贝离彩虹国越来越近。
    </p>
    <p>经过无数次的探险和挑战，有一天，贝贝<span
            class="cnt">终于来到了彩虹国</span>。这里的一切都超出了它的想象。彩虹国的风景如画，遍地都是五颜六色的鲜花和闪烁的宝石。空中悬挂着七彩的桥梁，连接着每一个角落。在彩虹国里，小松鼠贝贝结识了许多新朋友，它们教会了贝贝如何使用彩虹国的宝藏和美食。贝贝和朋友们一起度过了许多快乐的时光，它们在七彩的桥梁上跳舞，在宝石般的湖面上划船，还参加了盛大的彩虹宴会。
    </p>
    <p>然而，在欢乐之余，小松鼠贝贝发现彩虹国<span
            class="cnt">正面临着巨大的危机</span>。一群邪恶的黑雾巫师企图夺取彩虹国的宝藏，将整个国家笼罩在黑暗之中。为了拯救彩虹国，小松鼠贝贝和它的朋友们决定与黑雾巫师展开一场激战。在战斗中，贝贝巧妙地利用了彩虹国的宝藏和自然力量，激发出了自己和伙伴们的潜能。经过一番艰苦的努力，他们终于<span
            class="cnt">打败了黑雾巫师</span>，将彩虹国从邪恶的势力中解救出来。</p>
    <h2 class="ending">结局</h2>
    <p>彩虹国的国王为了感谢小松鼠贝贝和它的朋友们，举办了一场<span
            class="cnt">盛大的庆祝活动</span>。国王将最珍贵的宝藏和美食赐予了贝贝和它的伙伴们，还为他们在彩虹国建立了美丽的家园。从此以后，小松鼠贝贝和它的朋友们<span
            class="cnt">过上了幸福快乐的生活</span>。在彩虹国的每一天都充满了快乐与惊喜。</p>
</body>
</html>