CSS简介

1.什么是CSS？

        CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

2.HTML和CSS之间的关系？

        HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
        CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
        HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML。

3.通过CSS来修改样式有什么好处?

        不用记忆哪些属性属于哪个标签。
        当需求变更时我们不需要修改大量的代码就可以满足需求。
        在前端开发中CSS只有一个作用, 就是用来修改样式。

4.CSS语法。

4.1 CSS声明（CSS declarations）

        CSS语言的核心功能就是为特定的属性设定特定的值，CSS引擎通过计算出声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。

4.2 CSS声明块（ CSS declaration blocks）

        将多个CSS声明写在一起，每个CSS声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。使用“{  }”将多个CSS声明括起来，这样就构成了一个CSS声明块。

 4.3 CSS规则集  

        1.选择器（Selector）**HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

        2.声明（Declaration）**一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

        3.属性（Properties）**改变 HTML 元素样式的途径。（本例中 color 就是元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

        4.属性的值（Property value）**在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

        5.注意其他重要的语法：每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。在每个声明里要用冒号（:）将属性与属性值分隔开。 在每个规则集里要用分号（;）将各个声明分隔开。

 5.CSS的引入方式。

5.1 内联样式(行内样式)

        缺点：样式与结构冗余

        优点：优先级较高

        内联样式表就是把css代码直接写在现有的HTML标签中，具体的使用方法如下面所示：

<div style="color:red">设置文字的颜色为红色</div>

        这里要注意：样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。多个css样式写在一起的效果如下面所示：

<div style="color:red;font-size:20px">
    设置字体颜色为红色，并且字体大小为20px
</div>

        这种样式只会对当前标签起作用，在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用

5.2 内部样式表

        缺点：样式的复用率较低

        优点：样式与结构分离

        将样式表编写到head中的style标签中

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

       使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护
注意点:
        style标签要写在head标签的开始标签和结束标签之间(也就是和title标签是兄弟关系)

​        style标签中的type属性其实可以不用写, 默认就是type="text/css"

​        设置样式时必须按照固定的格式来设置. key: value;其中:不能省略, 分号大多数情况下也不能省略。

5.3 外部样式表

        优点：样式与结构分离，解耦；样式的复用率高（框架:例如bootstrap）

        共用，定义好的css文件可以应用到多个页面中。

  1.将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

        将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

2.@import url()，还可通过import方式导入CSS文件

        @import引入方式会先加载html，再加载css；当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用；

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

5.4 引入方式的优先级

        行内样式>内部样式/外部引入

        就近原则：哪一种设置方式距离元素最近，谁的优先级更高；