课程目标 初步了解什么是CSS，掌握基本的CSS概念，语法，学习如何设置一些简单的样式 任务描述 打开昨天编辑的 Codepen，在中间CSS的窗口，加上下面的代码
h2{ font-size: 32px; } li { color: orange; }阅读（一） 1.阅读MDN的文字样式，先看看字体颜色，种类几个基础的属性设置。 2.W3School中的文字样式部分和W3School字体部分 阅读笔记 1.颜色 color 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 text-decoration 属性放置在文本下方或上方的线 (underline overline)。
color 也可以接受任何合法的 CSS 颜色单位, 比如:
p { color: red; }这将导致段落变为红色，而不是标准的浏览器默认的黑色
2.字体种类 使用 font-family 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font. 下面是一个简单的例子:
p { font-family: arial; }这段语句使所有在页面上的段落都采用 arial 字体。 3.字体大小 字体大小 (通过 font-size 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，在调整字体大小时，最常用的单位是：
px (像素): 将像素的值赋予给你的文本。这是一个绝对单位。em: 1em 等于我们设计的当前元素的父元素上设置的字体大小 。rem: 这个单位的效果和 em 差不多。4.font-style：用来打开和关闭italic（斜体）
normal：将文本设置为普通字体italic：如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用oblique状态来模拟italicoblique：将文本设置为斜体字体的模拟版本，也就是普通文本倾斜的样式应用到文本中5.font-weight：设置文字的粗体大小。
normal，bold：普通或者加粗的字体粗细lighter，bolder：将当前元素的粗体设置为比起父元素粗体更细或更粗一步。100-900：数值粗体值6.文字阴影 使用 text-shadow 属性。这最多需要 4 个值，如下例所示：
text-shadow: 4px 4px 5px red;值1：阴影与原始文本的水平偏移，可以使用大多数的CSS单位，但是px是比较合适的，这个值必须指定。 值2：阴影与原始文本的垂直偏移，这个值必须指定。 值3：模糊半径，更高的值意味着阴影分散得更广泛，如果不包含此值，则默认为0，这意味着没有模糊。 值4：阴影的基础颜色。如果没有指定，默认为black。
7.文本对齐 text-align 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：
left: 左对齐文本。right: 右对齐文本。center: 居中文字justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。8.text-decoration：设置/取消字体山的文本装饰。
none：取消已经存在的任何文本装饰underline：文本下划线overline：文本上划线line-through：穿过文本的线 可一次接受多个值9.行高 line-height 属性设置文本每行之间的高。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的1.5倍，你可以使用这个:
line-height: 1.5;10.字母和单词间距 letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。 11.其他一些值得看一下的属性
Font 样式:font-variant: 在小型大写字母和普通文本选项之间切换。 font-kerning: 开启或关闭字体间距选项。 font-feature-settings: 开启或关闭不同的 OpenType 字体特性。 font-variant-alternates: 控制给定的自定义字体的替代字形的使用。 font-variant-caps: 控制大写字母替代字形的使用。 font-variant-east-asian: 控制东亚文字替代字形的使用, 像日语和汉语。 font-variant-ligatures: 控制文本中使用的连写和上下文形式。 font-variant-numeric: 控制数字，分式和序标的替代字形的使用。 font-variant-position: 控制位于上标或下标处，字号更小的替代字形的使用。 font-size-adjust: 独立于字体的实际大小尺寸，调整其可视大小尺寸。 font-stretch: 在给定字体的可选拉伸版本中切换。 text-underline-position: 指定下划线的排版位置，通过使用 text-decoration-line 属性的underline 值。 text-rendering: 尝试执行一些文本渲染优化。
文本布局样式：text-indent: 指定文本内容的第一行前面应该留出多少的水平空间。 text-overflow: 定义如何向用户表示存在被隐藏的溢出内容。 white-space: 定义如何处理元素内部的空白和换行。 word-break: 指定是否能在单词内部换行。 direction: 定义文本的方向 (这取决于语言，并且通常最好让HTML来处理这部分，因为它是和文本内容相关联的。) hyphens: 为支持的语言开启或关闭连字符。 line-break: 对东亚语言采用更强或更弱的换行规则。 text-align-last: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。 text-orientation: 定义行内文本的方向。 word-wrap: 指定浏览器是否可以在单词内换行以避免超出范围。 writing-mode: 定义文本行布局为水平还是垂直，以及后继文本流的方向。
阅读（二） 认真阅读以下几个内容：
MDN-CSS 介绍 MDN-CSS如何工作 MDN-CSS 语法 MDN-选择器 MDN-简单选择器 MDN-属性选择器 然后可以暂时跳过伪类选择器，开始重新仔细看文本相关的样式
MDN-基本文本和字体样式 阅读笔记 1.什么是CSS？ CSS（层叠样式表）用于对网页进行样式设置和布局-例如，更改内容的字体，颜色，大小和间距，将其拆分为多列，或者添加动画和其他装饰性功能。 2.将CSS应用于HTML 首先，让我们研究一下将CSS应用于文档的三种方法：使用外部样式表，内部样式表和内联样式。
外部样式表 外部样式表在带有.css扩展名的单独文件中包含CSS 。这是将CSS引入文档的最常见和最有用的方法。您可以将一个CSS文件链接到多个网页，并使用相同的CSS样式表对它们进行样式设置。在CSS入门中，我们将外部样式表链接到了我们的网页。 可以从HTML 元素引用外部CSS样式表： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html> 内部样式表 内部样式表位于HTML文档中。要创建内部样式表，请将CSS放在<style>HTML 内包含的元素内<head>。内部样式表的HTML可能如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html>内联样式 内联样式是影响style属性中包含的单个HTML元素的CSS声明。HTML文档中内联样式的实现可能如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> <p style="color:red;">This is my first CSS example</p> </body> </html>3.什么是选择器？ CSS选择器是CSS规则的第一部分。它是元素和其他术语的一种模式，它告诉浏览器应选择哪些HTML元素以将规则内的CSS属性值应用于它们。 4.选择器类型
类型，类别和ID选择器该组包括针对HTML元素（例如）的选择器<h1>
h1 { }它还包括针对一个类的选择器：
.box { }或者，ID：
#unique { } 属性选择器 这组选择器为您提供了基于元素上某个属性的存在来选择元素的不同方法： a[title] { }甚至根据具有特定值的属性的存在进行选择：
a[href="https://example.com"] { } 伪类和伪元素 这组选择器包括伪类，它们为元素的某些状态设置样式。:hover例如，伪类仅在元素被鼠标指针悬停时才选择它： a:hover { }它还包括伪元素，这些伪元素选择元素的某个部分而不是元素本身。例如，:first-line始终选择元素内的第一行文本（
在下面的情况下为a），就像将a 环绕在第一条格式化的行上然后选中一样。
p:first-line { }5.组合器 最后一组选择器组合了其他选择器，以定位文档中的元素。例如，以下示例<article>使用子组合器（>）选择了元素的直接子段：
article > p { }编码 我的编码内容见下： 点击我的编码地址
验证 回顾以下自己是否已经掌握以下概念：
什么是CSS，CSS是如何工作的CSS的基本语法是怎样的CSS选择器是什么概念，简单选择器和属性选择器是什么文本样式都有哪些相关属性，对应哪些值