相关文章
网站制作风讯系统通用模块功能简介
北京网站设计CSS入门教学十四个问与答
企通互联网页中嵌入Flash的方法讨论
网站建设使用Web标准建站第7天:CSS入门
北京网站建设提前解密新功能!Dreamweaver 8中文版图文快报
企通互联Flash 遮罩特效的综合操练(2)
北京网站建设FLASH MX 2004视频教程:宝泉奶粉广告制作(三)
网站设计Dreamweaver基础教程:层及其应用
北京网站设计用Dreamweaver MX 2004与SQL数据库相连
网站设计DW MX 2004的Flash动画元素
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置:首页 >> 网站制作 >> 企通互联北京网站制作第十八节 CSS样式
企通互联北京网站制作第十八节 CSS样式
css即Cascading Stylesheets,是用于弥补编写网页的html语言的很多不足,使网页格式更容易得到控制。几乎每个网页都要用到css。 本节主要讲css在Dreamweaver中的应用,至于css的细节,请查阅相关的css资料。北京网站建设
网站建设
点击Launcher面板左起第四个图标,或点击菜单栏的Window/CSS Style,也可直接使用快捷键F7,即弹出css样式面板。北京网站制作
北京网页设计(css样式面板)
点击css样式面板右下方的
网站制作(新建css样式对话框)
Make Custom Style (class)是将css样式应用于选定的区域,若要在整个页面的相关区域应用css样式,则需选择Redefine HTML Tag和Use CSS Selector方式。北京网站建设
Make Custom Style (class) 网站制作比较类似于html样式的设置,用Make Custom Style定义的css样式的使用也比较类似于 北京网站建设html样式。企通互联
Redefine HTML Tag,是将页面源文件中的html标记重定义。用Redefine HTML Tag定义的css样式设置完毕后,该css样式马上生效。北京网站设计
Use CSS Selector,是将此时的css样式用于特定的html标记组合或ID名。你可从Selector后的下拉选框里选择,选框里有四个选项——a:active、a:hover、a:link和a:visited,分别代表超级链接的激活状态、鼠标移动到超级链接上的状态、超级链接的链接状态和超级链接访问过的状态。你也可直接在选框里填入一些html标记组合。例如填入td p,则这个css样式将用于网页上所有td 北京网页设计标记内p标记的作用范围。你还可填入以符号#开头的ID名,例如可填入#abc,则这个css样式将用于网页上所有带有ID=”abc”的html标记的作用范围。北京网站制作
北京网站制作
不管选择了哪一种,点击OK按钮,弹出css样式设置对话框。网站设计
这个对话框分为八种模式。点击左侧可选取。对话框上前面有符号 * 的项,表示其效果在Dreamweaver窗口中显示不出来,要查看效果需用浏览器预览。网站设计
Type模式主要是对文字属性的设置。网站建设
Background模式是对背景属性的设置。网页设计
Block模式,即区模式,是对某区域内文本的各种空隙大小的设置。网站建设
Box模式是容器设置模式。网站建设
Border模式即是设置容器边框的属性。Border,或叫边框,也是容器的一个组成部分。微软的Internet Explore不支持边框属性。北京网页设计
List模式是设置列表的属性。北京网页设计
Positioning模式Positioning即定位,是利用css将页面元素精确、方便的放置到网页页面中。Extentions模式是css的一些扩展。其中 网站建设Page Break和页面打印有关。Cursor是鼠标移动到定义的页面元素上时,鼠标显示的效果。Filter是css滤镜效果。网站设计
企通互联
设置完成后,用Redefine HTML Tag和Use CSS Selector方式建立的css样式马上生效,用Make Custom Style (class)建立的样式要添加后才能生效,设置方法类似于html样式的设置方法。企通互联
北京网站设计
网页设计
接下来介绍一下使用外部的css文件。 外部的css文件,即是将css样式定义在一个外部的文件,而不是定义在页面文件内,这样可是很多网页公用同样的样式。建议大家使用css www.qitongnet.com样式时,最好用链接外部css文件的方法,这样能做到网站的风格统一和便于更新。网页设计
要制作一个新的外部css文件,点击css面板上的
图标,弹出编辑css对话框。网站制作
北京网站制作(css样式编辑对话框)
点击编辑css对话框上的Link按钮,即弹出引入外部css文件的对话框。选择一个外部css文件即可。北京网站设计
北京网站设计
北京网站设计
最后是一个简单的例子。这个css设置很常用。我们要达到这样的效果,使文字大小为9磅,去掉超级链接的下划线,当鼠标移到超级链接时显示下划线。北京网站设计
网站设计
先通过样式固定文字为最常用的9磅大小。点击新建样式按钮,在弹出的对话框上选择中间的一项,在下拉选框中选择p。点击OK按钮,弹出css属性设置对话框。 Size是字体大小,在后面选择9,单位选择为points,这样就设置字体为9磅。 设置完成后点击OK按钮。 好,现在页面的文字达到了我们要求的效果。 以上是针对p标记的,然后对td、input、li、select等标记重复以上操作。企通互联
接下来将去掉超级链接的下划线,并改变其颜色。 点击新建样式按钮,在弹出的对话框上选择中间的一项,在下拉选框中选择a。点击OK按钮,弹出css属性设置对话框。 在decoration后选择none。 再设置一下颜色。 然后点击OK按钮。 这时,页面上的超级链接变成了我们需要的效果。网站设计
最后,可以通过设置,使当鼠标移过超级链接时,显示下划线。 点击新建样式按钮,在弹出的对话框上选择下面的一项,在下拉选框中选择a:hover 北京网站制作。点击OK按钮,弹出css属性设置对话框。 在decoration后选择under-line。 再设置一下颜色。 然后点击OK按钮。 按下F12键预览这个页面,移动鼠标到超级链接之上,即显示出下划线。
上一篇:北京网站制作第二十二节 层
下一篇:网站设计第二十一节 Behavior
