前言

FreeCodeCamp是一个以“帮助人们免费学习编程”为主旨的非营利性组织，其网站收录了众多训练式题目。作为前端入门有较大的帮助。

英文版（源）地址：www.freecodecamp.org/

中文社区：chinese.freecodecamp.org/forum/t/top…

此系列博文为相关知识点记录，算是自己对前端入门的一个回顾。有空还是强烈建议去刷一遍原题+知识点

学习CSS基础部分

使用 CSS 样式主要有三种方式：

内联样式--你可以直接在 HTML 元素里使用style属性。
内部样式--你可以在style标签里面声明样式规则。
外部样式--你可以创建一个.css文件，然后在文件中编写样式规则，最后在文档中引用该文件。

尽管前两个方式也有人使用，但大部分开发人员更喜欢外部样式表，因为它可以将样式与元素分开，这提高了代码的可读性和重用性。

CSS 背后的思想是，通过选择器来定位 DOM（文档对象模型）的元素，然后将各种样式规则应用在元素上，从而改变元素在页面上的显示方式。

更改文本的颜色
- 我们通过修改h2元素的style属性的color值来改变文本颜色
- 请注意行内style最好以;来结束。
- <h2 style="color: red;">CatPhotoApp</h2>

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

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

使用 class 选择器设置单个元素的样式
- CSS 的class具有可重用性，可应用于各种 HTML 元素。

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

字体

更改元素的字体大小
- 字体大小由font-size属性控制

p {
      font-size: 16px;
    }

设置元素的字体家族
- 通过font-family属性，可以设置元素里面的字体样式。
引入谷歌字体
- <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">现在你可以设置font-family属性为Lobster，来使用Lobster字体。例子如下：font-family: FAMILY_NAME, GENERIC_NAME;.GENERIC_NAME是可选的，其他字体不可用时便作为后备字体
- 字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用"Open Sans"字体需要添加引号
字体如何优雅降级
- 所有浏览器都有几种默认字体。这些通用字体包括monospace，serif和sans-serif。当字体不可用，你可以告诉浏览器通过 “降级” 去使用其他字体
- 通用字体名字不区分大小写。同时，也不需要使用引号，因为它们是 CSS 关键字。

图片+div

调整图片的大小

 .smaller-image {
 width: 100px;
}

在元素周围添加边框
- 记得，在一个元素上可以同时应用多个class，通过使用空格来分隔。例子如下：

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

用 border-radius 添加圆角边框
用 border-radius 制作圆形图片
- 将border-radius的值设置为50%。
给 div 元素添加背景色

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

元素id与内外边距

设置元素的 id
- id属性应是唯一的。浏览器不强迫执行这规范，但是这是广泛认可的最佳实践。所以，请不要给多个元素设置相同的id属性
使用 id 属性来设定元素的样式
- 在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。
```
#cat-photo-form {
background-color: green;}
```
调整元素的内边距
- 每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）
调整元素的外边距
- margin（外边距）控制元素的边框与其他元素之间的距离
- 你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离
给元素添加负外边距
- 如果你设置元素margin为负值，元素会变得更大。
给元素的每一侧添加不同的内边距
- CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值。
给元素的每一侧添加不同的外边距
- CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。
使用顺时针方向指定元素的内边距
- padding: 10px 20px 10px 20px;这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。
使用顺时针方向指定元素的外边距
- margin: 10px 20px 10px 20px;这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的margin。
使用属性选择器来设置元素的样式
- [attr=value]属性选择器修改复选框的样式。这个选择器使用特定的属性值来匹配和设置元素样式

  [type='checkbox'] {
  margin-top: 10px;
  margin-bottom: 15px;
  }

单位

理解绝对单位与相对单位
- 单位长度的类型可以分成 2 种，一种是相对的，一种是绝对的。例如，in和mm分别代表着英寸和毫米。绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。
- 相对单位长度，就像em和rem，它们会依赖其他长度的值。就好像em的大小基于元素的字体的font-size值，如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。

样式优先级

给 HTML 的 Body 元素添加样式

 body {
 background-color: black;
}

从 Body 元素继承样式
样式中的优先级
- class优先级高于body继承的优先级
- 在<style>标签里面声明的class顺序十分重要。第二个声明始终优于第一个声明。
- ID 选择器优先级高于 Class 选择器
- 内联样式的优先级高于 ID 选择器
- Important 的优先级最高color: red !important;

总结来说 important>内联style="color:">id>class>body继承

颜色相关

使用十六进制编码获得指定颜色
使用十六进制编码混合颜色
- hex使用 6 个十六进制编码来表示颜色，2 个一组，分别代表着红（R），绿（G），蓝（B）。
- 0是十六进制里面最小的数字，表示着没有颜色。F是十六进制里面最大的数字，表示着最高的亮度。
使用缩写的十六进制编码
- 红色的#FF0000十六进制编码可以缩写成#F00。在这种缩写形式里，三个数字分别代表着红（R），绿（G），蓝（B）颜色。
使用 RGB 值为元素上色

body {
  background-color: rgb(0, 0, 0);
}

使用 RGB 混合颜色
使用 CSS 变量一次更改多个元素
创建一个自定义的 CSS 变量
- 创建一个 CSS 变量，你只需要在变量名前添加两个破折号，并为其赋值
- --penguin-skin: gray;
使用一个自定义的 CSS 变量
- CSS 属性可以通过引用变量名来使用它的值
- background: var(--penguin-skin);
给 CSS 变量附加回退值
- 使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。
- background: var(--penguin-skin, black);
层级 CSS 变量
- 因为层叠的效果，CSS 变量通常会定义在:root元素里
- 在:root创建的变量，在整个网页里面都能生效
更改特定区域的变量
- 如果在元素里创建相同的变量，会重写:root变量设置的值。
使用媒体查询更改变量
- 当屏幕小于或大于媒体查询所设置的值，通过改变变量的值，那么应用了变量的元素样式都会得到响应修改。
```
@media (max-width: 350px) {
 :root {

   /* add code below */
  --penguin-skin: black;
   /* add code above */
  --penguin-size: 200px;
 }
    
}
```

FreeCodeCamp学习点总结-CSS部分

前言

学习CSS基础部分

字体

图片+div

元素id与内外边距

单位

样式优先级

颜色相关