第三周 CSS基础学习笔记

更改文本的颜色

我们通过修改h2元素的style属性的color值来改变文本颜色。

使用元素选择器来设置元素的样式

在 CSS 中，页面样式的属性有几百个，但常用的不过几十个

当我们只需要改变元素的某个样式时，行内样式最简单直观。当我们需要同时改变元素的很多样式时，层叠样式表往往是一个更好的选择。

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

<style>
</style>

在style样式声明区域内，可以创建一个元素选择器，应用于所有的h2元素。例如，如果你想所有h2元素变成红色，可以添加下方的样式规则：

<style>
  h2 {color: red;}
</style>

注意，在每个元素的样式声明区域里，左右花括号（{和 }）一定要写全。你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。

使用 class 选择器设置单个元素的样式 

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

一个 CSSclass声明示例，如下所示：

<style>
  .blue-text {
    color: blue;
  }
</style>

可以看到，在<style>样式声明区域里，创建了一个名为blue-text的class选择器。

可以将 CSSclass选择器应用到一个HTML元素里，如下所示：

<h2 class="blue-text">CatPhotoApp</h2>

在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。

使用 class 选择器设置多个元素的样式

通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。

 更改元素的字体大小

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

h1 {
  font-size: 30px;
}

 设置元素的字体家族

通过font-family属性，可以设置元素里面的字体样式。

如果想设置h2元素的字体为sans-serif，可以用以下的 CSS 规则：

h2 {
  font-family: sans-serif;
}

 引入谷歌字体

Google 字体是一个免费的字体库，可以通过在 CSS 里面设置字体的 URL 来引用

引入Google字体，你需要复制Google字体的 URL，并粘贴到你的 HTML 里面。

引入Lobster字体。复制以下代码段，并粘贴到代码编辑器顶部，即放到style标签之前。

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

设置font-family属性为Lobster，来使用Lobster字体。

字体如何优雅降级

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

当字体不可用，可以告诉浏览器通过 “降级” 去使用其他字体。

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

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

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

调整图片的大小

CSS 的width属性可以控制元素的宽度。图片的width宽度类似于字体的px（像素)值

在元素周围添加边框

CSS 边框具有style，color和width属性。

在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：

<img class="class1 class2">