婚礼邀请卡

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 75 课，共 76 课。

挑战

简单

在这个挑战中，我们将使用 CSS 为邀请卡设置样式，重点关注布局、字体排版和间距。你将应用内边距、外边距、边框和颜色等属性，重现下方图片中的设计。

你将获得一个 HTML 文档，其中包含一个类为 .invitation 的 div、一个 h2 标题和几个段落。你的任务是使用 CSS，一步一步地为这张婚礼请柬设置样式。

请仔细按照说明操作，并依次应用每种样式。

步骤 1：设置页面主体样式

选择 body 元素。
将字体系列设置为 "Times New Roman", serif。
使用 Flexbox 属性，让邀请卡完美居中。
将高度设置为 100vh。
设置浅色背景（#f8f5f0）。

步骤 2：设置邀请卡样式

选中 .invitation 类。
将背景色设置为白色（#fff）。
添加 2px solid gold 边框。
添加一些内边距（20px）。
将宽度设置为 350px。
将文本居中。
添加 border-radius，让边角变圆。
使用 box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1) 添加柔和的阴影。

步骤 3：设置文本样式

选中 h2 元素。
- 将文本颜色设置为 goldenrod。
- 将字体大小设为 22px。
选择 .names 类。
- 使用手写体字体（"Dancing Script", cursive）。
- 将字体大小设置为 26px。
选中所有 p 元素。
- 将字体大小设置为 18px。
- 将文本颜色改为 #5a4d3f。

亲手试试

<html>
    <head>
        <title>Invitation Card</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="invitation">
            <h2>Wedding Invitation</h2>
            <p class="names">Emma & James</p>
            <p class="message">Together with their families, invite you to celebrate their wedding.</p>
            <p class="detail"><strong>Date:</strong> Saturday, June 15, 2025</p>
            <p class="detail"><strong>Time:</strong> 4:00 PM - Reception to follow</p>
            <p class="detail"><strong>Venue:</strong> Rosewood Garden, Lakeview</p>
            <p class="note">Please RSVP by May 20th</p>
            <p class="footer">We look forward to celebrating with you!</p>
        </div>
    </body>
</html>

使用 CSS 添加样式中的所有课

2添加 CSS

内联 CSS 内部 CSS 外部 CSS 基础样式挑战

5颜色与背景

背景颜色 HEX 颜色 RGB 颜色使用 RGBA 设置透明度复习挑战 #1

8盒模型第二部分

盒模型尺寸边框圆角溢出盒子阴影复习挑战

11布局技巧

块级元素与行内元素定位基础相对定位绝对定位固定定位 z-index 基础复习挑战

14最终挑战

排列项目电影列表婚礼邀请卡浮动通知

自己练习： Web 在线编辑器