Dreamweaver中设置CSS代码缩写及横排成一行的方法

  学习css的朋友可能都遇到,下载下些大站的源代码查看,会发现它的每个样式内的属性代码都是横排的较多,但自己在DW里生成出来的都是一个属性占一行,整个页面好长呀!有什么办法让css像一些大站那样排成一行呢?答案很简单,看下面的图文就清楚了,不过这个功能是dreamweaver cs3新增的功能,以前的版本好像没有哟!

  在DW CS3中的编辑——首选参数——代码格式,能看到一个css(s)...的按钮,点击这个按钮,在打开的窗口中可以根据自己的需要让css横排还是竖排了。哈哈,简单吧!设置过之后用代码视窗最后那个按钮格式化源码,这样整个页面的css都变你设置的样子了。


  但有些朋友要问了,我发现其它站的css源代码,有些属性是整合到一块的,而我的都是分散的,如:

  #layout { padding-top: 1px; padding-right: 2px; padding-bottom: 3px; padding-left: 4px; border-width:2px; border-color:#0033CC; border-style:solid; }

  从这行代码可以看出:border-width:2px; border-color:#0033CC; border-style:solid;这句代码是描述一条2px精细,颜色为蓝色、线型为实线的边框,这样看起来非常吃力,那么我们能不能把它整合到一块呢,当然可以。看:

  #layout { padding: 1px 2px 3px 4px; border: 2px solid #0033CC; }

  代码减少了,也方便阅读了,实现起来很简单,选编辑中的首选参数——css样式,把图中红框部分的选中就行了。


  以后也可以生成出大站风格的css了!

时间: 2025-01-19 11:10:35

Dreamweaver中设置CSS代码缩写及横排成一行的方法的相关文章

Dreamweaver中应用CSS的技巧

  Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器.由于DW的功能之强大,所以可以在他里面直接定义css(样式表),而就是这css给我出了个小难题. 事情是这样的, 我用css主要是改变一下我的超级连接的颜色和下划线的有无.在DW里定义css的确很方便,里面的参数他都为你设置好了,只要你点鼠标就行了.正是由于他的简单,而使他带来了一个小问题(就我自己认为): 以下为引用的内容: style type="text/css" !-- a:hover { color

Dreamweaver中编写CSS的“最佳习惯”

由于"可视化"和操作简便,在DreamWeaver中编写CSS的朋友很多,今天我们介绍一些在Dreamweaver中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DreamWeaver中使用CSS以及突出某一特定CSS特性时的一些

Word文档中设置有颜色的内外框线表格的方法

1.首先点击表格左上角十字架,选中表格. 文档中设置有颜色的内外框线表格的方法-word文档表格颜色设置"> 2.点击"设计"选项卡的"边框",在下拉菜单中,单击右边的"边框和底纹"按钮. 3.弹出"边框和底纹"对话框,在"边框"窗口下,将样式设置为双横线,颜色为蓝色,宽度位1.5磅,设置为"虚框",再单击"确定"按钮. OK啦,表格的内外边框设置完成

在PHP语言中使用JSON和将json还原成数组的方法_php实例

在之前我写过php返回json数据简单实例,刚刚上网,突然发现一篇文章,也是介绍json的,还挺详细,值得参考.内容如下 从5.2版本开始,PHP原生提供json_encode()和json_decode()函数,前者用于编码,后者用于解码. 一.json_encode() <?php $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_encode($arr); ?> 输出 {"a&

在Dreamweaver中利用CSS样式表设置网页

了解 CSS 层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观.使用 CSS 设置页面格式时,内容与表现形式是相互分开的.页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中.使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等. CSS 使您可以控制许多仅使用 HTML 无法控制的属性.例如,您可以为所选文本指定不同的字

CSS代码缩写技巧

css|技巧 Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web

CSS代码缩写技巧_CSS/HTML

Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里.影响速度的因素有很多种,包括Web服务器的速度.访问者的Internet连接情况,以及浏览器必须下载的文件大小.尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小. 为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量.由于CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑

CSS代码缩写精简实例

一些CSS属性允许使用一串值代替许多属性,值使用空格分开. margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序. 所以下面的代码: p { border-top-width: 1px; border-right-width: 5px; border-bottom-width: 10px

Dreamweaver教程-在 Dreamweaver 中编写 HTML 代码

 1.启动 Dreamweaver CS5 2.点击左上角的"文件"> "新建". 3.在"新建文档"界面选择"空白页". 4."页面类型"选择"HTML","布局"选择"<无>".然后单击"创建"按钮.   在Dreamweaver中打开新文档窗口.切换到 "代码"或者"拆分&q