DreamweaverMX2004CSS样式

王朝html/css/js·作者佚名  2008-05-21
窄屏简体版  字體: |||超大  

我们可能都有这样的体验,如果设置浏览器中字体的大小,网页中的字体就会随之改变。这固然会给一些有特殊需要的用户带来方便,但同时也给网页的布局带来负面影响--网页的版面会随着字体的改变而变的面目全非。但一个好的网页,却不受浏览器字体设置的影响,网页中的文本等始终保持原有的外观,这就是CSS的作用。

CSS是Cascading Style Sheets(层叠样式表单)的简称。它允许作者在HTML文档中加入样式(如字体类型、颜色、大小等等)。对于设计者来说它是一个非常灵活的工具,不必再把繁杂的样式定义编写在文档结构中,可以将所有有关于文档的样式指定内容全部脱离出来,在行内定义、在标题中定义,甚至作为外部样式文件供HTML调用。CSS在当前的网页设计中已经成为不可缺少的技术,例如我们现在最常见的去除链接文字的下划线就是CSS最简单的应用。

Dreamweaver是最早将CSS的应用于网页的工具。通过直观的界面,设计者可以定义超过70种不同的CSS设置,这些设置可以影响到网页中的任何元素,从文本的间距到类似于多媒体的转换。可以随时创建自己的样式单,然后在任何时候连接调用它。

CSS也是以代码形式出现的,编写好的CSS代码,在网页的HTML中以<style>标签形式出现,在网页中使用CSS有三种方式:外部文件方式:

即用任何一种文本编辑工具将编辑好的CSS代码保存为***.css的文件,然后在网页的文档头加入代码<Link Rel="stylesheet" Href="***.css" Type="text/css"> 凡是在网页文档头加入了这行代码的网页都将按照CSS格式显示。这种方式一般主要在使整站风格统一时使用。内部文档头格式:

它是将CSS风格网页的文件头之间,应用的范围仅在该文档。这种方式主要在确定某个页面风格时使用。直接插入式:

这种方法是在每一个HTML标签后直接书写CSS属性。在对页面的某一个标签进行调整时使用这种方式。

CSS是HTML代码的扩充,只要修改CSS代码中的参数值,就能随心所欲的改变网页的风格,但是编写代码仍旧是一个很繁琐的工作。幸好 Dreamweaver MX 2004 的【CSS样式】面板和【CSS属性】面板,为我们提供了极大的便利,只需要点点鼠标,就能自动生成CSS代码。

【CSS样式】

在【窗口】菜单选择【CSS样式】

打开【CSS样式面板】其右下脚的几个快捷按钮见下图的注释。

【附加样式表】

链接外部样式表,给出***.css文档的URL即可。也能导入这个CSS文件进行编辑。

【新建样式表】

名称:

为新建的样式命名,必须以“.”开头,以英文字母命名。

选择器类型:

类-应用与任何标签。

标签-定义特定的标签 。

高级-为具体的某一个标签组合或者具有ID属性的标签定义格式。

定义在:选择“新建样式表文件”按下“确定”后弹出对话框,要求将样式保存为样式表文件,供“外部文件方式”使用。选择“仅对该文档”定义只能用在改文档的样式。

下面通过一个实例来体会一下样式表的作用:

要求:

建立一个名为“.aaa”的样式表,字体为“宋体”,字号为24点,颜色为“红色”,背景颜色为“蓝色”。

1、新建一个HTML文档,单击【CSS样式】面板中的【新建样式】打开对话框。

在【分类】中选择【类情】设置字体,大小,颜色后按下【应用】按钮。

在【分类】中选择【背景】设置背景颜色后点击【确定】.aaa样式表建立完毕。

在编辑窗口的属性面板样式中选择“aaa”然后输入文本。

回到【CSS样式】面板,选中“.aaa”然后单击右下脚的“编辑样式”按钮,可以对刚才设定的样式进行更改,例如,将文字颜色改为白色。

上面已经大致介绍了CSS的基本概念,下面来了解一下CSS的属性。

【CSS的属性】

通过上面的介绍,大家会发现CSS定义样式有八个大类,每个类都有自己相应的属性。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航