百度前端技术学院 零基础学院 Day3

第三天：让简历有点色彩

课程目标

今天我们会安排一些学习和练习，来初步了解什么是CSS，掌握基本的CSS概念，语法，学习如何设置一些简单的样式

任务描述

首先简单动下手，打开昨天编辑的 Codepen，在中间CSS的窗口，加上下面的代码

h1 {
    font-size: 32px;
}
p {
    color: orange;
}

如果你之前的HTML没有用到这些标签，可以把h1或者p换成你使用到的标签

然后你应该发现下面的预览区域发生了一些变化，这就是你通过CSS代码，对你页面的样式进行了设置。接下来，我们边读边做。

阅读

我们先跳着阅读一下，关于使用CSS来设置字体，阅读MDN的文字样式，先看看字体颜色，种类几个基础的属性设置。或者阅读W3School中的文字样式部分和W3School字体部分

编码

把刚才学习到的文字样式的相关属性，在codepen中实践，我希望你至少实践以下几个样式：

• color
• font-weight
• font-size

阅读

上面的阅读和练习主要是让你认真地体会一下写CSS的感觉，接下来，我们需要按部就班一些。希望你认真阅读以下几个内容：

• MDN-CSS 介绍
• MDN-CSS如何工作
• MDN-CSS 语法
• MDN-选择器
• MDN-简单选择器
• MDN-属性选择器

然后可以暂时跳过伪类选择器，开始重新仔细看文本相关的样式

• MDN-基本文本和字体样式

当然，你也可以选择阅读其它网站，比如W3School等上面相应的内容。

编码

现在，来用学到的样式来涂满你的简历吧，在你的codepen中实践以下CSS属性，将每个属性的每种值的效果都写出来看看。同时，确保你会使用到简单选择器和属性选择器。

• color
• font-family
• font-style
• font-weight
• font-size
• text-align
• text-decoration
• text-indent
• line-height
• text-shadow

提交

把你的 codepen 地址提交到作业里，因为是codepen，所以代码地址和预览地址一样即可。

验证

今天代码部分其实比较简单，主要是多尝试，学习之后，回顾以下自己是否已经掌握以下概念：

1、什么是CSS，CSS是如何工作的？

CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
处理HTML标记并生成DOM（Document Object Model,文档对象模型）——→浏览器展示DOM内容

2、CSS的基本语法是怎样的？

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

3、CSS选择器是什么概念，简单选择器和属性选择器是什么？

（1）简单选择器
①元素选择器：HTML元素及文档的元素，如p、h1、em、a，甚至可以是 html 本身；
②选择器分组：各元素选择器间半角逗号分开 如 h2, p { color：yellow;}
③通配选择器：显示为一个星号，该选择器可以与任何元素匹配，就像是一个通配符。如 * {color: red;}
④类选择器： 类名前加（.）如 .warning {font-weight: bold;}
⑤类选择器组合元素选择器：如 p.warning {font-weight: bold;}，选择器会匹配class属性包含warning的所有p元素。
⑥多类选择器： p.warning.help {color: red;}，选择器会匹配class属性同时包含warning和help的所有p元素。
⑦ID选择器：#，会使用仅一次，不能组合使用，因ID属性不允许有空格的词列表。

（2）属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

4、文本样式都有哪些相关属性，对应哪些值？

1、文本缩进：text-indent
2、文本对齐：text-align
3、字间隔：word-spacing
4、字母间隔：letter-spacing
5、字母转换：text-transform
6、文本装饰：text-decoration
7、处理空白符：white-space
8、文本方向：decoration
9、文本颜色：color
10、背景颜色：background-color
11、文本阴影：text-shadow