运筹帷幄 用CSS控制网站总“队形”

css|控制

  网页设计中我们通常需要统一网页的整体风格,统一的风格大部分涉及到网页中文字属性、网页背景色以及链接文字属性等等,如果我们应用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”颜色和其他背景属性。这时您会看到页面中内容的整体改变。


图1


  偏好元素风格的改变

  经过上面的改变有时不免给您带来一定麻烦,如果遇到页面中某个元素,比如突出显示的文字的字体、字号以及颜色怎么办!这里我们就需要再定义一个新的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)。


图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”稍微大一点,就会出现鼠标移动到链接上时字体变大的效果,试试看是不是很奇妙!


图3

  名词解释:CSS即层叠样式表(Cascading Style Sheet)是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页,设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。Dreamweaver MX推出后,其改进的CSS渲染和设计工具、通过增强CSS面板清晰显示内、外部定义的样式,让用户构建出符合最新CSS标准的站点。

时间: 2024-09-11 01:52:51

运筹帷幄 用CSS控制网站总“队形”的相关文章

网站制作如何用CSS控制超链接样式

  网站制作用CSS可控制超链接样式,一般分为四个部分:a:active是超级链接的初始状态:a:hover是把鼠标放上去时的状况:a:link 是鼠标点击时:a:visited是访问过后的情况. CSS控制超链接的三种方法 1.通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码<div class="yangshi"><a href="http://www.wangqi.com/">CSS</a>&l

Div+CSS设计网站利于优化

网页制作Webjx文章简介:您所在的位置:首页 网页设计 HTML/CSS/DIV Div+CSS设计网站的优点 Div+CSS设计网站的优点 2008-03-18 作者: 来源:网络 [大 中 您所在的位置:首页 > 网页设计 > HTML/CSS/DIV > Div+CSS设计网站的优点 Div+CSS设计网站的优点 2008-03-18 作者: 来源:网络 [大 中 小] 评论:0 软件: 网页设计行业从业者越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人

css控制导航栏的居中

css|导航|控制 在学习的过程中,我希望能够得到css的导航栏也能够居中的效果但是,使用普通的text-align:center;不起作用,经过在网上搜索在经典论坛得到链接,uk的cssplay网站上公布了两种使其居中的方法其中有一个使用了非常奇怪的del标签,不知道是为什么但是总算解决掉了一个问题仍然很高兴 #menu1 { width:408px; padding:0; margin:0 auto; list-style-type:none; }#menu1 li { float:left

网页制作中应用CSS控制文本的主要指令

css|控制|网页 本章CSS的主要作用 本章要介绍的是文字相关的CSS指令.通 常一个网站的内容最多的就是文字了,透过这些文字相关的CSS指令,您可以将您的 网页内容排版得美美的.本章将分两个部份为您介绍,第一部份是字型性质的CSS指 令,用以控制文字字型的各种样式:第二部份介绍的是文字性质的CSS指令,用以控 制文字段落的外观及摆设方式. 字型性质的CSS指令 font-family 设定文字字型 支 持:IE3.IE4适 用:所有元素可能值: <family-name> 字型名称 预设值

网站重构:利用CSS改善网站可访问性

css|访问|网站重构   最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配.   像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是C

利用CSS改善网站可访问性

css|访问  利用CSS改善网站可访问性    作者: BUILDER.COM来源: www.BUILDER.COM类型: 翻译     最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配.     像那时建构的很多网站一样,我的客户的网站使用了Cascading Style She

利用CSS改善网站可访问性(2005-02-21 10:13:09)

css|访问 最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准.对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲.我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配. 像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本.它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要

用ASP.NET 2.0主题控制网站外观

asp.net|控制 自.NET Framework出现以来,对网站外观进行控制一直是ASP.NET开发者的期待.ASP.NET 2.0使之成为现实,应用它的主题与皮肤,我们可以对外观进行控制. 开发者经常将主题与母版页面弄混,但这两个元素存在很大的不同.母版页面允许你控制一个网站的总体布局,或网站内的一组页面,但主题主要关注网站的外观与感觉. 在你能够应用ASP.NET 2.0主题的所有优点之前,你有必要了解一些术语与过程.主题能够应用一个称之为皮肤或层叠样式表(CSS)的新设计元素. 了解皮

CSS控制Table内外边框、颜色、大小示例

在默认的情况下,我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框.颜色.大小的样式,想学习的朋友可以参考下   其实按照常理来说,现在的网站应该早已经抛弃什么表格了,现在肯定是DIV+CSS当道嘛!不过客户的网站在添加内容的时候始终不满意那些边框效果:要么没有,要么很粗.看得出来,这位客户是位完美主义者. 在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的. 无边框Table 为了给,表格加一个边框,我在CSS里面写了这样一句