HTML页面引入CSS的几种方式及区别

1. 使用HTML标签的style属性

如:<p style="font-size:12px; color: blue">

这种方式的优点:分散灵活方便;

缺点:缺乏整体性和规划性,不利于维护,维护成本高;

这种方式的CSS渲染的优先级要高于其它三种。

2. 将样式代码写在<style></style>标签中

通常将style标签放到HTML文件<head></head>标签里

如:<html><head><style> div { background: #fff; } </style></head></html>

此种方式的优点:单个页面内的CSS代码具有统一性和规划性,便于维护。

缺点:多个页面之间CSS复用仍然不够。

3. 使用<link>标签,引入外部CSS文件

<link rel=‘stylesheet‘ type=‘text/css‘ href = ‘/css/base.css‘>

外部CSS文件:base.css:

p { color: #000}

...

此种方式的优点:一个页面可以引入多个外部CSS文件,方便CSS代码复用,方便维护;

目前应用做多。

缺点:代码量集中,容易混乱。

4. 使用@import,引入CSS文件

这种方法既可以用在<style>标签里,也可以用在外部CSS文件中,如:

@import url (‘/css/list.css‘)

特点:引入方便,但性能可能较差

使用link 标签和@import区别:

1.  范畴不同:  link是HTML标签,除了加载CSS之外,还可以定义其他如RSS事务;@import属于CSS范畴,只能加载CSS;

2.  加载顺序不同:link引入CSS时,在页面加载时同时加载,而@import需要页面完全载入以后加载;

3.  兼容性差别: link是XHTML标签,因此无兼容问题,而@import是在CSS2.1提出的(IE5以上才能识别),因此低版本的浏览器不兼容;

4.  是否支持JS DOM改变: link支持使用JavaScript控制DOM改变CSS样式,@import不支持;

5.  权重不同: link方式样式的权重高于@import样式的权重。

时间: 2024-08-08 13:53:47

HTML页面引入CSS的几种方式及区别的相关文章

页面引入css用link和import的区别

假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel="stylesheet" type="text/css" href="a.css"> 2.使用import <style type="text/css"> @import url(a.css); </style&

PHP中引入文件的四种方式及区别

文件加载语句:include,require,include_once,require_once include,require: require函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require 所指定引入的文件,使它变成 PHP 程序网页的一部份.include函数一般放在流程控制的处理部分中.PHP程序网页在读到 include的文件时,才将它读进来.这种方式,可以把程序执行时的流程简单化. 1 include有返回值,而require没有. "requi

网页中使用css的几种方式简单介绍

网页中使用css的几种方式简单介绍: css在当前的网页中可以说是必须的,如果没有使用css,那么这个网页一般丑陋的难以想象,下面就介绍一下网页使用css的几种方式,希望对初学者能够有所帮助. 一.内联样式: 所谓的内联样式就是卸载标签之内的样式,代码如下: <div style="color:red;font-size:10px"></div> 也就是使用style方式在标签内规定div的样式. 二.内部样式表: 所谓内部样式表,就是样式表写在当前页面,而不是

HTML中使用CSS的几种方式介绍

HTML中使用CSS的几种方式介绍:CSS的重要性咱们就不多说了,加入没有CSS的话,网页的显示方式可能枯燥无味,甚至毫无美观度可言,下面就简单介绍一下在html中使用css的几种方式,希望对初学者带来一定的帮助.一.引入外部样式表: <link type="text/css" href="css/style.css" /> 以上代码可以引入在同级目录下,css文件夹中名为style的样式表文件,这个路径可以是相对路径也可以是绝对路径. 关于路径可以参阅

js中获取页面元素节点的几种方式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <!-- 使ie以IE8的模式运行 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" > <scr

HTML引入CSS样式三种方法及优先级 CSS样式的写法

HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式:                  在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>: 内部样式(嵌入式):是由<style></style>标记对放在<head></head>中: 外部样式 :          

【转】【ASP.NET MVC系列】浅谈ASP.NET 页面之间传值的几种方式

ASP.NET MVC系列文章 原文地址:https://www.cnblogs.com/wangjiming/p/6275854.html [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP.NET框架 [05]浅谈ASP.NET MVC运行过程 [06]浅谈ASP.NET MVC 控制器 [07]浅谈ASP.NET MVC 路由 [08]浅谈AS

JavaScript实现页面跳转的五种方式

JavaScript实现页面跳转的五种方式 第一种:<script type="text/javascript" language="javascript"> window.location.href="login.jsp?backurl="+window.location.href;</script> 第二种:<script type="text/javascript" language=&qu

IOS开发笔记(2)页面之间传递数据几种方式比较

今天分享一下页面之间传值的几种方式 1.@property属性 这个不用多说了吧,当页面A 跳转到页面B,在class B中声明属性 @property (nonatomic, copy) NSString *name; 初始化B FirstViewController *firstVC = [FirstViewController new]; firstVC.name = @"name"; [self presentViewController:firstVC animated:YE