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

53次阅读

共计 559 个字符,预计需要花费 2 分钟才能阅读完成。

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 标签

样式表之间的权重关系

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

正文完
 0