CSS引入方式

CSS的基本语法

• 1)CSS语法

  选择器{属性名称1:属性值1;属性名称2:属性值2;...}

• 2)CSS的引入方式

  • 1、行内样式

  语法：<标签 style="声明1;声明2;......">

  页面中的任何标签都有style属性,在style属性值里面写声明，可以写一条或者多条声明。注：每条声明后都必须写;,最后一条声明可省略;，但是建议不省略

  • 2、内部样式

  语法：
  <style type="text/css">
  选择器{声明1;声明2;声明3;.......}
  </style>

  • 3、外部样式表

    • 外链式：

    (1)首先需要建立一个css文件 ，然后里面 选择器{声明1;....}
    (2)在html页面中加入标签<link type="text/css" rel="stylesheet" href="要引入的css文件的路径"/>
    link标签可以写在页面中的任何位置，建议放在head里 优先加载

    • 导入式：

    <style type="text/css">
          @import url(要导入的css文件的路径);
    </style>
    

    • link和import导入外部样式区别

    （1）老祖宗的差别:
    link属于XHTML标签，而@import是CSS提供的一种方式。
    link标签除了可以加载CSS外，还可以做很多其它事情，比如定义RSS、定义rel连接属性等，@import只能加载css。
    （2）加载顺序的差别:
    当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
    （3）兼容性的差别:
    @import是CSS2.1提出的，所以老的浏览器不支持，@import只在IE5以上的才能识别，而link标签无此问题。
    （4）使用DOM控制样式差别:
    当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的.

• 3)css引入方式优先级问题

  1、内部样式表和外部样式表 后加载优先级高
  2、行内样式权重1000 ，非常高，正常情况下，优先级最高