网页设计必备工具 firefox Web Developer插件 CSS工具组教程
该插件在火狐浏览器中安装。Web Developer 插件强大的功能超乎你的想象,用于CSS网页布局开发调试只是它强大功能的一部分,对于网络程序的开发也提供了非常强大的辅助设计功能,我们不将它完全的展开探讨,我们仅针对CSS网页布局开发调试对它进行了解,有兴趣的朋友可以详细了解
该插件在火狐浏览器中安装。Web Developer 插件强大的功能超乎你的想象,用于CSS网页布局开发调试只是它强大功能的一部分,对于网络程序的开发也提供了非常强大的辅助设计功能,我们不将它完全的展开探讨,我们仅针对CSS网页布局开发调试对它进行了解,有兴趣的朋友可以详细的研究一下它的强大功能。
CSS工具 是我们需要了解的重点,它提供了许多功能来辅助我们查看网页,废话少说,我们往下深入,看图片先:
1、Disable Style 禁用样式 可以用来禁用当前页面的某些或全部样式的显示。
·All Style 禁用所有样式,页面中将没有任何样式效果。
·Browser Default Styles 应用浏览器默认样式,意义不大的功能。
·Embedded Styles 禁用放置在页面中 的内部样式表,其它无影响。
·Inline Styles 禁用行间样式表,即使用style=""形式的将不显示。
·Linked Style Sheets 禁用以link标签链接外部样式表。
·Print Sytles 禁用打印样式表。
·Individual Style Sheet 单独设置所链接的外部样式表是否显示。例如:当前页面链接了三个外部样式表,1.css、2.css、3.css我们可以通过此功能将某一个样式表禁用。请你注意这个功能其实是非常有用的,可以帮助我们在调试时找到问题是出在哪里,我们禁用某个样式,看引发的问题是不是依然存在。如果禁用了某一个样式,问题消失了,那一样是这个被禁用的样式表文件中的某些设置出现了问题。
2、Display CSS By Media Type 按媒体的类型显示样式。此功能与此类似。不过目前只支持两种媒体类型:掌上设备、打印。
3、View CSS 用来查看CSS文件代码,点击该命令会打开一个新的FF标签页,显示当前页面的CSS,如果当前页面Link有多个CSS文件,会给出该文件的URL,或者显示出此样式为行间样式或内部样式。如下图:
4、View Style Information 查看样式信息。非常实用的学习与辅助设计功能,在点击开启这个选项以后,在FF的状态栏,会给我当前鼠标所在位置的样式信息。鼠标停留在某一个元素上时,也会显示出该元素在当前CSS样式表中的层次。这个功能可以非常方便的学习别人的CSS网页布局设计,我们在浏览他人的作品里,对某一效果不知道如何实现,我们可以应用这一功能立刻找到所应用的样式,知道它的层次关系,可以在CSS文件中找到相应的编码。此功能的效果如下图:
5、Add User Style Sheet 增加用户样式。我们可以对当前页面的样式设置自己浏览时的样式,网站的当前页面能够按自己编写的样式来显示。我们在学习他人的作品时,可以进行举一反三的改进,或进行其它的优化。我们在设计自己的页面时,这也可以使我们对文件进行临时修改,立即查看效果。进行细节的微调与设计。
6、Edit CSS 编辑CSS。这是Web Developer 插件最大的亮点之一,是我们最常用到的功能。点击这个命令,FF左侧打开一个编辑窗口,将已有的CSS样式已经放置其中了,如果有N个CSS文件组成,会列出标签式的选项卡,我们可以随意的切换。显示出的CSS编辑,我们可以在这个窗口中随意的更改与编辑,并且右侧的网页将按修改后的样式实时显示出来。如果我们改变了h1的样式,则在右侧的网页窗口中立即可以看到编辑后的效果!如下图:
Web Developer插件的这个功能,我不用多说,大家也可以明白它可以干什么了。我们可以在开发网站时,在查看效果的同时,可以用此功能直接打开CSS文件进行编辑,并随时掌握修改后的成效,修改满意了,点击窗口上方的保存按钮,可以将当面样式表保存到指定的位置。真正实现了便捷的辅助设计与开发。我们学习别人的作品,可以用它来查看网页上的CSS文件,查看别人的编码,试着修改别人的编码并可以立即查看到变化后的效果,思考别人为什么这样写,为什么这样进行设置,有什么道理。以此来学习,我们可以更方便的学习优秀网站的CSS技术应用。
7、Use Border Box Model 使用边框式盒模型,这是一个并不常用的功能,你可以点选此命令查看一下页面的变化。
转载自:<http://www.jb51.net/web/8584.html>
网页设计必备工具 firefox Web Developer插件 CSS工具组教程的更多相关文章
- 15个网页设计必备的Google Chrome 扩展
2011年第一篇,翻译自freelancefolder的一篇文章.以下为译文内容: 最近,我将Google Chrome作为了我的主力浏览器,同时,将其作为我设计和开发网页的工具,尽管我还时常会去Fi ...
- 推荐十几款Firefox web开发插件(转载)
开发工具 Web Developer 1.1.8 https://addons.mozilla.org/en-US/firefox/addon/60by chrispederick The Web ...
- 网页设计中常用的Web安全字体
但多数情况下,考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写,这里整理了19个Web安全字体,让你无需任何顾虑的情况下畅快使用. 1, Arial 微软公司的网页核心字体 ...
- 基于Spring设计并实现RESTful Web Services(转)
基于Spring设计并实现RESTful Web Services 在本教程中,你将会使用Spring来创建一个具有生产力的RESTful网络服务. 为什么用RESTful网络服务? 从和Amazon ...
- Firefox必备的24款web开发插件
from: 软件过滤: 排序:收录时间 | 浏览数 网页开发FireFox插件 Firebug Firebug是Firefox下的一款开发类插件,现属于Firefox的 五星级强力推荐插件之一.它集H ...
- 火狐插件火狐黑客插件将Firefox变成黑客工具的七个插件
目前很多插件不支持 Firefox 3.5 哦1. Add N Edit Cookies 查看和修改本地的Cookie,Cookie欺骗必备. 下载:http://code.google.com/p/ ...
- 34款Firefox渗透测试插件工具
工欲善必先利其器,firefox一直是各位渗透师必备的利器,小编这里推荐34款firefox渗透测试辅助插件,其中包含渗透测试.信息收集.代理.加密解密等功能. 1:Firebug Firefox的 ...
- Web设计者和开发者必备的28个Chrome插件
摘要 对于许多Web设计者和开发者来说,Firefox浏览器是无法超越的,对于其他人Chrome正在蚕食Firefox的浏览器市场. 在过去的两年,谷歌Chrome浏览器的发布以来,引起了人们激烈争论 ...
- FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
随机推荐
- android jni java类型与c语言类型互换
1.java String转换 C str char* Jstring2CStr(JNIEnv* env, jstring jstr) { char* rtn = NULL; jclass clsst ...
- python读文件和写文件
f=open('D:\\wangdongjie\\files\\webservice\\baidu\\3.txt','r+') f.write('中国电视台1][][23qwe12f我是一个小小的石头 ...
- Qt教程
https://blog.csdn.net/louis_815/article/details/54286544 软件下载:http://download.qt.io/ https://blog.cs ...
- tableView刷新指定的cell 或section和滚动到指定的位置
转自:http://blog.csdn.net/tianyou_code/article/details/54426494 //一个section刷新 NSIndexSet *indexSet=[[N ...
- CodeForces 644B【模拟】
题意: 查询数 和 最大的队列容量+1: 按时间顺序 ti代表,第i个出线的时间: di代表,第i个需要处理的时间: 对于第i个输出他所需要的时间完成,或者拒绝进入输出-1: 思路: 真是MDZZ了, ...
- HDU5894【组合数学】
题意: 现在 m个考生人需要坐在有n个座位的圆桌上. 你需要安排位置,使得任意两个考生之间相距至少k个位置. 桌子有编号,考生a和b交换位置视作一种方案,问有多少方案,mod 1e9+7. (0 &l ...
- hdu5883【欧拉通路】
题意:n个点m条无向边的图,找一个欧拉通路/回路,下标是p1,p2,p3-pt,然后使得ap1XORap2XOR-XORapt这个值最大. 思路: 首先要判断一下这个图是不是联通的,用并查集就好了,然 ...
- atcoder057D(组合数模板)
题目链接:http://abc057.contest.atcoder.jp/tasks/abc057_d 题意:给出n个数,可以选择x~y个数,使其平均值最大,求其最大平均数以及选择方案数. 思路:只 ...
- Node.js 的回调模式
我们都知道在javaScript中,如果在head标签里面引入script脚本,在打开web的时候,浏览器会先加载head中的信息,再加载body的信息: 如果head中有link标签,浏览器会开启一 ...
- DOM0、DOM2级事件
JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...