html导入css样式的方法
在html网页中引入css样式表主要有一下四种方法
1、行内引入
<p style="width:100px;height:40px;color:red;"></p>
2、嵌入式
<style type="text/css">
p{
width:100px;
height:40px;
color:red;
}
</style>
3、导入式
<style type="text/css">
@import "style.css";
</style>
4、链接式
<link href="style.css" rel="stylesheet" type="text/css">
rel="stylesheet" 不能缺少,不然可能会使页面样式加载不了
css加载link和@import的区别,即3和4的区别
1)老祖宗的差别。link属于XHTML标签,而@import完全是css提供的一种方式。link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import就只能加载css
2)加载顺序的差别。当一个页面被加载的时候(就是浏览器浏览的时候),link引用的css会同时被加载,而@import引用的css会等到页面全部被下载完再加载。所以有时候浏览@import加载css的页面时,开始会没有样式(就是闪烁),网速慢的时候比较明显
3)兼容行的差别。由于@import是css2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签没有此问题
4)使用DOM控制样式时的差别。当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的
从上面的分析来看,还是link标签比较好。
html导入css样式的方法的更多相关文章
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- 重温JavaScript获取CSS样式的方法(兼容各浏览器)
众所周知,CSS样式有三种类型:行内样式.内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 . 一.行内样式获取相对简单,通过element. ...
- jquery操作css样式的方法
jquery操作css样式的方法(设置和获取)
- HTML文档中应用css样式的方法总结
在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表:2.使用style元素包含样式表:3.使用style属性,即内联样式 一.link标签链接外部样式表 先看一条较为标准的l ...
- 20190422-外部导入CSS样式之link、CSS@import、Sass分音
写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- JS中获取CSS样式的方法
1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...
- HTML使用CSS样式的方法
在html网页中引入css样式表主要有一下四种方法 1.行内引入 <p ></p> 2.嵌入式 <style type="text/css"> ...
随机推荐
- border:none;与border:0;的区别
border:none表示边框样式无,border:0表示边框宽度为0;当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为0. 当定义边框时,必须定义边框的显示样式.因为边框默认样 ...
- MongoDB(五)mongo语法和mysql语法对比学习
我们总是在对比中看到自己的优点和缺点,对于mongodb来说也是一样,对比学习让我们尽快的掌握关于mongodb的基础知识. mongodb与MySQL命令对比 关系型数据库一般是由数据库(datab ...
- tomcat 7/8 启动非常慢的解决方法
在日志中发现启动慢的地方: 2016-11-14 09:31:30.522 [localhost-startStop-1] INFO o.s.c.s.DefaultLifecycleProcessor ...
- QRCode二维码生成
pom配置 <dependency> <groupId>com.github.cloudecho</groupId> <artifactId>qrcod ...
- IE6-8下自定义标签的表现
IE6-8是支持自定义标签,但只支持<xxx-yyy />这样的形式,它会翻译成<xxx-yyy></xxx-yyy> 如果你想内套子标签会失败, <ms-k ...
- HDOJ(1348)二维凸包
Wall http://acm.hdu.edu.cn/showproblem.php?pid=1348 题目描述:有个国王想在他的城堡外面修围墙,围墙与城堡的最小距离为L,要求围墙长度最短.求围墙的长 ...
- javascript判断对象
var assert = require('chai').assert; describe('Array', function() { describe('#indexOf()', function( ...
- python3.5------用户的三次验证
笔者QQ: 360212316 逻辑图 代码 #/usr/bin/python # -*- coding: utf-8 -*- lock = open("black_user_list.tx ...
- php电话号码正则表达式常用例子
电话号码正则表达式(支持手机号码,3-4位区号,7-8位直播号码,1-4位分机号) 02 03 ((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{ ...
- LeetCode Bulb Switcher 319
变换灯泡颜色 There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off ...