CSS的引入方式

来源：互联网发布：wiki.apache.org 编辑：程序博客网时间：2024/06/15 14:46

1、行内式：

直接在元素的style属性中，添加CSS样式：

<p id="article" style="color:#ffffff;font-family:'Microsoft JhengHei','微软雅黑' ">    Hello World</p>

优点：分散、灵活、方便、直观。

缺点：缺乏整体性和规划性和可重用性。

2、内嵌式（内部样式）：

包含在<style>元素内的CSS样式，可以出现在<html>元素内的任意位置，但是为了规范起见，通常在<head>元素内加入<style>元素，并在<style>内写CSS样式，规则不变：

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #article{color:#ffffff;font-family:"Microsoft YaHei UI" , "微软雅黑";}    </style></head>

优点：每个页面的CSS代码可能具有统一性和规划性，在同一个页面内部便于复用和维护。

缺点：在多个页面之间的可重用性不够高。

3、链接式：

将CSS代码写在一个单独的文件中，在<head>元素中，使用<link>元素直接引入该文件到页面中，建议使用相对

路径。一个页面可以多次使用<link>元素引入多个外部CSS文件。当引入多个CSS文件且不同的CSS文件有相同的

选择器，那么在位置上越靠后的CSS选择器优先级越高（覆盖原则）：

<head>    <meta charset="UTF-8">    <title>首页</title>    <link rel="stylesheet" href="style/reset.css" type="text/css">    <link rel="stylesheet" href="style/main.css" type="text/css"></head>

优点：使得CSS样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。

缺点：CSS代码由于分离到单独的CSS文件，容易出现CSS代码过于集中，若维护不当则极容易造成混乱。

4、导入式：

也是将一个外部CSS文件引入页面，在<style>元素内（为了规范性，通常也写在<head>元素中），使用@import关键字引入，CSS文件路径写在url（）中：

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

优缺点同链接式。

顺便一提：

导入式和链接式虽然结果一样，用法相似，但是他们也有很多区别：

1：<link>是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2：<link>引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3：<link>是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4：<link>支持使用Javascript控制DOM去改变样式；而@import不支持。

5：在兼容性和功能性上，<link>要比@import更好。

阅读全文

0 0