css的引入方式以及优先级

css的简介以及引入方式

 

  • css的介绍

 

 

现在的互联网前端分三层：

    • HTML：超文本标记语言。从语义的角度描述页面结构。
    • CSS：层叠样式表。从审美的角度负责页面样式
    • JS：Javascript：从交互的角度描述页面行为

css：层叠样式表，CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。

简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。　

 

  • css的引入方式

    1. 行内样式

    2. 内接样式

    3. 外接样式

      • 链接式

      • 导入式

 

  • 行内样式：

最直接最简单的一种，直接对HTML标签使用  style=""（中间用分号区分各个属性键值对），例如：

缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。

  • 内接样式

内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，

例如：

 

<style type="text/css">
    /*2.内接样式*/
        p{
            color: red;
            font-size: 20px;
        }
    </style>

 

优缺点：页面使用公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。

 

  • 外接样式

    • 链接式（首选链接式）

　　　　　　链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了，

　　　　　　如：<link type="text/css" rel="stylesheet" href="style.css" />　　

　　　　　　优缺点：实现了页面框架代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便。

    • 导入式

　　　　　　导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。

      • 导入方式：

        • @import在html中使用，如下：

          <style type="text/css">
          @import url(style.css);
          </style>

        • @import在CSS中使用，如下：

          @import url(style.css);

  • 导入方式优先级　

    1. 就近原则

    2. 理论上：行内>内嵌>链接>导入

    3. 实际上，内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高。　　　　　　　　　　　　　　　

posted on 2018-05-22 17:38  弃疾  阅读(121)  评论(0)  编辑  收藏  举报

导航