返回顶部
首页 > 资讯 > 前端开发 > JavaScript >DWMX中CSS的用法
  • 786
分享到

DWMX中CSS的用法

2024-04-02 19:04:59 786人浏览 独家记忆
摘要

这篇文章主要讲解了“DWMX中CSS的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DWMX中CSS的用法”吧!MacromediaDWMX引进了一些新

这篇文章主要讲解了“DWMX中CSS的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DWMX中CSS的用法”吧!

MacromediaDWMX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点。本文讨论在DWMX中使用CSS以及突出某一特定CSS特性时的一些建议。

在Macromedia DreamWeaver中编写CSS的一些习惯建议

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

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

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

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

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

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

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

***习惯是指什么?

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

1:增加站点的寿命

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

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

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

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

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

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

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

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

◆ExternalCSS:这是你的***选择。ExternalCSS可以让所有连接到它的页面保持一致的外观风格;提纲挈领,更改一次,轻松更新所有相关页面;让你的页面体积更小,浏览速度更快。其他的一些***习惯将在下文分析具体的CSS特性时提及。

在DWMX中创建CSS样式表

在DWMX中创建CSS样式表时(Text》CSSStyle》Newstylesheet),在弹出的对话框中,你有两个选择:新样式表文档(NewStyleSheetFile)和只用于当前页(ThisDocumentOnly)。选中“NewStyleSheetFile”你就开始了创建ExternalCSS的过程。这个选项要求你在真正的创建过程之前先命名样式表并为它选定一个保存位置;另外一个选项,ThisDocumentOnly,则会直接把相关代码写入到页面的部分。

你也可以在“新样式(Newstyle)”对话框中选择一个现存的样式表来编辑或添加新的定义。

应该连接到ExternalCSS还是导入?

创建外部样式表以后,你需要把它附加在每个页面上(或是模板)。要这样做,可以在CSS面板上点击“附加样式表(AttachStyleSheet)”按纽,此时会弹出连接外部样式表(LinkExternalStyleSheet)对话框,在上面可以浏览到你的目标样式表的名字,找到以后,你可以选择连接(link)或者导入(import)此外部样式表。

连接是最常用的方式,选择“link”即可把样式表连接到页面。它会在你的页面中加入下面的标记:

所有支持CSS的浏览器都支持连接选项。如果你想一些比较旧的浏览器(比如Netscape4.x)也能“看到”这个样式表的话,就要采用下面的方法。

如果你选择“导入”选项,所用的标记为:

NetSscape4会完全忽略导入的CSS,而按照连接的CSS来解释页面。这样我们就可以放心使用CSS中的新功能,不必担心浏览器的兼容性问题了。

CSS属性检查器

在DWMX的属性检查器中可以轻易切换到CSS模式。缺省情况下,属性检查器会显示原始的HTML模式下字体标签。点击字体下拉菜单旁边的小“A”,你就可以看到目前可用的CSS样式表,而不是字体标签列表。

同时,你也可以轻松切回到HTML模式。

现成的CSS样式表

DWMX中一个令人激动的CSS特性就是它包含了已制作好的CSS样式表。CSS的新用户可以先体验一下。选择File>New,在弹出的新文档对话框中选择选中CSSstylesheets,在右边的方框中会出现所有可用的CSS列表。为了实践我们所说的***习惯,选择一个标记为“Accessible”的。

将文档保存在站点文件夹内,然后就可以用上述的方法来把CSS附加在你的文档中了。

设计时间样式表(DesignTimestylesheets)

DWMX的这一特性可以让你在设计视图下工作时将样式表应用到页面,让你对站点的外观有一个更直观的认识。设计时间样式表将不会出现在站点内。从我们的***习惯的观点来讲,这一特性是非常有用的。如果你使用同时导入和连接两种方式(如上所述),附加设计时间样式表可以让你使用其中的任何一个来开发站点。当你想看在另一个样式表下页面外观如何时,你可以轻松更改为另一个样式表。

对于要将CSS应用于服务器端(比如ASP,PHP,orColdFusion)或是要在客户端通过&#106avascript来存取的开发者来说,设计时间样式表同样有用。服务器端样式表也是处理客户端浏览器对CSS支持不好的又一种方式。但在以前版本的DW中,这种方式却不能让你在设计阶段查看CSS的实际效果。设计时间样式表让你实时查看样式表效果,所以你可在DWMX中以可视界面工作。另外一个好处就是当你上传站点文件时,你不必再检查整个站点寻找冗余的样式表了。

验证

无论你是自己创建样式表还是编辑现有的样式表,验证可以确保你不会误用不标准的标签或错误的代码。DWMX本身不包含CSS验证程序,你可以使用W3C站点提供的验证服务。在DWMX内你可以验证HTML或DHTML标签(File>CheckPage>ValidateMarkup(forHTML)或File>CheckPage>ValidateasXMLforXHTML.)。在开发基于CSS的站点时,DWMX提供了很多辅助工具。有了MWMX的帮助,再加上对CSS良好的理解,你就可以开发出能经受时间考验的站点了。

感谢各位的阅读,以上就是“DWMX中CSS的用法”的内容了,经过本文的学习后,相信大家对DWMX中CSS的用法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: DWMX中CSS的用法

