关于DW如何使用CSS?

html-css020

关于DW如何使用CSS?,第1张

首先CSS(级联样式表)一般来讲分3种:

外联样式表:CSS样式单独写在一个CSS文件中,HTML页面使用<link>标签引入这个文件;

内联样式表:CSS样式写在HTML页面的<head>标签内;

内嵌样式表:CSS样式直接写在HTML标签的style属性里。

然后说下在DW里怎样使用它们(以下以DW CS6版本为例,其他版本大同小异):

在DW里可通过直接引入、CSS样式面板和属性面板的方式来使用CSS。

如果是外联样式表,在DW界面中可通过直接拖动CSS文件到页面的方式直接将这个样式表引入到页面(注意要拖放到<head>标签内)。

在DW的CSS样式面板中可以方便的管理CSS样式,可新增、删除、修改标签的样式。

如需要为某个元素(例如一段文字)应用某个样式,可通过DW的属性面板里的“类”下拉列表来快速为其应用样式。

1、直接在html标签元素内嵌入css样式,如

<div style="font-size:14pxcolor:#FF0000">

2、在html头部head部分内style声明插入代码如下:

<style type="text/css">

<!--

.ceshi {font-size:14px color:#FF0000}

-->

</style>

3、在html头部head部分内使用@import引用外部CSS文件方法

<style type="text/css">

<!--

@import url(wcss.css)

-->

</style>

Wcss.css文件内代码.ceshi {font-size:14pxcolor:#FF0000}

4、在html头部head部分内使用link来调用外部的css文件

在head放置<linkrel="stylesheet" href="wcss.css" type="text/css"/>来调用外部的wcss.css文件来实现html引用css文件

<linkrel="stylesheet" href="wcss.css" type="text/css"/>

很多CSSer是从以前的网页制作中开始学习CSS网页布局的,或许还存在着一定的DW习惯。希望此文能帮助大家理解和纠正一些不好的习惯。

由于“可视化”和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的“最佳习惯”,希望对大家有所帮助。

CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点。本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议。

一般地讲,样式表(style sheet)就是控制网页内容外观的格式化的规则的集合。可以以三种不同的方式在你的页面中使用CSS:

代码式(Inline):写入到代码中的一次性的样式。

内嵌式(Embedded):可控制一个页面中所有元素的样式表

外联式(External):可控制许多页面中的元素的样式表

事实上,许多站点都根据需要把这三种方式结合起来使用。

在使用CSS时一个需要重点考虑的事实是不同的浏览器以及同一浏览器的不同版本以不同的方式来解析CSS。除了网络浏览器的差异之外,你还要意识到还有很多其他的浏览器,比如听力浏览器,基于电视的浏览器以及Palm pilot和TTY(teletypewriter,远程打字机)一类的手持设备。

大多数技术都有自己约定俗成的标准。CSS也不例外。虽然并非网络上存在的所有CSS都很规范,但按照现有标准来使用CSS却还是不无裨益的。一般来说,开发人员应尽可能将内容与报告分离开来。这样做的好处在于:

1、增加站点的寿命

不规范的样式表可能在当时觉得很方便,但新版本的浏览器出来以后,很可能就会出现兼容性问题。到时逐页修改站点就是一项非常费时的工作同时也使使用CSS失去了意义。

2、让你的站点对所有的用户以及浏览器都适用

有些地方的政府已经立法要求网站必须让残障人士也同样可以浏览。为残障认识设计的浏览设备,比如听力浏览器,对CSS规范性要求极其严格。

3、让站点更新和维护更加轻松

使用方式得当的话,CSS可让你在一个页面中的调整快速应用到所有页面中去。

你首先要做的选择是使用哪一种样式表。当涉及到最佳习惯时,对不同样式表的分析如下:

Inline CSS:简单地说,你应该尽量避免使用。除了一些其他的缺点之外,使用Inline CSS意味着你并没有利用到CSS的真正优点,即你并没有将内容与格式分离开。DW MX使用Inline CSS主要是为了定位页面元素(这些元素在DW MX的用户界面中称为“层(layer)”),或者为了使用某个DHTML特效,它需要使用Inline 样式的javascript来改变一个对象的属性。

Embedded CSS:它也不是最理想的,因为它只能对当前页面施加影响。在更新的过程中,如果某一个页面丢失,将会使站点的风格不一致另外,当用户浏览你的站点时,每一页都要下载一次样式表信息。

External CSS:这是你的第一选择。External CSS可以让所有连接到它的页面保持一致的外观风格提纲挈领,更改一次,轻松更新所有相关页面让你的页面体积更小,浏览速度更快。