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

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

2、，如标题、段落、表格等。但这些标签不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1，自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。,8.1.1 CSS基本概念,8.1.2 CSS的优点,掌握基于CSS的网页布局方式，是实现Web标准的基础。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就

3、可以改变网页的外观和格式。,“Web标准”概述,网页的标准“Web标准”。 网页主要由3个部分组成： 结构（Structure） 表现（Presentation） 行为（Behavior） 用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的“结构”，而每个组成部分用什么字体、什么字号、什么颜色等，就称为这本书的“表现”。,由于传统的图书是固定的，不能变化的，因此它不存在“行为”。 在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，这就构成了一个网页的“结构”。 每种组成部分的字号、字体和颜色等属性就构成了它的“表现”。 网页和传统媒体不同的一点

4、是，它是可以随时变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的“行为”。,因此，概括来说，“结构”决定了网页“是什么”，“表现”决定了网页看起来是“什么样子”，而“行为”决定了网页“做什么”。 “结构”、“表现”和“行为”分别对应于3种非常常用的技术，即(X)HTML、CSS和JavaScript。 也就是说，(X)HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。,“结构”、“表现”和“行为”的关系,DHTML 简介,DHTML,=,HTML,脚本语言 JavaScript,+,+,层叠样式表 CSS,指定一个网页的元素

5、,决定元素的大小 颜色和位置,操纵网页的元素,DHTML 是制作动态 HTML 页面的技术！,CSS是英语Cascading Style Sheets（层叠样式表）的缩写，它可以与HTML或XHTML超文本标记语言配合来定义网页的外观。 网页的整体风格需要统一，包括：文字属性、背景色、链接文字属性等。,8.2 在网页中加入CSS,8.2.1 添加CSS的好处,当你熟练掌握了Dreamweaver的基本功能后，可能会发现制作的网页有些问题，例如文字不能添加在图片上，段落之间不能设置行距。有时即使懂得一些HTML标签，但是还不能随意改变网页元素的外观，无法随心所欲的编排网页。 CSS是网页设计的一

6、个突破，它解决了网页界面排版的难题。HTML的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。,8.2.2 代码演练：编写CSS,CSS的语句是内嵌在HTML文档内的。所以，编写CSS的方法和编写HTML文档的方法是一样的。可以用任何一种文本编辑工具来编写CSS。如Windows下的记事本和写字板、专门的HTML编辑工具（FrontPage、Dreamweaver等），都可以用来编辑CSS文档。 P113，学生练习8.2.2,8.3 使用CSS,现在CSS已经广泛应用于各种网页制作中。在CSS的配合下，HTML语言发挥出更大的效应。,8.3.1 CSS的基本语法结构,CSS的语法结

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

8、decoration: underline; ,CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分“对象”、“属性”和“值”组成的。 对象：亦称为选择符。可以是XHTML的标签，如body,h2；也可以是特定或自定义的id或class；,构造CSS规则,一、类型选择符 什么是类型选择符？指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型，div,p,span都是。如下： body div p span ,选择符,二、群组选择符 对于XHMTL对象，可以对一组同时进

9、行了相同的样式指派。使用逗号对选择符进行了分隔，优点在于同样的样式只需要书写一次即可，减少代码量，改善CSS代码结构。如下： h1,h2,h6,p,spanfont-size:12px;color:#FF0000;font-family: arial;,选择符,三、包含选择符对某对象中的子对象进行样式指定，仅对此对象的子对象标签有效，对于其它单独存在或位于此对象以外的子对象，不应用此样式设置。优点在于，帮我们避免过多的id、class设置，直接对所需的元素进行定义。如下： h2 spancolor:red;,选择符,四、id选择符 XHTML文件中的每个标签都可以使用一个id=“”的形式进行一

10、个名称指派，id具有唯一性，不可以重复。例如： CSS如下： #contentfont-size:14px;line-height:120%;,选择符,五、class选择符 class是类或类别，对于XHTML标签使用class=。与id不同，class可重复使用，对于多个样式相同的元素，可以直接定义为一个class。class的优点对CSS代码重用性有良好的体现。XHTML如下： CSS如下： .hemargin:10px;background-color:red;,选择符,六、标签指定式的选择符 如果想同时使用id和class，也想同时使用标签选择符，可以使用如下的方式： h1#conte

11、nt /*表示所有id为content的h1标签*/h1.p1 /*表示所有class为p1的h1标签*/ 标签指定式选择符的精度介于标签选择符及id/class选择符之间，是常用的选择符之一。,选择符,七、组合选择符 对于上面的所有选择符而言，进行灵活组合使用。如下： #content h1 表示id为content的标签下的所有h1标签h1 .p1,#content h1 /*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/h1#content h2/*id为content的h1标签下的h2标签*/,选择符,添加CSS有4种方法：链接外部样式表、内部

12、样式表、导入外部样式表和内嵌样式。,8.3.2 在网页中添加CSS的方法,内部样式表,您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。,/*关键代码-*/ 剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以 , 应用样式 P font-size:20px; color:blue; text-align:center 我是段落 1 我是段落 2 我是段落 3 我们的样式绝对统一 ,内嵌样式,所有的段落都采用 P

13、样式，保证样式统一,内部样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。,用分号隔开,外部样式,根据样式文件与网页的关联方式又分为： 链接（LINK ）外部样式表 导入（import）外部样式表,样式文件 P . ,网页2,网页3,网页1,链接外部样式表,使用LINK（链接）标签 ，语法： ,第一步：创建样式表文件newstyle.css,第二步：把样式文件和网页关联,样式文件： newstyle.css P . ,Onel.htm,another.htm,第三步：浏览查看各网页,导入外部样式表,使用import导入 ，语法： import 样式表文件.css; ,操作步骤同链接样式表,外部样式文件,样式的混合使用,内部样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用： 有关整个网站统一风格的样式代码，放置在独立的样式文件*.css 某些样式不同的页面，除了链接外部样式文件，还需定义内嵌