web前端学习笔记--css书写位置

css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML的文件样式的计算机语言。

作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化

css规则：由两个主要的部分组成：选择器、以及一条或多条的声明

p{width：300px;font-size:14px;}

其中，p是选择器，{}里的是多条样式属性，每一条样式属性由属性名：属性值组成

书写位置：

根据书写位置的不同，可以分为内联式、内嵌式、外联式、导入式

• 内联式(行内式)

  书写位置:在 HTML 标签之上的 style 属性中书写 css 样式

  <div style="width: 100px;height: 100px;font-size:14px;"></div>
  

  缺点：

  1. 必须写在标签上，没有脱离HTML标签
  2. 让代码繁琐，不利于解读
  3. 复用率不高，只能针对一个标签，若是有多个标签有同样的样式，需要重复书写

• 内嵌式

  书写位置：在head标签内部有一个style标签内（在title之后）

  这里的style有个属性：type 属性值：text/css，一般都是默认的 ，不用写

  书写语法:在使用的时候，需要选择器去选中标签

  <style>
          div{
              width: 100px;
              height: 100px;
              background-color: pink;
          }
  </style>
  

  优点：

  1. 结构和样式初步分离
  2. 多个标签可以利用一段代码（标签之间用逗号隔开）

  缺点：

  1. 结构和样式没有完全分离，依然是在HTML的style标签内部
  2. css样式只能给一个HTML文件里使用，不能与其他HTML文件同时使用
  3. 当css代码较多的化，会造成文件头重脚轻

• 外联式

  书写位置：在一个单独的扩展名为 .css 的文件中

  书写语法：与内嵌式一样，需要用到选择器，但是不需要添加style标签

  引用：在head标签中，使用link标签去引用，

  属性名	属性值	说明
  rel	stylesheet	表示引入的外部文件与 HTML 之间的关系，样式表
  href	css文件路径	超文本引用
  type	text/css	表示加载时代码按照纯文本形式的 css 代码加载。 在HTML5中可以省略

  //外部文件
   div{
          width: 100px;
          height: 100px;
          background-color: pink;
      }
   //引用
    <link rel="stylesheet" href="index.css">
  

  优点：

  1. 实现HTML和css完全分离
  2. 多个HTML文件可以共用一个css文件
  3. 方便修改，修改一个css，可以让多个页面变化
  4. 实现css的分层，可以引入多个css文件

• 导入式

  书写位置：在内嵌式样式表 style 标签内部，或者在外联式样式表内部，导入其他的外部的 .css 文件。

  方式：利用@import url（路径)语句进行引入

  <style>
          @import url(css/01.css);
          div {
              width: 100px;
              height: 100px;
              background-color: pink;
          }
  </style>
  

  缺点：浏览器在加载网页的时候，会先加载HTML。再加载css，当网络不好的情况下，会给用户不好的体验感

总结：四种方式中，一些小案例可以使用内嵌式，但是在实际的工资和大型网站项目都是使用外联式