【前端学习之HTML&CSS】-- CSS第一篇 – 为网页添加样式

本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。
本篇文章从HTML逐渐转到CSS中，css是为网页添加样式的语言，拥有很庞大的结构体系，我们将抽丝剥茧，从总体出发，先讲清楚样式的组成，再了解样式书写的位置，一步步出发，掌握样式的使用。

一、术语解释

h1{
    color: red;
    background-color:lightblue;
    text-align: center;
}

上述整体代码就是CSS的规则，即样式 = 选择器 + 声明块

1. 选择器(部分)：

用于选中元素，确定样式的返回，即大括号之前的内容；

写法：

• 1 元素选择器：输入元素名称，就可以选择对应元素；
  可以选择到页面上所有的同名元素

    /* 此时的CSS会选中所有的P元素 */
    p{
        color: aquamarine;
        background-color: lightcoral;
        text-align: left;
    }

• 2 ID选择器：# + ID名称，就可以选择对应ID值的元素；

    /* ID选择器,CSS中# + ID名称选择 */
    #test01 {
        color: blueviolet;
    }

• 3.类选择器：需要在元素中添加class属性对应，通过. + class名称对应，一个元素可以同时选择多个类；

    /* 类选择器 */
    .c1 {
        color: goldenrod;
        background-color: darkblue;
    }
    .big-center {
            font-size: 3em;
            text-align: center;
    }

    <p class="c1 big-center">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

实际操作中，我们可以写多个类选择器，分别对应多种样式，让元素去选择对应的样式，实现快速清晰的样式分布

2. 声明块

出现在大括号中，声明块中包含很多声明/属性，这一部分重点在下一篇博客中提及；
每一个属性表达了某一方面的样式，学习CSS主要就是学习多种多样的属性及其应用；
eg. color、background-color等

二、CSS代码书写位置

1. 内部样式表：

书写在style元素中，style元素最好放在head元素中；【在学习JS之后会更加有用】

2. 内联/元素样式表：

直接把style元素属性写在元素里
不需要选择器，且内联样式与内部样式不冲突时属性叠加，冲突时先以内联样式为准

    <P style="font-size: 3em;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</P>

3. 外部样式表【推荐】：

书写在独立的CSS文件中,通过link连接；

    <!-- 构建与CSS文件的连接 -->
    <link rel="stylesheet" href="./CSS/index.css">
    <!-- link元素在head中 -->
    <!-- 外部样式表 -->
    <P class="red-big-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</P>

推荐的原因：

1. 可以解决多页面样式重复的问题；
2. 有利于浏览器缓存，提高页面响应速度；
3. 有利于代码分离（HTML与CSS），更加容易阅读和维护；

总结

本篇博客是关于CSS内容的第一篇博客，重点讲述了添加样式的组成部分，以及在何处、如何添加样式，关于更多的样式种类，将会在下一篇博客中介绍，敬请期待。