关于前端学习:CSS样式初始CSS样式表

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>

  3. link 与 @import 区别

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

样式表之间的权重关系

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