这是我参与「第四届青训营」笔记创作活动的的第2天，此篇笔记为CSS基础知识总结

在第一节课我学习了HTML 是什么，以及如何使用它来组成页面。并且通过HTML制作简单的页面结构。今天我们就来对前端三大件中的CSS进行一个了解和掌握。我们知道CSS可以给HTML添加样式，例如颜色、大小、布局、特效、动画等。那么这些功能我们是如何实现的呢？

CSS语法基础

CSS的语法结构由选择器开头，通过选择器来选择需要改变的HTML标签的样式。紧接着输入一对大括号，在其内部输入其我们所需要的属性名和属性值，属性名和属性值中间用:连接。例如：

h1 {
     color: red;
     font-size: 5em;
 }

在这段CSS代码中，它表示我们将h1标签的颜色设为red，字体大小设为5em。

CSS引入方法

在简单了解了CSS的语法规则后，我们来看一下如何将CSS样式引入到HTML文档中。引入CSS样式一共有三种方法。

1、外部样式表，将CSS编写在在扩展名为`.css` 的单独文件中，并从 HTML`<link>` 元素引用它的方法：

<link rel="stylesheet" href="styles.css">

在HTML中CSS的外部引用一般位于开头的<head></head>标签中

2、内部样式表，将 CSS 放在 HTML 文件`<head>`标签里的`<style>`标签之中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>css基础</p>
  </body>
</html>

3、内联样式，内联样式表存在于 HTML 元素的 style 属性之中。

<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>

在上述代码中，我们直接在h1标签中通过style设置了它的样式，但在实际使用中，我们最好不要这样做。因为使用内联样式会使得我们在后续维护过程中变得非常困难且繁琐。并且它会使整个代码看起来十分的复杂且不好理解。

CSS工作原理

在这张图中，我们可以看到CSS的基本工作原理：
1.浏览器首先加载HTML文件。
2.将HTML文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式。
3.浏览器会获取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。 4.浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则应用在对应的 DOM 的节点中，并添加节点依赖的样式。
5.上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
6.将网页展示出来。
当浏览器遇到无法解析或者没有设置CSS样式的情况时，通常会采用一个默认样式。

CSS选择器

属性选择器：根据一个元素上的某个标签的属性来配置样式。

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择属性值以指定值开头的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有有某值的元素的元素

p[title]{
            color: black;
        }

关系选择器：根据其父元素，或子元素，或者兄弟元素来进行样式设置。

元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包括后代元素的元素叫祖先元素，父元素也是祖先元素
后代元素：直接间接被祖先元素包含的元素叫后代元素
兄弟元素：拥有相同父元素的元素

类选择器、id选择器：我们通常会对一个HTML标签设置id和class所以我们也可以通过他们的id和class属性进行样式选择。

类选择器：.box { }
id选择器：#unique { }

伪类选择器：伪类指用来描述一个元素的特殊状态，例如第一个元素、被点击的元素、鼠标移入的元素等

a:hover { }

选择器优先级：内联样式 > id选择器 > 类和伪类选择器 > 元素选择器。以在一个样式后加上important，则此时优先级最高：慎用！！！

块级元素和行内元素

块级元素特点：

结独占一行
允许设置宽高
可设置width、height、margin、padding

常见的块级元素有div、p、h1-h6、form、ul、ol等
行内元素特点：

不可以换行。
无法设置width和height属性。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他行内元素推开。
水平方向的内边距、外边距以及边框会被应用且会把其他行内元素推开。

常见的行内元素有span、a、label、strong、input等

我们通过对盒子display属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

弹性盒布局（Flexbox）

Flexbox 用于设计横向或纵向的布局，通常我们在想要进行flex布局的父元素上使用display: flex，则其所有的直接子元素都会按照flex进行布局。

Grid布局

rid 布局被设计用于同时在两个维度上把元素按行和列排列整齐。同flex一样，你可以通过指定display: grid来转到grid布局。总结此篇笔记只是对于CSS知识的一个大致掌握，仍需继续钻研。

前端-CSS基础|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天，此篇笔记为CSS基础知识总结