Activity 3: Form styling with CSS
3.1 在我们的 src 目录中创建一个单独的文件来存储项目的样式，并将其命名为 style.css ，如下所示：
3.2 在我们的 main.js 文件中引用 style.css ，代码如下：
import './style.css'3.3 打开 style.css 并使用标签选择器设置表单标题的样式，代码如下：
/* Tag selectors */
h1 {
text-align: center;
margin-top: 20px;
text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
}text-align: center;此属性使文本在<h1>元素内居中。这意味着文本将在其包含元素的中间水平对齐。margin-top: 20px;此属性在<h1>元素上方添加 20 像素的空间。边距是指元素边框外的空间。这里我们只设置了上边距，这意味着<h1>元素上方将有 20 像素的空间。text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);此属性为<h1>元素中的文本添加阴影效果。其值指定以下内容：4px（水平偏移）：阴影将向右移动 4 个像素4px（垂直偏移）：阴影将向下移动 4 个像素8px（模糊半径）：决定阴影的模糊程度。值越大，阴影越模糊rgbargba(0, 0, 0, 0.5)：设置阴影的颜色和不透明度。rgba 代表红色、绿色、蓝色和 alpha（不透明度）。在本例中，阴影颜色为黑色（0, 0, 0），不透明度为 50%（0.5）
3.4 现在，在 style.css 文件中，使用类选择器将表单置于浏览器窗口的中心，代码如下：
3.5 现在，为了让我们的输入框更加用户友好，我们希望当用户点击其中任何一个输入框时，框的颜色就会改变。
使用 ID 选择器 ，并将以下代码添加到 style.css 文件
#username、#password、#isAustralian、#reason、#gender这些是 ID 选择器 。在 CSS 中，ID 选择器用于为具有特定id属性的元素设置样式。例如，#username会将id="username"属性的 HTML 元素作为目标。ID 选择器非常具体，仅将样式应用于 ID 完全匹配的元素。:focus伪类用于在元素获得焦点时应用样式。焦点通常发生在用户点击元素或使用键盘导航到元素（例如，按下 Tab 键）时。在获得焦点时应用样式有助于在表单字段处于活动状态时提供视觉反馈，从而增强用户交互和可访问性。border-color: #FF6347;当任何指定元素（#username、#password、#isAustralian、#reason、#gender）获得焦点时，其边框颜色将变为#FF6347（亮番茄色）。此变化使获得焦点的元素对用户更加清晰地突出显示。background-color: #FFEBE8;焦点元素的背景颜色变为#FFEBE8（浅桃色）。这进一步突出了活动的表单字段，使其在视觉上更加清晰易见。
3.6 最后，用灰色突出显示默认性别，以确保用户注意到通过以下代码使用属性选择器：
background-color: #d3d3d3;此 CSS 属性将所选元素的背景颜色设置为浅灰色 (#d3d3d3)。backgroundbackground-color属性会更改目标元素的背景颜色，在本例中，目标元素为id="gender"<select>元素。
为了正确应用样式，清晰地定义和区分 HTML 结构中的不同元素至关重要。为了改进当前的表单，我们可以使用 <div> 标签来分隔元素。此外，CSS 文件很快就会变得庞大且重复，从而带来许多潜在错误的机会。这时， Bootstrap 5 和类似的 CSS 框架就派上用场了。它们为项目的不同部分（甚至跨项目）提供了标准化，使维护和应用一致的样式变得更加容易。