DailyChallenge_WebDepartment/Day_3

Day_3 · CSS 选择器与颜色字体

预计耗时：20~30 分钟 HTML 是骨架，CSS 是衣服。今天学会用选择器找到元素，再设置颜色和字体。

今日知识点

• CSS 三种写法：内联 style="..."、内部 <style>、外部 <link>（推荐外部）
• 选择器：标签选择器 h1、类选择器 .类名、id 选择器 #id
• 常用属性：color 文字颜色、font-size 字号、background-color 背景色、text-align 对齐

先学（教程）

• 菜鸟教程 CSS（看"CSS 语法"和"CSS 选择器"）：https://www.runoob.com/css/css-tutorial.html
• MDN·CSS 基础：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/CSS_basics
• B站视频（黑马程序员，看讲"CSS 语法、标签/类/id 选择器、颜色字体"的几集，选看）：https://www.bilibili.com/video/BV14J4114768/

任务（后做）

新建 style.css 和 styled.html，用外部样式表给 Day_1 的自我介绍页面加样式：

1. <head> 里用 <link rel="stylesheet" href="style.css"> 引入
2. 标签选择器：给 body 设背景色、h1 设文字颜色
3. 类选择器：定义 .highlight 背景高亮，给某段文字加上
4. id 选择器：定义 #title，给标题设更大字号、居中

完成标准

• 外部样式表生效（改 style.css 页面就变）
• 标签/类/id 三种选择器都用到了
• 能说出 .类名 和 #id 的区别

提交方式：把 styled.html 和 style.css 代码贴在当日工单评论里。

参考解答（先做再看）

<!-- styled.html -->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>关于我</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 id="title">我叫张三</h1>
    <p class="highlight">我是web部的新成员。</p>
    <p>这是加过样式的页面。</p>
  </body>
</html>

/* style.css */
body {
  background-color: #f0f0f0;
}

h1 {
  color: #2c7be5;
}

#title {
  font-size: 40px;
  text-align: center;
}

.highlight {
  background-color: yellow;
}