《经典css教程》ppt课件

《《经典css教程》ppt课件》由会员分享，可在线阅读，更多相关《《经典css教程》ppt课件（110页珍藏版）》请在金锄头文库上搜索。

1、第3章 CSS技术,HTML标记的不足之处 代码繁琐 格式的一致性差 可维护性差 网页现实效果缺乏动态性与交互性,层叠样式表CSS （Cascading Style Sheet）,一.CSS的基础知识,CSS是为了简化Web页面的更新工作而诞生的，它的功能非常强大，它将让网页变得更加美观，维护更加方便。CSS跟HTML一样，也是一种标记语言，甚至很多属性都来源于HTML，它也需要通过浏览器解释执行。任何懂得HTML的人都可以掌握，非常容易。 CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它是HTML功能的扩展，使网页设计者能够以更有效的方式设计

2、出更具表现力的网页效果。,1. 样式表和HTML的关系,样式表(StyleSheets)技术诞生于1996年，全称是层叠样式表(Cascading StyleSheets，简称CSS)。那什么是样式呢？样式其实就是格式，对网页来说，像文字的大小、颜色以及图片位置等，都是网页显示信息的样式。那层叠又是什么意思？意思是当我们在HTML文件中引用数个定义样式文件（CSS文件）时，若数个样式文件间所定义的样式发生冲突，将依据层次处理。 样式表是HTML的表兄弟。样式表的产生是由于最初的HTML标准还不尽人意，用HTML制作网页就像是用画笔绘制一幅图画，只有那些对网页制作痴迷而执着的人才可能精确地实现预

3、定的结果。正是在这种情况下，样式表技术诞生了，样式表的目的是为了“对布局、字体、背景和其他图文效果实现更加精确的控制”。,HTML 4.0版本已经包括了样式表的内容。样式表正在逐渐改变设计、制作网页的方法，为网页创新奠定了基础。 样式表的宗旨就是将结构和格式分离。样式表将定义结构和定义格式的两部分相互分离，从而使网页设计人员能够对网页的布局施加更多的控制。HTML仍可以保持简单明了的初衷，而样式表代码独立出来后则从另一角度控制网页外观。 利用样式表，可以将站点上所有的网页都指向某个CSS文件，用户只需要修改CSS文件中的某一行，那么整个站点都会随之发生改变。这样，通过样式表就可以将许多网页的风

4、格格式同时更新，不用再一页一页地更新了。,样式表的基本结构是怎样的？下面通过一个简单的样式表实例，让你获得对样式表整体性的感性认识。 首先建立一个简单的HTML文件。,2. 样式表的基本结构, 简单的样式表 样式表 这是一个简单的样式表 ,现在，给这个HTML文件加一些样式表。只需在标签之前插入以下代码： 这样就已经制作出了使用样式表的网页。从浏览器中打开网页（当然首先要保证浏览器支持样式表），网页显示效果如下图所示。,简单样式表效果,由这个简单的样式表实例，可以看出： 一个样式表由许多样式规则组成的，用以告诉浏览器怎样去显示一个网页文档。 样式表的核心是规则，样式表的规则如下： 选择符属性1

5、:值1;属性2:值2 如，h1color:green 这个规则就是告诉浏览器所有标签和之间的文字以绿色显示。 其中h1就是选择符，它是一个附带样式功能的HTML标签。花括号中所包含的就是属性，它用于定义实际的样式，每个属性包括两部分：属性名（如color）和属性值（如green）。,我们可以使用四种方法将样式表加入到网页中，每种方法都有其不同的优点： (1)将样式表加入到HTML文件行中 (2)将样式表嵌入到HTML文件的文档头中 (3)将一个外部样式表链接到HTML文件上 (4)将一个外部样式表输入到HTML文件中 以上四种方法，可分成内部样式表（前两者）及外部样式表（后两者）两类。,3.如

