HTML入门第三课（学习使用CSS）

经过前面的学习，我们了解到CSS也是网页三剑客之一，然而对于它的确切含义以及如何使用，还有待我们进一步研究：

一、CSS的概述              

           css  -层叠样式表

           -网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

            而最终我们能看到的只有最上边的一层

           -设置网页中元素的样式

           css书写位置：3种

           css选择器：30种左右

           css样式：字体，文本，盒子模型，浮动，定位，背景····

二、CSS的语法

        选择器   声明块

        选择器：选中需要设置样式的部分  

        声明块：具体样式，是一组组名值对结构  

三、CSS的三种书写位置

1.第一种方式：内联样式/行内样式

    书写位置：

      在开始标签或者自结束标签内，写一个style属性，将css样式写在style属性值里

      可以写多组样式，样式与样式之间要用；隔开

    缺点：

      1、html结构和css表现耦合了，导致代码宽度变大，不方便查看

      2、不易修改

      3、权重很高，后期很难通过js或者其他框架去修改

显然，在实际开发过程中，这种方式的局限性较多，不推荐使用

示例：

示意图如下：

2.第二种方式：内部样式表

      书写位置：

        在head标签内，写一个style子标签，通过选择器选中对应的内容，

        在{}内书写css样式，可以写多组样式，样式与样式之间；隔开

      缺点：

        1、css样式还是写在html文件内，如果css样式过多，会导致html文件很长，不方便查看html结构

        2、不方便复用

在实际开发的过程中，如果css代码较少，且不会被复用，可以使用内部样式表

示例:

示意图如下：

3.第三种方式：外部样式表

      书写位置：

        在html文件外新建一个.css文件，在css文件内，通过选择器选中对应的内容

        在{}内书写样式，然后通过link标签，将css文件和html文件联系在一起

     

 在实际开发的过程中，如果css代码较多，代码可能被复用，推荐外部样式写法

示例：

示意图如下：

由于篇幅有限，关于CSS选择器等内容我将会在下一篇文章与大家分享。