注：内容来自https://www.freecodecamp.org/learn/

修改指定位置的颜色

通过在元素内指定style属性中的color可以设定特定位置元素的颜色。

<h2 style="color: blue;">CatPhotoApp</h2>

样式块为同类元素设定样式

在代码的顶部，创建一个style如下所示的块，即表示所有h2内容的颜色都会被设置成红色。需要注意的是，每个元素样式规均写在{}内，且每个属性设置结束均以;结尾。

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

自定义样式类

CSS可以自定义样式类，类名以英文句点开头，用于区分HTML元素自身的类。在调用时，类名前不用加英文句点.。可以在多个HTML元素调用自定义的样式类。

<style>
  .blue-text {
    color: blue;
  }
</style>
<h2 class="blue-text">CatPhotoApp</h2>

字体

字体大小通过font-size属性设置，其单位是px（像素），需要给出。

h1 {
  font-size: 30px;
}

字体类型通过font-family属性设置：

h2 {
  font-family: sans-serif;
}

除了使用系统的默认字体外，可以使用自定义字体，如引入google的字体库，它是免费的，引入前在CSS里设置字体的URL，操作方法是将字体的链接放到代码style标签之前。插入谷歌字体库中的Lobster字体的链接例子如下：

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

然后在style标签里使用该字体，如使用元素选择器将h2元素的font-family设置为Lobster：

<style>
  h2{
    font-family: Lobster;
  }
</style>

注意:字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。 例如，使用 "Open Sans" 字体需要添加引号，而 Lobster 则不需要。

可以在font-family后列两种字体，第二种字体为备用字体，即当第一种字体不可用时会使用第二种字体。

<style>
  h2 {
    font-family: Lobster,monospace;
  }
</style>

调整图片大小

CSS 的 width 属性可以控制元素的宽度。 和设置文本字号一样，我们会以 px（像素）为单位来设置图片的宽度。例如，如果你想创建一个叫 larger-image 的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：

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

同时在图片设置处加入类别声明：

<a href="#"><img class="larger-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

在元素周围添加边框

CSS 边框具有 style、color、width 属性。假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：

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

在一个元素上可以同时应用多个 class，使用空格来分隔不同 class 即可， 例如：

<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

用 border-radius 添加圆角边框

可以使用 border-radius 属性使图片的四个角变得圆润，该属性可加入到任一图片的class中，如下面两种都是可行的。设置使用像素单位px或者百分比都是可行的。

.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius:10px;
  }

或者

.smaller-image {
    width: 100px;
    border-radius:50%;
  }

给元素添加背景色

background-color 属性可以设置元素的背景颜色。如果想将一个元素的背景颜色改为 green，可以在 style 里面这样写：

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

同时在元素后加上该属性，如div元素：

<div class="green-background">
</div>

元素的 id

每一个 HTML 元素都有一个 id 属性，使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。根据规范，id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。 因此，请不要给多个元素设置相同的 id。设置 h2 元素的 id 为 cat-photo-app 的代码如下：

<h2 id="cat-photo-app">

如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。选择 id 为 cat-photo-element 的元素，并设置它的背景颜色为绿色。 可以在 style 标签里这样写：

#cat-photo-element {
  background-color: green;
}

注意在 style 标签里，声明 class 的时候必须在名字前插入 . 符号。 同样，在声明 id 的时候，也必须在名字前插入 # 符号。且自定义的类最好放在style里靠前的位置。

元素的边距

所有的 HTML 元素都是以矩形为基础。每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。padding 用来控制着元素内容与 边界之间的空隙大小，如其中的文本内容与边框的距离（若为0，则是内容紧挨边界），外边距 margin 用来控制元素的边框与周围最近的其他元素之间的距离，若为0，则开始重叠，若为负数，则开始占用更多空间。

padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值。

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

padding: 10px 20px 10px 20px;
margin: 10px 20px 10px 20px;

这四个值按顺时针排序：上、右、下、左。

属性选择器

属性选择器：下面的代码会改变所有 type 为 radio 的元素的外边距。

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

绝对单位与相对单位

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

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

在CSS中设置body元素样式

background-color设置背景颜色；color设置文本颜色；font-family设置字体类型。

<style>
  body {
    background-color: black;
    color:green;
    font-family: monospace;
  }
</style>

样式中的优先级

很多时候，你会使用 CSS 库， CSS 库中的样式会意外覆盖你的 CSS 样式。 如果想保证你的 CSS 样式不受影响，你可以使用 !important。

!important>行内样式 > `id`选择器 > 后申明的`class`选择器 > 先申明的`class`选择器 > `body`选择器

使用十六进制编码获得指定颜色

你知道在 CSS 里面还有其他方式来代表颜色吗？ 其中一个方法叫十六进制编码，简称 hex。Hexadecimals（或 hex，）基于 16 位数字， 它包括 16 种不同字符。 像十进制一样，0-9 的符号代表 0 到 9 的值。 然后，A、B、C、D、E、F 代表 10 至 15 的值。 总的来说，0 到 F 在十六进制里代表数字，总共有 16 个值。

在 CSS 里面，我们可以使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）。 例如，#000000 代表黑色，同时也是最小的值。

使用 RGB 值为元素上色

RGB 值与我们之前学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。

如果我们稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 * 16（即 256）种可能。 所以，RGB 从零开始计算，与十六进制代码的值的数量完全相同。

使用 CSS 变量一次更改多个元素

先创建一个自定义的CSS变量，为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可：

.penguin {
    --penguin-skin: gray;
  }

创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。

.penguin-top {
    background:var(--penguin-skin);
  }

因为引用了 --penguin-skin 变量的值，使用了这个样式的元素背景颜色会是灰色。 使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。

.penguin-top {
    background:var(--penguin-skin, black);
  }

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

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

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

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

继承 CSS 变量

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

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

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

更改特定区域的变量

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

如果在元素里创建相同的变量，会更改特定区域内该变量的值。

Basic CSS