• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS控制样式的三种方式(优先级对比验证)

CSS控制样式的三种方式(优先级对比验证)

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,优先级等相关知识,佚名 希望在学习及工作中可以帮助到您

好了,直入主题,大家都知道,CSS的中文名叫做层叠样式表,而CSS在控制样式的时候,有三种引入方式,分别是:

1>外部样式表 : 将样式规则直接写在*.css文件中,然后再*.html页面中通过<link>标签引入的方式
2>内部样式表 :(位于 <head> 标签内部)
3>内联样式 :(在 HTML 元素内部)

按照W3School网站(点这里直达)的说法,当同一个 HTML 元素被不止一个样式定义时,它们是有优先级之分的,如下,将优先级从小到大排列出来,其中4的优先级最高:

1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于 <head> 标签内部)
4.内联样式(在 HTML 元素内部)

对于这个结论,相信大家一定有很多疑问,而网上很多都是直接对官网的内容进行复制然后粘贴发布就算了,让我们非常厌倦和烦恼,所以,在这里让我们一起来验证对比下。

注意:本次验证主要针对后面3个优先级,关于浏览器缺省设置这个,相信大家都知道,他一定是最低的,我们在此就不过多的举例验证了。

一、验证环境的描述

浏览器:FireFox 22.0
语言:HTML 4.01/CSS
开发工具:Aptana Studio 3

二、使用三种方式直接对标签进行元素定义样式
1>首先,我们先直接使用外部样式表来定义div标签的样式:

xiaoxuetu.css


xiaoxuetu.html


<meta charset="UTF-8" /></p> <p> <link rel="stylesheet" href="css/xiaoxuetu.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div>外部样式表</div>
</body>
</html>

显示效果:



下面我们开始验证吧。

2>外部样式表 VS 内部样式表(先定义内部样式表,再引入外部样式表定义文件) 加入内部样式表,也就是说,直接在<head>标签中定义样式规则,这个时候我们修改一下xiaoxuetu.html中的代码:

xiaoxuetu.html


显示效果:



得出优先级结果:外部样式表 > 内部样式表

3>外部样式表 VS 内部样式表(先引入外部样式表定义文件,再定义内部样式表)这步很简单,其实就是直接将link标签剪切移动到上面到head标签中定义内部样式表的前面:

xiaoxuetu.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06检测用户浏览器是否支持CSS3的方法
  • 2017-08-06用CSS创建打印页面的具体步骤
  • 2017-08-06让多个div在同一行显示的样式及html代码
  • 2017-08-06CSS学习之四 浮动
  • 2017-08-06用条件注释判断浏览器版本解决页面兼容问题
  • 2017-08-06120个国外的非常优秀的CSS水平导航菜单
  • 2017-08-06CSS中使用clearfix清除浮动的方法
  • 2017-08-06利用css @viewport 做设备适配
  • 2017-08-06CSS3实现超慢速移动动画效果非常流畅无卡顿
  • 2017-08-06Html 页面的强制换行问题总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS中文字体对应的英文写法(常用整理)
    • CSS布局实例代码 两列布局实例
    • WEB标准心得之网页重构的思路
    • 通过绝对定位实现div重叠实例代码
    • 经验之谈 CSS网页布局避免滥用DIV元素
    • DIV+CSS 清除浮动常用方法总结
    • CSS实现强制不换行、自动换行、强制换行的css代码
    • div+css实现蓝色vista风格css导航菜单效果
    • CSS样式编写的简明指南
    • Css3新特性应用之形状总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有