外部CSS样式表课件.ppt

外部CSS样式表课件.ppt

ID:57113427

大小:2.78 MB

页数:82页

时间:2020-07-31

外部CSS样式表课件.ppt_第1页
外部CSS样式表课件.ppt_第2页
外部CSS样式表课件.ppt_第3页
外部CSS样式表课件.ppt_第4页
外部CSS样式表课件.ppt_第5页
资源描述:

《外部CSS样式表课件.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、网页设计与制作经济与管理学院陈占伟第8章CSS样式表【知识目标】熟悉CSS样式表的概念掌握CSS网页的创建【能力目标】掌握CSS方法创建网页的方法掌握CSS样式的使用方法第8章CSS样式表CSS样式概述创建CSS样式CSS样式的应用方式设置CSS样式CSS样式中的滤镜8.1CSS样式概述CSS样式CSS样式表(CascadingStyleSheets,简称CSS),又称为层叠式样式表,由W3C(WorldWideWebConsortium)组织开发的。CSS样式是预先定义的一个格式的集合,包括字体、大小、颜色、对齐方式等。利用C

2、SS样式可以使整个站点的风格保持一致,是网页设计中用途最广泛、功能最强大的元素之一。思考:利用HTML也可以控制文本的颜色、大小、对齐方式等,那么为什么还要引入CSS?生活总是美丽的

不是苦恼太多,而是我们的胸怀不够开阔

不是幸福太少,而是我们还不懂得生活

忧愁时,就写一首诗

快乐时,就唱一支歌

3、论天上掉下来的是什么

生命总是美丽的

p{text-align:center;}

生活总是美丽的

不是苦恼太多,而是我们的胸怀不够开阔

不是幸福太少,而是我们还不懂得生活

忧愁时,就写一首诗

快乐时,就唱一支歌

无论天上掉下来的是什么生命总是美丽的

8.1CSS样式概述HTML主要侧重于定义内容,比如

表示一个段落,

表示标题,而并没有过多设计HTML的排版和界面效果。为了解决HTML排版和界面效果的局限

4、性的问题,人们也走了不少弯路,用了一些不好的方法,比如给HTML增加很多的属性结果将代码变得很臃肿,将文本变成图片,过多利用Table来排版,用空白的图片表示白色的空间等。直到CSS出现。8.1CSS样式概述CSS样式表的特点1)可以将网页的显示控制与显示内容分离。2)能更有效地控制页面的布局。3)可以制作出体积更小、下载更快的网页。4)可以更快、更方便地维护及更新大量的网页。8.1CSS样式概述CSS样式的类型在Dreamweaver8可以定义以下的样式类型:自定义CSS:指根据用户的需要创建一个CSS样式属性,可应用到文字,

5、图片等网页元素中。重定义标签的CSS:可以对HTML语言中的某一标签进行重新定义。CSS选择器样式(高级样式):控制标签属性,通常用来设置链接文字的样式,对链接文字的控制有4种。(1)自定义CSS(类样式)根据用户的需要创建一个CSS样式属性,可应用到文字,图片等网页元素中。(2)重定义标签的CSS可以对HTML语言中的某一标签进行重新定义(3)CSS选择器样式(高级样式)可以用来控制标签属性,通常用来设置链接文字样式。8.1CSS样式概述CSS样式面板用来查看、创建、编辑和删除CSS样式,并且可以在该面板中将外部样式表附加到当

6、前文档。8.1CSS样式概述CSS样式面板单击菜单栏中“窗口”

7、“CSS样式”命令或用组合键Shift+F11键打开CSS样式面板,如图所示。“全部”模式  “正在”模式8.1CSS样式概述CSS样式面板有“全部”和“正在”两种模式。“全部”模式:显示两个窗格:“所有规则”窗格(上部)和“属性”窗格(下部)。“正在”模式:显示三个窗格:显示文档中当前所选内容的CSS属性的“所选内容的摘要”窗格,显示所选属性的位置的“规则”窗格,以及CSS属性的“属性”窗格。8.1CSS样式概述面板中主要功能按钮如下:显示类别视图按钮显示列表视图

8、按钮显示设置属性按钮表示附加或链接外部样式表。新建样式表。编辑选中的样式表。删除选中的样式表8.1CSS样式概述创建CSS样式1.在CSS样式面板中,单击“新建”按钮,打开“新建CSS规则”对话框,如图。2.设置选择器类型为“类”,名字为.dazi,定义在“新建样式表文件”,单击“确定”按钮,打开“保存样式表文件”对话框。8.1CSS样式概述3.保存样式表文件,同时打开“.dazi的CSS规则定义的对话框,如图所示。8.1CSS样式概述4.在“类型”选项中,设置字体字号等项目,完成后单击“确定”按钮,新建的样式出现在样式面板中,

9、如图所示。8.1CSS样式概述CSS样式设置的代码规则由选择器和声明两部分组成。选择器是样式标识符(如p、h1、类名或ID)声明用于设置样式的属性。h1color:red;font-size:25px;{}选择器属性值属性值声明声明p{text-align:ce

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。