• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >Dreamweaver教程 > Dreamweaver小技巧之应用CSS样式表

Dreamweaver小技巧之应用CSS样式表

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS样式表等相关知识,佚名 希望在学习及工作中可以帮助到您

一、 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色:

  在默认情况下,用DreamWeaver设计的网页中的超级链接都有下划线,看上去不大美观。要去除这些讨厌的下划线,很多报刊介绍的方法都是在HTML源代码中手工加入一段代码,其实在DreamWeave中很容易去除链接的下划线。首先在DreamWeaver的Document Windows中随便建立一个链接,你可以看到这个链接会有下划线。怎样去除这条下划线呢?

  1.在点击菜单栏上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或者直接按快捷键Ctrl+shift+E),调出Edit Style Sheet(编辑样式表)对话框窗口。

  2.点击"New (新建)",然后在"New Style (新样式)"对话框中,点击"Use CSS Selector"按钮。

  3.在Selector栏中键入a, 然后点OK。

  4.随后弹出"CSS 样式定义"对话框,在Type类的decoration(装饰)中,勾选none,然后点OK,再点Done。你将立刻在Document Windows中发现链接的下划线已经消失了。那么又怎样实现当鼠标悬停在链接上时链接变色呢?重复上述步骤中的的第一、第二步。然后点选Selector旁的下拉箭头,选择"a:hover",再点OK。在随后弹出的 "Style definition for a: hover"对话框中,在Type类的color中任意选择一种颜色(比如选择红色),然后点OK,再点Done便完成了。按F12预览,将鼠标放在链接上,该链接是不是变成了红色?如果在刚才的"Style definition for a: hover"对话框中,在Backgroud(背景)类里,选择backgroud的颜色为绿色,那么当你把鼠标放在超级链接上时,不但链接会变成红色,而且还会有绿色的背景。事实上,通过刚才的CSS 样式定义对话框,你还可以实现更多的特殊效果,有兴趣的朋友不妨去好好琢磨一下。

  二、创建可反复使用的外部CSS样式表

  用DreamWeaver在某网页中创建了一种CSS样式后,如果你要在另外的网页中应用该样式,你不必从新创建该CSS样式,只要你创建了外部CSS样式表文件(external CSS style sheet),你便可以在今后任意调用该样式表文件中的样式。为了便于管理,先在站点所在文件夹中,新建一个文件夹,取名为CSS,专门用于放置外部样式表文件(其扩展名为css)。

  1、在Document Window中按Ctrl+shift+E,调出Edit Style Sheet(编辑样式表)对话框窗口

  2、点击"link"。

  3、在弹出的Link External Style Sheet(链接外部样式表)对话框,点BROWSE,找到刚才创建的CSS文件夹。

  4、在Select Stylesheet File (选择样式表文件)窗口"文件名"栏中,键入*.css (*可以为任意名),请注意,事实上此时在CSS文件夹中并无样式表文件,在"文件名"栏中键入的新名字将成为外部样式表新文件的名字。比如键入title.css,,然后点Select | OK。

  5、在Edit Style Sheet(编辑样式表)对话框窗口中,会新增加 title.css (link), 双击它。

  6、在弹出的"title.css"窗口中,点"New"。

  7、在"New Style"对话框中,点选"Make Custom Style (class)"按钮

  8、在Name栏中键入某个名字,如myheadline,点OK。

  9、在接下来的"Style definition for .myheadline in title.css"对话框中,进行字体、颜色等各种设置,完成后点OK。如还要创建新的样式,再点"New",重复刚才的步骤6、7、8、9,最后点"save"| "done",于是title.css这个外部样式表文件便创建好了。菜单栏上的"TEXT" |"CSS Styles"子菜单中将会列出title.css中的所有样式。如要在其他网页中调用这个title.css,只需重复上述1至3步,然后在Select Stylesheet File窗口"文件名"栏中输入title.css。点"select"| "ok"| "done", title.css中所有的样式便会出现在该网页菜单栏上的"Text" |"CSS Styles"子菜单中,你将可以在此网页中应用这些样式。

您可能想查找下面的文章:

相关文章

  • 2017-08-06Dreamweaver CS6安装失败提示配置错误代码16该怎么办?
  • 2017-08-06Dreamweaver登陆界面怎么显示?
  • 2017-08-06Dreamweaver 8 无法启动的解决方案
  • 2017-08-06Dreamweaver解决网页制作中的空格问题
  • 2017-08-06DW如何制作一个简单的垂直导航?
  • 2017-08-06在Dreamweaver中实现网页状态栏中活动文字效果的方法
  • 2017-08-06Dreamweaver怎么创建本地测试服务器?
  • 2017-08-06DreamWeaver CS3中的SPRY的自定义验证代码
  • 2017-08-06Dreamweaver怎么添加文本?怎么设置文本?
  • 2017-08-06DreamWeaver怎么显示代码行数? dw显示行标的技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 巧用DW判断字符串中是否有换行
    • Dreamweaver网页版权符号怎么制作?
    • Dreamweaver中怎么让html网页中的table边框细线显示?
    • Dreamweaver cs6官方中文版安装步骤详细图解
    • dreamweaver中怎么交互图像? dw制作鼠标经过图像换图的教程
    • Dreamweaver站点中新建文件夹和修改/删除/移动文件的操作方法
    • Dreamweaver、Notepad++ 代码配色(提高自身代码阅读能力)
    • 在dreamweaver中如何插入图片呢?
    • Dreamweaver中框架的使用技巧
    • Dreamweaver建立的站点怎么更改图像的默认文件夹位置?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有