CSS 样式表根本语法

  • 行内样式表语法：

    <标签名  style="款式属性名 : 款式属性值值 ;"></标签名><div style="width: 100px;height: 100px;background: skyblue;"></div>

  • 外部样式表：

    <style>  选择器 {      款式属性名 : 款式属性值值 ;   }</style><style>      div {          width: 100px;          height: 100px;          background: skyblue;      }  </style>

  • 内部样式表

    1. 创立一个CSS文件，在CSS文件中书写款式
    2. 在html文件中应用<link>或@import引入内部款式文件
      <link rel="stylesheet" href="款式文件门路">  <style> @import url("款式文件门路") </style>

    1. link 与 @import 区别

      • link 是HTML的标签，@impost是CSS提供的一种形式
      • link在加载时，页面与款式同时加载，@import在加载时，先加载完页面在加载款式
      • @import只有IE5以上版本可能反对
      • JS操作DOM时，只能应用link标签

样式表之间的权重关系

  • 行内样式表 > 外部样式表与内部样式表
  • 外部样式表与内部样式表权重雷同，当款式雷同时，后写的笼罩先写的款式
  • 权重高的样式表会笼罩权重低的样式表，这体现了样式表的层叠性