HTML引入CSS样式三种方法及优先级
来源:互联网 发布:淘宝手绘兼职 编辑:程序博客网 时间:2024/05/18 20:49
方法
css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入外部CSS。有一点注意,样式表放在不同的地方,产生作用的范围不同(以下会说明)。
内联定义
内联定义,即在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>,如下示例
浏览器此时显示内容
链入内部CSS
CSS内链接是由<style></style>标记对放在<head></head>中,在<style>中有一个类型属性type,后面接test/css,表示CSS文本,语法格式如下:
<style type="text/css">
/*这里写CSS内容*/
</style>
示例如下:
效果图如下:
链接外部CSS
css外链接是把CSS文件放在网页外面,通过链接<link>使CSS文件对本网页的样式有效,就相当于C语言的.h文件喽。
<link>里面的属性有type、rel、href,其中type固定为text/css,rel(即样式表)固定为stylesheet,href自然指的就是css文件的地址了,语法格式为:
<link type="text/css" rel="stylesheet" href="css文件的存放地址">
示例代码如下:
web.css内容为
效果如下
三种样式范围及优先级
简而言之吧,
链接外部CSS:作用在引用该CSS文件的网页中。
链接内部CSS:只作用在该CSS文件的网页中。
内联定义:只作用在定义该样式的div层中,对其它层无效。
三种样式优先级
不知道以“优先级”这个词来形容是否合适,专业的如果看到莫怪。下面以代码效果说明:
我在外部CSS文件内定义class的div1背景颜色为红色,内部CSS定义为黑色,内联定义为绿色,效果图如下:
显示为绿色,好吧,内联定义优先级最高。
然后我再把内联定义去掉,比较一下内部CSS和外部CSS的优先级,如下
此时效果图如下:
恩,就这样了,内部CSS次之,外部CSS优先级最低。重要的话说三遍,优先级:内联定义最高、内部CSS次之、外部CSS优先级最低。或许我提优先级的时候,很多人感觉想想也应该是这样。恩,我也这样想的,不过还是验证一下呗,大周末的也没事儿,斗地主也没豆子了。
后语
脑袋里还有些对div模糊的,想写,不过下节写background的知识。
- HTML引入CSS样式三种方法及优先级
- 【Html】三种CSS样式的优先级
- HTML引入css样式的方法示例
- css 样式引入的优先级
- css三种引入方式的优先级
- css样式引用的几种方法及优先级关系
- css样式引入方法
- css三种样式表区别,优先级。
- css 三种样式的优先级问题
- HTML三种样式引入方式
- html Css 样式的引入
- css引入样式的几种方法
- CSS从基础到熟练学习笔记(一)引入CSS样式的三种方式以及多种样式的优先级
- HTML引入CSS的三种方式
- HTML 引入CSS 三种方式
- Html引入css的三种方式
- HTML引入CSS的三种方式
- CSS样式选择器及优先级
- 双弹簧系统中最小势能问题的基础优化算法研究
- 2005 第几天
- 第七课——项目【1-3】
- jsp基础
- SpringMVC三种方法返回值
- HTML引入CSS样式三种方法及优先级
- ArrayList源码分析
- Qtopia-2.2.2在x86平台编译--错误修改总汇
- 60,#Pragma mark 内容 的作用
- 网页图片预加载
- java.sql.SQLException: Your password has expired. To log in you must change it using a client that s
- Apache服务器配置Php7
- 更新CentOS中的python(从2.6.X到2.7.X)
- java中static关键字用法