




已阅读5页,还剩23页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第13章 css样式表 在制作网页过程中,每个页都会用到文字、图像以及表 格、表单等元素。dreamweaver将css面板重新设计为一 个统一集中的面板,使用css面板可以快速创建、修改、删 除样式。本章重点内容: l了解css样式表 l新建css样式表 l从外部导入css样式表 lcss样式冲突 lid和 class的区别 l熟悉css控制面板 13.1 了解css样式表 css就是cascading style sheets,中文翻译为“层叠样 式表”,简称样式表。css是w3c(the world wide web consortium)为html制定的样式表机制,并得到微软公司 和网景公司的支持,因而css样式在ie4(internet explorer 4.0)和nc4(netscape 4.0)以上的浏览器中均可支持, 但有些效果需要更高版本的浏览器支持。 13.1.1 什么是css 网页中的文档页面和格式都是用html标记来定义的, 如表格、单元格、行、图像、表单 等,当应用这些标记不能满足更多的样式需求时,就 要用css样式表来完成。 13.1.2 css的种类 css在页面中使用的方法有如下几种写法,这些都必 须在标记内实现。 l页内调用 l外部调用 l双表调用 13.1.3 css的特点 使用css可以让网页的布局更为整齐合理,总结一下 ,下面几个特点,使其在网页制作中使用最为广泛。 l通用兼容 l美化界面 l方便页面布局 l批量更新 13.1.4 css的单位 在定义css时需用到数值的单位,下面分类进行详细 介绍。 l长度单位 l颜色单位 lurl单位 13.2 使用css样式 通过前面的介绍,读者对于css样式应该有了初步的 认识,下面来介绍如何建立、导入以及编辑css样式表。 13.2.1 新建css样式表 在dreamweaver cs4中创建网页之前,同时也要创建 css样式,对网页中的对象进行样式设置。 13.2.2 从外部导入css样式表 网页中的css样式,可以在创建文档时新建样式,也 可以直接从外部导入已经创建好的css样式。 13.2.3 css样式冲突 在网页中,如果同时调用多个css样式,多个css样 式均为对其进行样式的改变,这样几个样式之间就产生了冲 突,浏览器中遇到这样情况时,显示css样式一般依照下面 的规则来进行优先级的分配。 l相加原则 l就近原则 13.2.4 编辑外部css样式表 在一个新的样式表创建完了以后,在以后的网页设计中 ,常需要添加新的样式,以及对现在的样式再次进行修改或 删除等操作,而dreamweaver cs4的css面板的功能进行 了扩展,让css面板可视化布局,更方便了css样式表的编 辑。 l修改css样式 l删除css样式 在css样式中,常需要针对不同的标签制定不同的样 式,如id用“#”标注,class用“.”标注。 13.3 css控制面板 建立css样式表可以在“css规则定义”对话框中设置样 式属性,比如定义该样式的文本、背景、单元格的边框以及 更高级的滤镜等。掌握css控制面板,就能设置丰富多彩的 样式,对于网页排版可以举一反三、游刃有余。 13.3.1 文本样式设置 使用css样式最常用的是设置文本的样式,打开css 面板,单击已有的样式名称,在css面板该样式的“属性”面 板中显示出已经设置的属性。 13.3.2 背景样式设置 在css规则定义的类型中选择“背景”,可以设置背景的 样式。 13.3.3 区块样式设置 在分类中选择“区块”,可以设置区块中的样式。区块在 网页的文本段落排版中经常要用到,比如首行缩进、文字间 距等。 13.3.4 方框样式设置 选择css规则定义左侧类型为“方框”,在设置图像距离 所在单元格四周的距离或图文混排时,常会用到这一设置。 13.3.5 边框样式设置 在css规则定义左侧的分类选择“列表”,通过边框样式 设置,可以设置对象的边框的颜色、粗细等各项参数。 13.3.6 列表样式设置 应用css规则定义的列表样式,可以设置多种列表的 外观样式,在分类中选择“列表”,在右侧可以设置列表样式 。 13.3.7 定位样式设置 定位样式在实际中是对于层的设置使用,因为在dw8 中,有专门关于层的可视化控制面板,因此这个设置一般用 不到。 13.3.8 扩展样式设置 用css样式还可以实现一些扩展功能,通过扩展样式 设置实现。“扩展样式”面板主要包括3种效果:“分页”、“光标 ”、“过滤器”。在对话框左侧选择“扩展”项,可以在右边区域 设置css样式的扩展格式。 13.4 css解决多浏览器兼容 无论是使用传统的表格网页布局还是使用divcss网 页布局,在不同的浏览器中访问同一个网页时,都会出现一 些不兼容的问题。这时可以针对浏览器不兼容的特性用css 针对不同的浏览器设置各自的样式,使网页在不同的浏览器 中的显示效果相同。 13.4.1 !important 现在ie7和ie8已经支持“!important”,在使用“! important”时也只需注意ie6的兼容。 13.4.2 css hack的方法 首先需要了解什么是css hack:由于不同的浏览器 (比如ie6、ie7、firefox等)对css的解析认识不一样,因 此会导致生成的页面效果不一样,得不到实际需要显示的页 面效果。这个时候就需要针对不同的浏览器去写不同的css ,让它能够同时兼容不同的浏览器,能在不同的浏览器中也 能得到想要的页面效果。 13.4.3 常用兼容解决方案 padding的设置 在firefox中设置padding的值会直接影响div的宽度和高 度的增加,但是在ie中不会因为padding的值而影响div的宽 度和高度。 解决方案:在css样式中针对firefox和ie分别定义宽 度,对ie中的css样式前加上特别标记“*”。 13.5 使用css制作圆角 在web 2.0技术没有流行前,传统的制作圆角矩形都是 使用图片,这样不但麻烦,而且使用表格产生的代码也增加 了浏览器的负担,使用css完全可以不用图片制作出多浏览 器兼容的圆角矩形。 13.5.1 不带背景图像实现圆角框 网页中的圆角框很受设计师的青睐,同时也受到访问者 的喜爱,圆角框更容易在视觉效果上具备可观赏性。 13.5.2 用背景图像设计圆角框 圆角框的设计也不必拘泥于一个形式,可以不使用图像 ,也可以根据设计习惯使用背景图来设计圆角框。 13.6 本章小
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 第3课 太平天国运动 课件 部编版历史八年级上册
- 2025年物流工程师面试宝典高级模拟题集及答案详解
- 田家四季歌课件
- 倒立教学如何导入课件中
- 减脂舞教学课件
- 书法日子旁教学课件
- 《家族的学堂》教学课件
- 湖北省荆州市2024-2025学年高一下学期7月期末化学试题(含答案)
- 第一学期期中学情评估(含答案)2025-2026学年湘教版八年级地理上册
- 新解读《GB-T 223.54-2022钢铁及合金 镍含量的测定 火焰原子吸收光谱法》
- NBT《核动力厂场内应急设施设计规范》
- 2024年大学计算机基础考试题库带答案(黄金题型)
- 模块化建筑的结构设计与BIM技术应用研究
- GB/T 43681-2024生态系统评估区域生态系统调查方法
- 供应链金融与中小企业融资问题
- 消防安全常识口袋书
- 工业自动化的自动化控制系统架构
- 学校驻校教官培训方案
- 高职应用写作课件
- 隔离开关设备检修(接触网技能培训课件)
- 熊廷弼之死:晚明政局的囚徒困境
评论
0/150
提交评论