CSS初识

概念：

CSS(Cascading Style Sheet),通常称为CSS样式表或层叠样式表（级联样式表）

作用：
- 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版画的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

CSS样式表

1.行内式（内联样式）

概念：

称为行内样式、行间样式，是通过标签的Style属性来设置

基本语法格式：

  <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。。

案例：

  <div style="color:red;font-size:12px;">我爱前端 前端真棒</div>

注意：
- style其实就是标签的属性
- 属性和值中间是:
- 多组属性之间用;隔开
- 只能控制当前的标签和嵌套在其中的子标签
缺点：

没有实现样式和结构分离。

2.内部样式（内嵌样式）

概念：

称为内嵌式，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

其基本语法格式如下：

  <head>
  <style type="text/CSS">
      选择器{
          属性1:属性值1;
          属性2:属性值2;
          属性3:属性值3;
      }
  </style>
  </head>

  <Style>
      div{
          colr:red;
          font-size:20px;
      }
  </style>

注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type="text/CSS"在HTML5中可以省略。
- 只能控制当前的页面。
缺点：

没有彻底分离。

3.外部样式（外链式）

概念：

成外链式，是将所有的样式放在一个或多个以CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文件中。

其基本语法格式如下

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

注意：
- link是一个单标签。
- link标签需要放在head头部标签中，并且指定link标签的三个属性。

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表，我们都可以省略。
href	定义所链接外部样式表文件deurl，可以是相对路径也可以是绝对路径。

4.三种样式表总结

样式表	优点	缺点	使用情况	控制范围
内联样式	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内嵌样式	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式	完全实现结构和样式相分离	需要引入	最多	控制整个站点（多）