基础CSS

一：更改字体颜色
我们通过修改 h 元素的 style 属性来改变文本颜色。

我们需要修改 color 属性值。

以下是将 h2 元素设置为蓝色的方法：

请注意，需要在内联 style 声明末尾加上 ;。
二：使用元素选择器来设置元素的样式

在 CSS 中，页面样式的属性有几百个，可以用来改变元素在页面上的外观。

当你输入

就可以用行内 CSS 设置 h2 元素的样式。

这是指定元素样式的一种方法，但有一个更好的方法来应用 CSS。

在代码的顶部，创建一个 style 声明区域，如下方所示：

在样式声明区域内，可以为所有 h2 元素创建一个 CSS selector。 如果想让所有 h2 元素在变成红色，可以添加下方的样式规则：

请注意，每个元素的样式规则都应该有开始和结束大括号（{ 和 }）。 还需要确保元素的样式定义在开始和结束样式标签之间。 你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
三：使用 class 选择器设置单个元素的样式

CSS 的 class 具有可重用性，可应用于各种 HTML 元素。

一个 CSS class 声明示例如下所示：

可以看到，我们在 style> 样式声明区域里，创建了一个名为 blue-text 的 class 选择器。 你可以这样将 class 应用于 HTML 元素：

注意在 CSS style 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有句点。
四：更改元素的字体

字体大小由 font-size 属性控制，如下所示：

h1 {
  font-size: 30px;
}

通过 font-family 属性，我们可以设置元素里的字体族名。

如果你想将 h2 元素的字体设置为 sans-serif，可以这样写：

五：字体如何优雅降级

所有浏览器都有几种默认字体， 包括 monospace、serif 和 sans-serif。

在字体不可用的时候，你可以告诉浏览器通过“降级”去使用其他字体。

如果你想将一个元素的字体设置成 Helvetica，但当 Helvetica 不可用时，降级使用 sans-serif 字体，那么可以这样写：

p {
font-family: Helvetica, sans-serif;
}

通用字体名不区分大小写。 同时，也不需要使用引号，因为它们是 CSS 中的关键字。

首先，添加 monospace 字体到 h2 元素里，它现在拥有 Lobster 和 monospace 两种字体。

在上一个挑战里，你已经通过 link 标签从谷歌字体库引入了 Lobster 字体。 现在让我们使用之前学习的 HTML 注释，将 Lobster 字体的引入注释掉，这样一来，这个引入的字体就会失效。 此时，你会发现 h2 元素降级到了 monospace 字体。

Note: 如果你的电脑里已经安装了 Lobster 字体，你就看不到这个降级过程，因为浏览器会在你的电脑中找到该字体。
六：调整图片的大小

CSS 的 width 属性可以控制元素的宽度。 和设置文本字号一样，我们会以 px（像素）为单位来设置图片的宽度。

例如，如果你想创建一个叫 larger-image 的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：

style>
.larger-image {
width: 500px;
}
/style>

七：在元素周围添加边框

CSS 边框具有 style、color、width 属性。

假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：

<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
  </style>

用 border-radius 添加圆角边框

使用 border-radius 属性来让它变得圆润。

border-radius 的属性值单位可以是 px（像素）。

除像素外，你也可以使用百分比来指定 border-radius 的值。

background-color 属性可以设置元素的背景颜色。

如果想将一个元素的背景颜色改为 green，可以在 style 里面这样写：

.green-background {
  background-color: green;
}

八：设置元素的 id

除了 class 属性，每一个 HTML 元素都有一个 id 属性。

使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面用它来选择和操作元素。

根据规范，id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。 因此，请不要给多个元素设置相同的 id。

九：调整元素的边距

每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。

padding 用来控制着元素内容与 border 之间的空隙大小。
外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。
如果你把元素的 margin 设置为负值，元素会变得占用更多空间。

给元素的每一侧添加不同的内边距
CSS 允许你使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。

如果不想每次都要分别声明 padding-top、padding-right、padding-bottom、padding-left 属性，可以把它们汇总在一行里面一并声明，像是这样：

padding: 10px 20px 10px 20px;

这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。

CSS 允许你使用 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值
同样，每个方向的外边距值可以在一行里面汇总声明，而无需分别通过 margin-top、margin-right、margin-bottom、margin-left 分别声明，比如：

margin: 10px 20px 10px 20px;

这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的外边距值。

十：使用属性选择器来设置元素的样式

我们已经通过设置元素的 id 和 class 来显示想要的样式。 这就是 ID 选择器和 Class 选择器。 另外，也还有其他的 CSS 选择器可以让我们给特定的元素设置样式。

我们需要使用 [attr=value] 属性选择器来修改 CatPhotoApp 中复选框的样式。 这个选择器使用特定的属性值来匹配和设置元素样式。 例如，下面的代码会改变所有 type 为 radio 的元素的外边距。

[type=‘radio’] {
margin: 20px 0px 20px 0px;
}

十一：绝对单位与相对单位
其实除了 px，CSS 也有其他单位供我们使用。

单位长度的类型可以分成 2 种：相对和绝对。 绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。

相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。 如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。

Note: 有些单位长度选项是相对视窗大小来改变值的， 这种设定符合响应式网页设计的原则。

十二:给 HTML 的 body 元素添加样式

现在让我们来讨论一下 CSS 中的继承。

每一个 HTML 页面都有一个 body 元素，我们也可以在 body 元素上使用 CSS 样式。

设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 body 中所设置的样式。

有时候，HTML 元素的样式会跟其他样式发生冲突。

就像 h1 元素不能同时设置绿色和粉色两种颜色。

Class 选择器的优先级高于继承样式
ID 选择器优先级高于 Class 选择器
内联样式的优先级高于 ID 选择器
Important 的优先级最高

十三：给 CSS 变量设置备用值

使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。

注意： 备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。 相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。

下面是操作方式：

background: var(–penguin-skin, black);

如果你的变量没有设置，这将会把背景设置为 black。 提示：这对调试代码也会很有帮助。

十四：通过浏览器降级提高兼容性

使用 CSS 时可能会遇到浏览器兼容性问题。 提供浏览器降级方案来避免潜在的问题会显得很重要。

当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。 举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。 此时，浏览器会尝试使用其它值。 但如果没有找到其它值，则会使用默认值，也就是没有背景色。

这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。 这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。

十五：继承 CSS 变量

当创建一个变量时，变量会在创建变量的选择器里可用。 同时，在这个选择器的后代选择器里也是可用的。 这是因为 CSS 变量是可继承的，和普通的属性一样。

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。

:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。 我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

十六：更改特定区域的变量

当你在 :root 里创建变量时，这些变量的作用域是整个页面。

然后，你可以通过在一个特定的选择器中再次设置这些变量来重写这些变量。

CSS 变量可以简化媒体查询的定义方式。

例如，当屏幕小于或大于媒体查询所设置的值，只要我们更新变量的值，那么使用了此变量的元素样式就都会更改。