6、何在网页中加入css,(1) 在行内直接加入样式,可以直接在HTML代码行中加入样式规则，这种方法适用于指定网页内的某一小段文字的显示风格。不过，利用这种方法定义样式时，效果只可以控制该标签，其语法如下： ,(2) 把样式表嵌入到文档头,在标签中，用设置style属性的方法，一次只能控制一个标签的样式，实在让人看不出CSS对网页设计有什么特别的效果。在这一节，我们将讲述在文档头嵌入样式表规则的方法，浏览器在整个HTML网页中都执行该规则。如果想对网页一次性加入样式表，就可采用该方法。 这种方法就是将所有的样式表信息都列于HTML文档的头部，基本语法如：, . ,说明： 标签是用来说明所要定义的

7、样式。type属性是指定标签以CSS的语法定义。 样式表基本格式中的type=“text/css“用于说明这是一段CSS规则代码。 为了防止不支持CSS的浏览器将标签间的CSS规则当成普通字符串，而显示在网页上，应将CSS的规则代码插入标签之间。 选择符1选择符n：选择符就是样式的名称，在这里选择符可以使用HTML标签的名称，所有HTML标签都可以作为CSS选择符。 样式属性：定义样式的属性名称,前面，我们介绍了在文档头嵌入样式表规则的方法。这种方式定义出的样式，将只限于在该HTML文件中，效益并不大。如果想要达到集中管理网站网页样式的目标时，就必须将样式定义在独立的CSS文件中，并将该文件链

8、接或输入到要运用样式的HTML文件。 这种方法就是将多个HTML文件都链接到一个样式表文件。这个外部的样式表将设定所有网页的规则。如果改变样式表文件中的某一个细节，所有网页都会随之改变。如果维护的站点很大，则这种方式绝对会有其用武之地。 它的使用方法是：创建一个普通的网页，但不使用规则，而是在HTML文档头部使用标签。,(3) 链接到样式表,基本语法如下： . ,说明： *.css为预先编写好的样式表文件。 外部样式表文件中不能含有任何像或这样的HTML标签。样式表仅仅由样式表规则或声明组成。 在href属性中可以使用绝对URL或者相对URL。 外部样式表文件中，无须使用注释标签。 如同发布H

9、TML文件那样，将这个CSS文件发布到服务器中。在网页被打开时，浏览器将依照链接标签将含有链接外部样式表文件的HTML网页按照样式表规则显示。,17,单一的样式可以通过多个样式表给出，例如： 在这个例子中，3个样式表组合成一个“contemporary“样式，要将多个样式表组合成一个单一样式，必须在每个样式表中使用相同的title。 当样式被应用到很多的网页时，采用链接到外部样式表的方式是理想的。网页制作者使用外部样式表可以仅仅通过改变一个文件而改变整个网站的外观；同样，大多数浏览器会保存外部样式表文件到缓冲区，从而提高了显示网页时的速度。,18,输入样式表的方法同链接到外部样式表文件类似。其

10、语法如下： 说明： import语句后的“；”号是必须的。 要输入的样式表文件的扩展名为.css。,(4) 输入样式表,19,我们介绍了四种样式表的使用方法，这四种方法在使用上各有其特色，但当这四种方法同时出现时，浏览器会以哪种方法为优先使用呢？答案是在行内直接加入样式顺序为最高。至于其他三种的顺序则是一样的，如果其他三种方法同时出现，且各方法定义的样式又都不同时，浏览会选择较后定义的样式来显示。,20,(1) class类选择符 class类选择符用于指定标签属于何种样式类。 class类选择符的使用语法如下:,4. class与id类选择符,class、id类选择符能给网页制作者带来极大的

11、便利。,21, 或者 ,22,下面是语法各部分的说明： *.a1.*.an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。*符号也可以用HTML内的标签替代（即标签1.标签n），此外*符号，在设置可以省略。 标签1.a1.标签n.an：为HTML的标签名称，即前面提过的*符号，也可以用HTML内的标签替代。不同点在于，若在定义class类选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。,23,例如，在样式表中可以定义这样的类，代码如下： .ppcolor:lime; font-family:黑体