本文链接: https://lsjlt.com/news/65910.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • DWMX中CSS的用法
    这篇文章主要讲解了“DWMX中CSS的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“DWMX中CSS的用法”吧!MacromediaDWMX引进了一些新...
    99+
    2024-04-02
  • css中float的用法
    这篇文章主要为大家展示了“css中float的用法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css中float的用法”这篇文章吧。float与margin两...
    99+
    2024-04-02
  • css中hideFocus的用法
    在CSS中,hideFocus是一个伪类选择器,用于指定当元素获得焦点时是否显示焦点的外观。使用hideFocus时,可以通过设置元...
    99+
    2023-09-12
    css
  • css中position的用法
    css 中的 position 属性用于定义元素在文档流中的位置,可以取值为:static(默认):元素在文档流中按正常顺序排列。relative:将元素相对于其原位置移动一定距离,但仍...
    99+
    2024-04-26
    css 绝对定位 相对定位 静态定位 固定定位
  • css中calc的用法
    css 中的 calc() 函数用于动态计算值,允许将数学运算应用于长度、百分比等值,创建动态布局。它支持加、减、乘、除运算,并在所有主要浏览器中得到广泛支持,使用方便。需要注意单位兼容...
    99+
    2024-04-26
    css
  • css中display的用法
    display 属性用于指定元素的布局行为,有多个值可供选择,包括 block、inline、inline-block、none、flex 和 grid。使用 display 属性,可以...
    99+
    2024-04-26
    css
  • css中font的用法
    font 属性用于定义文本的字体样式,包括字体样式、粗细、大小、行高和字体系列,语法为:font: font-style font-weight font-size/line-heigh...
    99+
    2024-04-26
    css
  • css中background的用法
    css 中 background 属性用于设置网页元素的背景,包括颜色、图片、渐变和视频。具体用法包括:设置背景颜色:background-color: #f0f8ff;设置背景图片:b...
    99+
    2024-04-26
    css
  • css中outline的用法
    outline 属性在 css 中用于在元素周围创建边框,以突出显示焦点或状态。它不同于 border 属性,因为它不占用元素空间,在元素获取焦点时自动显示,并且颜色和样式可以独立设置。...
    99+
    2024-04-26
    css
  • css中transform的用法
    css中的 transform 属性可操纵元素的外观,包括:translate():移动元素rotate():旋转元素scale():缩放元素skew():扭曲元素matrix():使用...
    99+
    2024-04-28
    css
  • css中important的用法
    !important 是一个 css 声明,用于强制浏览器优先使用指定的样式,即使有其他更具体的或继承的样式。它的用法是将 !important 添加在需要强制的声明后面;应谨慎使用,因...
    99+
    2024-04-28
    css
  • css中span的用法
    span 是 html 中的内联元素,用于表示文档中的文本,它可以通过 css 样式化。span 主要用于强调文本、分组文本、应用交互性、样式化文本片段和作为占位符。span 使用 标签...
    99+
    2024-04-28
    css
  • css中hover的用法
    css 中的 hover 伪类在鼠标悬停时触发,用于更改元素的外观。用法包括:颜色大小背景边框文本阴影其他 css 属性 CSS 中 hover 的用法 hover 是什么? hove...
    99+
    2024-04-28
    css
  • css中的calc用法
    css 中的 calc 函数允许开发者进行数学运算,用法步骤:定义变量,创建包含所需运算的表达式,将表达式应用到样式。优点包括灵活性、消除对 javascript 的依赖、动态值计算。c...
    99+
    2024-04-26
    css
  • border在css中的用法
    在 css 中,border 属性用于为元素添加边框,它由 border-width、border-style 和 border-color 三个子属性组成。border-width 设...
    99+
    2024-04-26
    css
  • top在css中的用法
    top在css中用于设置元素的垂直位置,用法包括:以长度单位指定垂直位置(相对于包含块顶部)。以百分比指定垂直位置(相对于包含块高度)。使用auto让浏览器根据布局自动计算。使用init...
    99+
    2024-04-26
    css
  • padding在css中的用法
    padding 在 css 中用于设置元素内容周围的空间,用途包括创建边距、调整元素大小和美观效果。语法为:padding: ;,单位有 px、%、em。它可以继承,是盒模型的一部分,c...
    99+
    2024-04-26
    css
  • hover在css中的用法
    hover 在 css 中的用法 hover 是 CSS 中的一种伪类,用于指定当鼠标悬停在元素上时应用的样式。它常用于创建交互式效果,如按钮的变色或显示隐藏菜单。 语法 <cod...
    99+
    2024-04-26
    css
  • box在css中的用法
    css 中的 box 模型是一个框架,用于控制元素的大小、边框和间隔。它由内容、填充、边框和外边距四部分组成,并提供 width、padding、border 和 margin 等属性进...
    99+
    2024-04-28
    css
  • opacity在css中的用法
    opacity在css中的用法:什么是opacity?opacity属性控制元素的不透明度,即元素透光的程度,取值范围为0(完全透明)到1(完全不透明)。如何使用opacity?opac...
    99+
    2024-04-28
    css
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作