第8章 CSS入门基础知识.ppt

《第8章 CSS入门基础知识.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第8章CSS入门基础知识教学内容：CSS使网页变得更加美观，维护更加方便。CSS在网页制作中起着非常重要的作用，对于控制网页中对象的属性、增加页面中内容的样式、精确的布局定位等都发挥了非常重要的作用。教学重点了解CSS基本概念了解CSS的优点熟悉为什么要在网页中加入CSS教学难点掌握CSS的基本语法结构掌握在网页中添加CSS的方法8.1CSS基础CSS是CascadingStyleSheet的缩写，又称为“层叠样式表”，简称为样式表。它是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计

2、必不可少的工具之一。网页最初是用HTML标签来定义页面文档及格式，如标题、段落

、表格

3、S的网页布局方式，是实现Web标准的基础。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。“Web标准”概述网页的标准——“Web标准”。网页主要由3个部分组成：结构（Structure）表现（Presentation）行为（Behavior）用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的“结构”，而每个组成部分用什么字体、什么字号、什么颜色等，就称为这本书的“表现”。

4、由于传统的图书是固定的，不能变化的，因此它不存在“行为”。在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。“结构”、“表现”和“行为”分别对应于3种非常

5、常用的技术，即(X)HTML、CSS和JavaScript。也就是说，(X)HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。“结构”、“表现”和“行为”的关系DHTML简介DHTML=HTML脚本语言JavaScript++层叠样式表CSS指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素DHTML是制作动态HTML页面的技术！CSS是英语CascadingStyleSheets（层叠样式表）的缩写，它可以与HTML或XHTML超文本标记语

6、言配合来定义网页的外观。网页的整体风格需要统一，包括：文字属性、背景色、链接文字属性等。8.2在网页中加入CSS8.2.1添加CSS的好处当你熟练掌握了Dreamweaver的基本功能后，可能会发现制作的网页有些问题，例如文字不能添加在图片上，段落之间不能设置行距。有时即使懂得一些HTML标签，但是还不能随意改变网页元素的外观，无法随心所欲的编排网页。CSS是网页设计的一个突破，它解决了网页界面排版的难题。HTML的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。8.2.2代码演练：编写C

7、SSCSS的语句是内嵌在HTML文档内的。所以，编写CSS的方法和编写HTML文档的方法是一样的。可以用任何一种文本编辑工具来编写CSS。如Windows下的记事本和写字板、专门的HTML编辑工具（FrontPage、Dreamweaver等），都可以用来编辑CSS文档。P113，学生练习8.2.28.3使用CSS现在CSS已经广泛应用于各种网页制作中。在CSS的配合下，HTML语言发挥出更大的效应。8.3.1CSS的基本语法结构CSS的语法结构仅由3部分组成，选择符、样式属性和值。构造CSS规则在具

8、体介绍CSS之前，先思考一个生活中的问题。张飞{身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;}这个表实际上是由3个要素组成的，即姓名、属性和属性值。CSS的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：2级标题{字体:宋体;大小:15像素;颜色:红色;装饰:下划线}再进一步，如果把上面的表格用英语写出来：h2{font-family:宋体;font-size