12、p.ptcolor:blue; font-family:仿宋 这些类可以使用class属性在HTML中引用： 这是我们定义的PP类 这是我们定义的PT类 在这个例子中，pp类可以用于任何HTML标签，因为它在样式表中没有与特定的HTML标签关联。而这个例子中pt类只能用于标签。 对于HTML文档中在结构上相同的部分，类是应用样式的有效办法。,24,(2). id类选择符 id类选择符与class两者最大的差别在于定义样式名称前的符号,用class定义时为“*.样式名称”；若用id定义时为“#样式名称”。 id与class虽然在标签内的定义写法不太一样，但基本上其显示在网页上的效果是一样的。 i

13、d类选择符的使用语法如下: ,25,或者 下面是语法各部分的说明： (1) #a1.#an：为定义的类选择符名称，通常在定义样式时指定给样式的名称。其适用范围是整个HTML文件中所有由class类选择符所引用的设置。 (2) 标签1.a1.标签n.an：为HTML的标签名称，不同点在于，若在id选择符前加上HTML的标签时，其适用范围将只限于该标签所包含的内容。,26,5. Div标签和Span标签,标签可用来定义网页上的一个特定区域，在该区域范围内可包含文字、图形、表格、窗体，甚至其他div等。在标签内的所有内容，都将调用此标签所定义出的样式，且区域与区域间彼此是独立的。 当编写HTML文件

14、，要定义区域间使用不同样式时，就可以使用标签达到这个效果。 标签应用于HTML文件，其语法如下： 或者 在使用标记时，可以使用width与height属性设置区域的大小。,27,span标签,标签主要用来定义网页上的区域，通常用于比较大范围的设置，而标签也可以用在区段的定义，不过一般都是用在网页中某一小段文件段落。其语法如下： 或者 span标签被加入到HTML中的主要目的是用于样式表，所以当样式表失效时它就没有任何作用。span标签可以使用clsss和id类选择符。 与的差异： 在区域内的对象与区域外的上下文会自动换行；而区域内的对象与区域外的上下文不会自动换行。 与标签可同时使用，但建议标

15、签可包含，但最好不要包含标签，否则会造成标签的区域不完整，而形成断行的现象。,28,6. CSS的几个特性,1可以归类CSS的规则 可以多个HTML标签采用同一样式，例： h1,pfont-family:黑体 这项规则设定所有被和标签包含的网页内容将用黑体显示。 2样式表的规则具有继承性 样式表的规则可从母体延续到子体，例： bcolor:blue 这项规则告诉浏览器将所有之内的文字用蓝色显示。但是在下列情况下，浏览器该如何处理呢？ 这是一个样式表实例 对于标签并没有设定样式，但因为位于之中，所以它将继承母体设定的样式，也以蓝色显示。,29,3情景选择 如果想让所有斜体显示的文字（即被和标识的

16、文字）都以红色显示，但条件是只有当这些斜体显示的文字出现在通常的段落文字（即被标识的文字）内时。这就需要使用“情景选择”来实现。通过“情景选择”可设定一个可以执行选择说明的情景。 带情景选择的样式表的格式如下： 情景标签 标识符属性:属性值 其中的HTML代码： 这是一个样式表实例 这是一个样式表实例 表示只将所有之内斜体显示的文字以红色且大字体显示。所以，之外斜体显示的文字不会以红色显示，而之内的文字则以指定字体显示。,二. CSS的属性,1 设置字体样式 2 控制图文布局 3 颜色及背景 4 美化网页与超链接的设置 5 CSS定位,1. 设置字体样式,(1) 字体属性font-family,在网页编写的过程中，若没有对字体做任何设置时，浏览器将以默认值的方式显示。除了可利用HTML的标签设置字体外，还可以利用CSS的font-family属性，设置要使用的字体。 语法： font-family:,., 说明： 浏览器将在字体列表中寻找字体1，如果访问者的计算机中安装了这