《CSS入门基础知识.ppt》由会员分享，可在线阅读，更多相关《CSS入门基础知识.ppt（35页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第8章章 CSS入门基础知识入门基础知识教学内容：教学内容：CSSCSS使网页变得更加美观，维使网页变得更加美观，维护更加方便。护更加方便。CSSCSS在网页制作中起着非常在网页制作中起着非常重要的作用，对于控制网页中对象的属重要的作用，对于控制网页中对象的属性、增加页面中内容的样式、精确的布性、增加页面中内容的样式、精确的布局定位等都发挥了非常重要的作用。局定位等都发挥了非常重要的作用。教学重点教学重点v了解了解CSS基本概念基本概念v了解了解CSS的优点的优点v熟悉为什么要在网页中加入熟悉为什么要在网页中加入CSSvv教学难点教学难点v掌握掌握CSS的基本语法结构的基本语法结构v掌握在网
2、页中添加掌握在网页中添加CSS的方法的方法8.1 CSS基础基础CSS是是Cascading Style Sheet的的缩缩写写，又又称称为为“层层叠叠样样式式表表”，简简称称为为样样式式表表。它它是是一一种种制制作作网网页页的的新新技技术术，现现在在已已经经为为大大多多数数浏浏览览器器所所支支持持，成成为为网网页设计必不可少的工具之一。页设计必不可少的工具之一。网页最初是用网页最初是用HTML标签来定义页面文档标签来定义页面文档及格式，如标题及格式，如标题、段落、段落、表格、表格等。但这些标签不能满足更多的文档样式需求，等。但这些标签不能满足更多的文档样式需求，为了解决这个问题，在为了解决这
3、个问题，在1997年年W3C颁布颁布HTML4标准的同时也公布了有关样式表的第一标准的同时也公布了有关样式表的第一个标准个标准CSS1，自，自CSS1的版本之后，又在的版本之后，又在1998年年5月发布了月发布了CSS2版本，样式表得到了更多的版本，样式表得到了更多的充实。使用充实。使用CSS能够简化网页的格式代码，加能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。数量，大大减少了重复劳动的工作量。8.1.1 CSS基本概念基本概念8.1.2 CSS的优点的优点 掌握基于掌握基于CSSCSS的网页布局方
4、式，是实的网页布局方式，是实现现WebWeb标准的基础。在网页制作时采用标准的基础。在网页制作时采用CSSCSS技术，可以有效地对页面的布局、字技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简确的控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格单的修改，就可以改变网页的外观和格式。式。“Web标准”概述网页的标准网页的标准“Web“Web标准标准”。网页主要由网页主要由3 3个部分组成：个部分组成：v结构（结构（StructureStructure）v表现（表现（PresentationPre
5、sentation）v行为（行为（BehaviorBehavior）v用一本书来比喻，一本书分为篇、章、节和用一本书来比喻，一本书分为篇、章、节和段落等部分，这就构成了一本书的段落等部分，这就构成了一本书的“结构结构”，而每个组成部分用什么字体、什么字号、，而每个组成部分用什么字体、什么字号、什么颜色等，就称为这本书的什么颜色等，就称为这本书的“表现表现”。v由于传统的图书是固定的，不能变化的，因此由于传统的图书是固定的，不能变化的，因此它不存在它不存在“行为行为”。v在一个网页中，同样可以分为若干个组成部分，在一个网页中，同样可以分为若干个组成部分，包括各级标题、正文段落、各种列表结构等，包
6、括各级标题、正文段落、各种列表结构等，这就构成了一个网页的这就构成了一个网页的“结构结构”。v每种组成部分的字号、字体和颜色等属性就构每种组成部分的字号、字体和颜色等属性就构成了它的成了它的“表现表现”。v网页和传统媒体不同的一点是，它是可以随时网页和传统媒体不同的一点是，它是可以随时变化的，而且可以和读者互动，因此如何变化变化的，而且可以和读者互动，因此如何变化以及如何交互，就称为它的以及如何交互，就称为它的“行为行为”。v因此，概括来说，因此，概括来说，“结构结构”决定了网页决定了网页“是什是什么么”，“表现表现”决定了网页看起来是决定了网页看起来是“什么样什么样子子”，而，而“行为行为”
7、决定了网页决定了网页“做什么做什么”。v“结构结构”、“表现表现”和和“行为行为”分别对应于分别对应于3 3种非常常用的技术，即种非常常用的技术，即(X)HTML(X)HTML、CSSCSS和和JavaScriptJavaScript。v也就是说，也就是说，(X)HTML(X)HTML用来决定网页的结构和用来决定网页的结构和内容，内容，CSSCSS用来设定网页的表现样式，用来设定网页的表现样式，JavaScriptJavaScript用来控制网页的行为。用来控制网页的行为。“结构”、“表现”和“行为”的关系DHTML 简介DHTMLDHTML=HTMLHTML脚本语言脚本语言JavaScrip
8、tJavaScript+层叠样式表层叠样式表CSSCSS指定一个网页的元素决定元素的大小颜色和位置操纵网页的元素DHTML DHTML 是制作是制作动态动态 HTML HTML 页面的技术！页面的技术！CSS是是英英语语Cascading Style Sheets（层层叠叠样样式式表表）的的缩缩写写，它它可可以以与与HTML或或XHTML超超文文本本标标记记语语言言配配合合来来定定义网页的外观。义网页的外观。网网页页的的整整体体风风格格需需要要统统一一，包包括括：文文字字属性、背景色、链接文字属性等。属性、背景色、链接文字属性等。8.2 在网页中加入在网页中加入CSS8.2.1 添加添加CSS
9、的好处的好处 当你熟练掌握了当你熟练掌握了DreamweaverDreamweaver的基本功能的基本功能后，可能会发现制作的网页有些问题，例如后，可能会发现制作的网页有些问题，例如文字不能添加在图片上，段落之间不能设置文字不能添加在图片上，段落之间不能设置行距。有时即使懂得一些行距。有时即使懂得一些HTMLHTML标签，但是还标签，但是还不能随意改变网页元素的外观，无法随心所不能随意改变网页元素的外观，无法随心所欲的编排网页。欲的编排网页。CSS CSS是网页设计的一个突破，它解决了网是网页设计的一个突破，它解决了网页界面排版的难题。页界面排版的难题。HTMLHTML的标签主要是定义的标签主
10、要是定义网页的内容，而网页的内容，而CSSCSS决定这些网页内容如何显决定这些网页内容如何显示。示。8.2.2 代码演练：编写代码演练：编写CSS CSSCSS的语句是内嵌在的语句是内嵌在HTMLHTML文档内的。所以，编写文档内的。所以，编写CSSCSS的方法和编写的方法和编写HTMLHTML文档的方法是一样的。可以用文档的方法是一样的。可以用任何一种文本编辑工具来编写任何一种文本编辑工具来编写CSSCSS。如。如WindowsWindows下的记下的记事本和写字板、专门的事本和写字板、专门的HTMLHTML编辑工具（编辑工具（FrontPageFrontPage、DreamweaverDr
11、eamweaver等），都可以用来编辑等），都可以用来编辑CSSCSS文档。文档。P113P113，学生练习，学生练习8.3 使用使用CSS 现在现在CSSCSS已经广泛应用于各种网页已经广泛应用于各种网页制作中。在制作中。在CSSCSS的配合下，的配合下，HTMLHTML语言语言发挥出更大的效应。发挥出更大的效应。8.3.1 CSS的基本语法结构的基本语法结构 CSSCSS的语法结构仅由的语法结构仅由3 3部分组成，选部分组成，选择符、样式属性和值。择符、样式属性和值。构造CSS规则v在具体介绍在具体介绍CSSCSS之前，先思考一个生活中之前，先思考一个生活中的问题。的问题。张飞张飞 身高身
12、高:185cm;:185cm;体重体重:105kg;:105kg;性别性别:男男;性格性格:暴躁暴躁;民族民族:汉族汉族;这个表实际上是由3个要素组成的，即姓名、属性和属性值。vCSSCSS的作用就是设置网页的各个组成部分的的作用就是设置网页的各个组成部分的表现形式。表现形式。v因此，如果把上面的表格换成描述网页上一因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：个标题的属性表，可以设想应该大致如下：2 2级标题级标题 字体字体:宋体宋体;大小大小:15:15像素像素;颜色颜色:红色红色;装饰装饰:下划线下划线 v再进一步，如果把上面的表格用英语写出来：h2 fon
13、t-family:宋体;font-size:15px;color:red;text-decoration:underline;vCSSCSS的思想就是首先指定对什么的思想就是首先指定对什么“对象对象”进行设置，然后指定对该对象的哪个方面进行设置，然后指定对该对象的哪个方面的的“属性属性”进行设置，最后给出该设置的进行设置，最后给出该设置的“值值”。v因此，概括来说，因此，概括来说，CSSCSS就是由就是由3 3个基本部分个基本部分“对象对象”、“属性属性”和和“值值”组成的。组成的。v对象：亦称为选择符。可以是对象：亦称为选择符。可以是XHTMLXHTML的标的标签，如签，如body,h2bo
14、dy,h2；也可以是特定或自定义的；也可以是特定或自定义的idid或或classclass；构造构造CSS规则规则一、类型选择符一、类型选择符什么是类型选择符？指以网页中已有的标签什么是类型选择符？指以网页中已有的标签类型作为名称的行径符。类型作为名称的行径符。bodybody是网页中的是网页中的一个标签类型，一个标签类型，div,p,spandiv,p,span都是。都是。如下：如下：body body div div p p span span 选择符选择符二、群组选择符二、群组选择符对于对于XHMTLXHMTL对象，可以对一组同时进行了相同对象，可以对一组同时进行了相同的样式指派。使用逗
15、号对选择符进行了分的样式指派。使用逗号对选择符进行了分隔，优点在于同样的样式只需要书写一次隔，优点在于同样的样式只需要书写一次即可，减少代码量，改善即可，减少代码量，改善CSSCSS代码结构。如代码结构。如下：下：h1,h2,h6,p,spanh1,h2,h6,p,spanfont-size:12px;font-size:12px;color:#FF0000;color:#FF0000;font-family:arial;font-family:arial;选择符选择符三、包含选择符三、包含选择符对某对象中的子对象进行样式指定，仅对此对某对象中的子对象进行样式指定，仅对此对象的子对象标签有效，
16、对于其它单独存在对象的子对象标签有效，对于其它单独存在或位于此对象以外的子对象，不应用此样式或位于此对象以外的子对象，不应用此样式设置。优点在于，帮我们避免过多的设置。优点在于，帮我们避免过多的idid、classclass设置，直接对所需的元素进行定义。设置，直接对所需的元素进行定义。如下：如下：h2 spanh2 span color:red;color:red;选择符选择符四、四、idid选择符选择符XHTMLXHTML文件中的每个标签都可以使用一个文件中的每个标签都可以使用一个id=“”id=“”的形式进行一个名称指派，的形式进行一个名称指派，idid具有唯具有唯一性一性，不可以重复。
17、不可以重复。例如：例如：CSSCSS如下：如下：#contentcontent font-size:14px;font-size:14px;line-height:120%;line-height:120%;选择符选择符五、五、classclass选择符选择符classclass是类或类别是类或类别，对于对于XHTMLXHTML标签使用标签使用class=class=。与与idid不同，不同，classclass可重复使用，对于多个样式相同可重复使用，对于多个样式相同的元素，可以直接定义为一个的元素，可以直接定义为一个classclass。classclass的优的优点对点对CSSCSS代码重
18、用性有良好的体现。代码重用性有良好的体现。XHTMLXHTML如下：如下：CSS CSS如下：如下：.he.hemargin:10px;margin:10px;background-color:red;background-color:red;选择符选择符六、标签指定式的选择符六、标签指定式的选择符如果想同时使用如果想同时使用idid和和classclass，也想同时使用标签选，也想同时使用标签选择符，可以使用如下的方式：择符，可以使用如下的方式：h1#content h1#content/*/*表示所有表示所有idid为为contentcontent的的h1h1标签标签*/*/h1.p1 h
19、1.p1/*/*表示所有表示所有classclass为为p1p1的的h1h1标签标签*/*/标签指定式选择符的精度介于标签选择符及标签指定式选择符的精度介于标签选择符及id/classid/class选择符之间，是常用的选择符之一。选择符之间，是常用的选择符之一。选择符选择符七、组合选择符七、组合选择符对于上面的所有选择符而言，进行对于上面的所有选择符而言，进行灵活灵活组合使用。组合使用。如下：如下：#content h1#content h1 表示表示idid为为contentcontent的标签下的所有的标签下的所有h1h1标签标签h1.p1,#content h1 h1.p1,#cont
20、ent h1/*/*表示表示h1h1下的所有下的所有classclass为为p1p1的标签以及的标签以及idid为为contentcontent的标签下的所有的标签下的所有h1h1标签标签*/*/h1#content h2h1#content h2/*id/*id为为contentcontent的的h1h1标签下的标签下的h2h2标签标签*/*/选择符选择符 添加添加CSS有有4种方法：链接外部样式表、种方法：链接外部样式表、内部样式表、导入外部样式表和内嵌样式。内部样式表、导入外部样式表和内嵌样式。8.3.2 8.3.2 在网页中添加在网页中添加CSSCSS的方法的方法内部样式表您如果希望某
21、段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。/*关键代码-*/剩余时间：成交结束 新旧程度：全新 所 在 地：北京 宝贝数量：5 件 浏 览 量：220 次 另送价值50元的充电器套装！(一个充电器，两节充电电池)可使用半年以应用样式 P font-size:20px;color:blue;text-align:center 我是段落 1我是段落 2我是段落 3我们的样式绝对统一内嵌样式样式表样式规则所有的段落都采用 P 样式，保证样式统一内部样式表局限于某个标签，如果希望本网页内的所以同类标签都采用统一样式，这时应采用内嵌样式。
22、选择器用分号隔开外部样式v 根据样式文件与网页的关联方式又分为：q链接（LINK）外部样式表q导入（导入（import）外部样式表）外部样式表样式文件P.网页2网页3网页1链接外部样式表使用LINK（链接）标签，语法：第一步：创建样式表文件newstyle.css 第二步：把样式文件和网页关联样式文件：样式文件：newstyle.css P.Onel.htmanother.htm 第三步：浏览查看各网页导入外部样式表使用import导入，语法：import 样式表文件.css;操作步骤同链接样式表 外部样式文件外部样式文件样式的混合使用内部样式表、内嵌样式表、外部样式表各有优势，实际的开发中常
23、常需要混合使用：v有关整个网站统一风格的样式代码，放置在独立的样式文件*.cssv某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式v某张网页内，部分内容“与众不同”，采用内部样式表对于某个HTML标签：1）如果有多种样式，如果规定的样式没有冲突，则叠加；2）如果有冲突，则最先考虑内部样式表显示，如果没有，再考虑内嵌样式显示，如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示；内嵌样式内嵌样式 行内样式行内样式 某个HTML标签8.3.3 8.3.3 代码演练代码演练学生练习，以链接外部样式学生练习，以链接外部样式表方式添加表方式添加CSSCSS8.4 8.4 综合实训：给网页添加综合实训：给网页添加CSSCSS