在Dreamweaver中使用样式表

2016-02-19 19:59 17 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐在Dreamweaver中使用样式表,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

CSS——层叠样式表的使用已经变得越来越普及,常见的样式表使用方法有三种:内部样式表文件、外部链接样式表、内部嵌入样式表。关于样式表的优越意义和详细用法以及具体的设置参数不是短短的一篇文章可以说清的。早期创建CSS需要有专门的知识,需要直接编写样式表文件。如今,Dreamweaver使得这项工作可以在一个统一的界面中进行,通过简单的操作即可完成创建、修改、添加等样式表功能,这些设置可以影响到任何事物,从普通的文本布局到复杂的多媒体文件控制。你将会发现通过修改一个单一的外部样式表文件,可以迅速的改变整个站点的外观。今天我们不准备详细讨论所有样式表的具体参数和知识,我们只想给大家介绍在Dreamweaver中使用样式面板直接创建样式表文件的方法。

一、对样式表的操作途径可以有以下三种:

1、 从下拉菜单Window—CSS Styles打开样式面板。

2、 从下拉菜单Text—CSS Styles启动样式表对话框。

3、 在页面空白处点击鼠标右键启动样式表对话框。

不管如何启动上述几个样式菜单或面板,他们都包含相同的几个命令:新建样式表、编辑样式表、链接样式表和导出样式表。下面我们来详细介绍样式的定义。

二、 定义样式表选项。

启动新建样式表后会打开如图四所示的对话框:

(一)首先看一下Define选项

1、 New Style Sheet File:此选项将会把你设定的样式最终保存在一个外部单独的样式表文件中,这个样式表文件可以被其他文件共同使用,也就是说你可以使站点内的所有文件使用同一个样式表文件。

2、 This Document Only:此选项将会把你设定的样式仅仅放在当前文件的头文件中,这些样式只能在此文件中使用。

(二)另一个选项是Type:在这里选择将要创建的样式的类型,包括:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

1、 Make Custom Style(定制自己的样式类别):选择此类型后,需要在上方的Name中填入一个样式名字,需要注意的是,此类名称必须以“.”开头。这种方式定义的样式我们可以把它附给绝大多数的HTML对象,这样可以使这些对象有统一的外观。如图五我们创建一个myStyle的样式:

因为上面我们选择的是定义一个外部样式表文件,所以点击OK后打开保存文件的对话框:

选择你的目录和文件名,保存后进入样式设置对话框

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这里我们定义了一个字型为宋体,字体大小为12pt,行高为20pt,色彩为深绿色,并带有下化线的样式。

2、 Redefine HTML Tag(重新定义HTML标识):选择此选项后从上方的Name下拉框里选择需要重新定义的HTML标识。这个选项将使得文件中具有统一标签的所有内容使用相同的外观。例如使所有的段落起始位置缩进两个字可以按照下面的方法重新定义p标签

文字的大小等定义同上面的方法,而段落首行缩紧可以按图所示定义:

需要注意的是,如果你的字体定义的为10pt,则这里的首行缩进可以定义为20pt既两个中文字。由于所有的相同类型标签使用的样式相同,所以这种方式适合于大量的相同元素的样式定义,例如对网页中所有的段落统一字体、颜色、大小、行距、段首缩进。

3、 Use CSS Selector(使用CSS选择器):这个选项的功能是可以设定链接文本的样式

来源:http://www.tulaoshi.com/n/20160219/1622449.html

延伸阅读
标签: Web开发
1.在字符之间添加空格 要插入连续空格,在“插入”栏中,选择“字符”,然后单击“非换行的空格”图标。或者按 Control+Shift+空格键 。 实际上在代码中添加了  这几个字符。 2.添加段落换行: 按 Enter 键 。 实际上在文字前后加了p/p标签。 3.添加换行符: 按 Shift+Enter 键。 实际上在文字后面加了br标签。 4.插入特殊...
标签: Web开发
大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与结构分离开来。这样做的好处在于: 1:增加站点的寿命 不规范的样式表可能在当时觉得很方便,但新版本的浏览器出来以后,很可能就会出现兼容性问题。到时...
标签: Web开发
CSS样式表常用小技巧 · ul 标签在 Mozilla 中默认是有 padding 值的,而在 IE 中只有 margin 有值。 · 同一个的 class 选择符可以在一个文档中重复出现,而 id 选择符却只能出现一次;对一个标签同时使用 class和 id 进行 CSS 定义,如果定义有重复,id 选择符做的定义有效。 · 初学可能会碰到这样一个情况,同样一个标签的属性在 IE ...
标签: Web开发
整理了一下自己写CSS时的顺序,跟大家分享下。 下表顺序为从上到下,从左到右: ======================== display || visibility list-style : list-style-type || list-style-position || list-style-image position top || right || bottom || left z-index clear float width max-width || min-width height max-height || min-height...
标签: Web开发
定义LI前面的小点样式  view plaincopy to clipboardprint? 语法:   list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha...

经验教程

118

收藏

18
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部