网页设计中我们通常需要统一网页的整体风格,统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等等,如果我们应用CSS来控制这些属性,会大大提高网页设计速度,更加统一网页总体效果。
为了达到修改整个网页的目的,我们需要编辑一个外挂式的CSS文档。根据这个文档定义和修改不同CSS属性并在页面元素相同或者相似的网页里调用它。
整体改变页面风格
现在网页中流行宋体的9pt和10.5pt的字体,按快捷键“Shift+F11”打开“CSS Style控制面板”,单击“New Style”按钮,弹出“New Style”对话框,复选“Redefine HTML Tag”的“Type”类型,这时在Tag处会出现“body”、“br”、“cite”等选项,选择“body”后确认。这样我们就建立了一个外挂的CSS文档,在保存对话框中保存为all后就进入“Style Definition for body in all.css”对话框(如图1)。选择“Category”中的“Type”项,定义“Font”为“宋体”、“Size”参数为“9”,其后的下拉框选择“Points”、“Color”自定义为喜好颜色就可以了。当然还可以选择“Category”中的“Background”项来定义“Background”颜色和其他背景属性。这时您会看到页面中内容的整体改变。
偏好元素风格的改变
经过上面的改变有时不免给您带来一定麻烦,如果遇到页面中某个元素,比如突出显示的文字的字体、字号以及颜色怎么办!这里我们就需要再定义一个新的CSS样式单来对其进行控制,右键点击页面编辑区,在弹出快捷菜单中点击“CSS Style/Edit Style Sheet”命令,弹出“Edit Style Sheet”对话框,选择列表中的all.css,点击“New”按钮,在弹出的“New Style”对话框中选择“Make Custom Style(class)”的“Type”类型定义一个自己偏好的CSS控制。如果想更改页面中某一元素的属性,选中它然后右键单击“CSS Styles”面板中“Apply Styles”中刚才定义的CSS,执行“Apply”命令就可以了(如图2)。
统一控制超级链接
超级链接也是网页中经常使用的,而网页的链接色默认都是蓝色,虽然可以更改,但单一色彩在不同背景色的网页上显示就不是那么奏效了,我们来看一下如何用CSS控制网页实现不同的个性链接颜色。在“New Style”对话框中,选择“Use CSS Selector”的“Type”类型,在“Selector”下拉框中会列出“a:link(链接属性)”、“a:hover(鼠标移动到链接上的属性)”、“a:visited(链接被访问后属性)”、“a:active(链接焦点状态下的属性)”4个选项(如图3),这4个选项的设置会控制网页中所有的链接的属性,我们可以分别定义这4个属性,然后添加到“CSS Style”面板中与默认设置不同的CSS控制中,再将其“Apply”到需要改变的链接上就实现了。如果将“Hover”的字体设置的比“Link”稍微大一点,就会出现鼠标移动到链接上时字体变大的效果,试试看是不是很奇妙!
名词解释:CSS即层叠样式表(Cascading Style Sheet)是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页,设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。Dreamweaver MX推出后,其改进的CSS渲染和设计工具、通过增强CSS面板清晰显示内、外部定义的样式,让用户构建出符合最新CSS标准的站点。
相关视频
相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么
热门文章 没有查询到任何记录。
最新文章
页面进入效果表单
XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧
人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法
查看所有0条评论>>