《CSS入门基础知识.ppt》由会员分享，可在线阅读，更多相关《CSS入门基础知识.ppt（35页珍藏版）》请在三一办公上搜索。
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是网页设计的一个突破，它解决了网页界面排版的难题。HTM
6、L的标签主要是定义网页的内容，而CSS决定这些网页内容如何显示。,8.2.2 代码演练：编写CSS,CSS的语句是内嵌在HTML文档内的。所以，编写CSS的方法和编写HTML文档的方法是一样的。可以用任何一种文本编辑工具来编写CSS。如Windows下的记事本和写字板、专门的HTML编辑工具（FrontPage、Dreamweaver等），都可以用来编辑CSS文档。P113，学生练习,8.3 使用CSS,现在CSS已经广泛应用于各种网页制作中。在CSS的配合下，HTML语言发挥出更大的效应。,8.3.1 CSS的基本语法结构,CSS的语法结构仅由3部分组成，选择符、样式属性和值。,构造CSS规
7、则,在具体介绍CSS之前，先思考一个生活中的问题。张飞 身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;,这个表实际上是由3个要素组成的，即姓名、属性和属性值。,CSS的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：2级标题 字体:宋体;大小:15像素;颜色:红色;装饰:下划线,再进一步，如果把上面的表格用英语写出来：h2 font-family:宋体;font-size:15px;color:red;text-decoration:underline;,CSS的思想就是首先指定对什么“对象”进行设置
8、，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分“对象”、“属性”和“值”组成的。对象：亦称为选择符。可以是XHTML的标签，如body,h2；也可以是特定或自定义的id或class；,构造CSS规则,一、类型选择符什么是类型选择符？指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型，div,p,span都是。如下：body div p span,选择符,二、群组选择符对于XHMTL对象，可以对一组同时进行了相同的样式指派。使用逗号对选择符进行了分隔，优点在于同样的样式只需要书写一次即可，减少代码量，改善CS
9、S代码结构。如下：h1,h2,h6,p,spanfont-size:12px;color:#FF0000;font-family:arial;,选择符,三、包含选择符对某对象中的子对象进行样式指定，仅对此对象的子对象标签有效，对于其它单独存在或位于此对象以外的子对象，不应用此样式设置。优点在于，帮我们避免过多的id、class设置，直接对所需的元素进行定义。如下：h2 spancolor:red;,选择符,四、id选择符XHTML文件中的每个标签都可以使用一个id=“”的形式进行一个名称指派，id具有唯一性，不可以重复。例如：CSS如下：#contentfont-size:14px;line-
10、height:120%;,选择符,五、class选择符class是类或类别，对于XHTML标签使用class=。与id不同，class可重复使用，对于多个样式相同的元素，可以直接定义为一个class。class的优点对CSS代码重用性有良好的体现。XHTML如下：CSS如下：.hemargin:10px;background-color:red;,选择符,六、标签指定式的选择符如果想同时使用id和class，也想同时使用标签选择符，可以使用如下的方式：h1#content/*表示所有id为content的h1标签*/h1.p1/*表示所有class为p1的h1标签*/标签指定式选择符的精度介于
11、标签选择符及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种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。,8.3.2 在网页中添加CSS的方法,内部样式表,您如果希望某段文字和其他段落的文字显示风格不一样，那么请
12、采用“行内样式”。行内样式使用元素标签的 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某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式某张网页内，部分内容“与众不同”，采用内部样式表,对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑内部样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；,内嵌样式,行内样式,某个HTML标签,8.3.3 代码演练,学生练习，以链接外部样式表方式添加CSS,8.4 综合实训：给网页添加CSS,
