网页设计与制作课件第5章CSS样式与模板的使用.ppt
《网页设计与制作课件第5章CSS样式与模板的使用.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作课件第5章CSS样式与模板的使用.ppt(14页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、网页设计与制作网页设计与制作第一章第一章 HTML语言基础语言基础 2第二章第二章 初识初识Dreamweaver 4第三章第三章 创建与应用表格创建与应用表格 3第四章第四章 使用层和框架布局页面使用层和框架布局页面 3第五章第五章 CSS样式与模板的使用样式与模板的使用 3第六章第六章 行为、库和资源管理行为、库和资源管理 3第七章第七章 建立动态网站建立动态网站 3 第八章第八章 Flash动画基础知识动画基础知识 3第九章第九章 创建动画创建动画 3第十章第十章 使用使用Fireworks编辑网页图像编辑网页图像 31第五章第五章 CSS样式与模板的使用样式与模板的使用一、层叠样式表概
2、述一、层叠样式表概述1 1、什么是、什么是CSSCSS 层层叠叠样样式式表表(CSS)CSS)是是一一系系列列格格式式设设置置规规则则,它它们们控控制制网网页页内内容容的的外外观观。使使用用层层叠叠样样式式表表可可以以为为部部分文件、整份文件乃至整个网站定义样式。分文件、整份文件乃至整个网站定义样式。CSSCSS样式规则由两部分组成:样式规则由两部分组成:选择器选择器和和声明声明。选选择择器器是是样样式式名名称称(如如trtr或或p)p),而而声声明明则则用用于于定定义义样样式式元元素素。声声明明由由属属性性(如如color)color)和和值值(如如red)red)两部分组成。两部分组成。如
3、:如:pfont-sizepfont-size:16px16px;colorcolor:redred 第五章第五章 CSS样式与模板的使用样式与模板的使用2 2、CSSCSS的作用的作用 CSSCSS样式主要是实现网页中各种元素的准确定位。样式主要是实现网页中各种元素的准确定位。CSSCSS样式只需修改一个文件就可以改变一批网页的样式只需修改一个文件就可以改变一批网页的外观和格式,并保证在所有浏览器和平台之间的兼外观和格式,并保证在所有浏览器和平台之间的兼容性,使用户设计的网站拥有更少的编码、更少的容性,使用户设计的网站拥有更少的编码、更少的页数和更快的下载速度。页数和更快的下载速度。使使用用
4、CSSCSS样样式式可可以以控控制制许许多多使使用用HTMLHTML无无法法控控制制的的属属性。如:性。如:指定自定义列表项目符号;指定自定义列表项目符号;指定不同的字体大小和单位指定不同的字体大小和单位(像素、点数等像素、点数等);设置设置HTMLHTML卷标、段落等的样式。卷标、段落等的样式。第五章第五章 CSS样式与模板的使用样式与模板的使用3 3、CSSCSS的基本语法的基本语法 在代码视图模式中,寻找在代码视图模式中,寻找spanspan标识符,就可知道标识符,就可知道是否应用了是否应用了CSSCSS。CSSCSS可将原有的可将原有的HTMLHTML卷标定义成自己想要的效果,卷标定义
5、成自己想要的效果,其基本语法是在卷标之后加上符号,在此符其基本语法是在卷标之后加上符号,在此符号内填入号内填入CSSCSS所设置的所设置的HTMLHTML属性。属性。如:如:h2font-sizeh2font-size:16px16px;colorcolor:redred第五章第五章 CSS样式与模板的使用样式与模板的使用二、二、CSSCSS样式的创建与应用样式的创建与应用DreamweaverDreamweaver拥有自动创建样式的功能,如用户选拥有自动创建样式的功能,如用户选定某段文字后,为其设置字体、字号和颜色等属定某段文字后,为其设置字体、字号和颜色等属性后,系统自动创建以性后,系统自
6、动创建以StyleX(XStyleX(X为数字序列为数字序列)为为名的样式,且自动显示在属性面板的名的样式,且自动显示在属性面板的“样式样式”下下拉列表框中。拉列表框中。用户除了可以应用用户除了可以应用DreamweaverDreamweaver创建的样式外,还创建的样式外,还可以定义自己需要的样式。可以定义自己需要的样式。1 1、认识认识“CSSCSS样式样式”面板面板 窗口窗口/CSSCSS样式样式2 2、认识、认识“相关相关CSS”CSS”面板面板 窗口窗口/标签检查器标签检查器/相关相关CSS(CSS(点击点击CSSCSS属性标签属性标签)第五章第五章 CSS样式与模板的使用样式与模板
7、的使用3 3、创建、创建CSSCSS样式样式 文本文本/CSSCSS样式样式/新建新建对话框中选项的说明(对话框中选项的说明(P120P120)示例:创建一个名为示例:创建一个名为“test1”test1”的样式,要求此样的样式,要求此样式的字体为式的字体为“宋体宋体”,颜色为,颜色为#FF0000FF0000,字号为字号为2424像素,背景颜色为像素,背景颜色为#00#00FFFFFFFF。4 4、应用类样式、应用类样式 类样式是惟一可以应用于文档中任何文本类样式是惟一可以应用于文档中任何文本(与控制与控制文本的标签无关文本的标签无关)的的CSSCSS样式类型。与当前文档关样式类型。与当前文
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 课件 CSS 样式 模板 使用
限制150内