第四部分css样式表.ppt

  1. 1、本文档共57页,可阅读全部内容。
  2. 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
  3. 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
第三部分CSS样式表 CSS技术概述 一、CSS技术的优点 在CSS出现之前,虽然HTML为网页设计者提供了强大的格式设置功能,但必须为每个需要设置的地方使用格式设置标记,而不能为具有一定逻辑含义的内容设置统一的格式。这对设计和维护一个网页数量众多的网站来说,将增加许多的工作量。此外,每个网页设计者按照自己的喜好设计制作网页,来自不同人员开发的网页作品很难统一在一个网络中。现在,运用CSS技术,可以克服HTML的这些缺陷,方便地为所有网页设置一种风格。特别地,如果将原来安排在网页文件中的格式化元素和属性提取到网页外部,将这些样式规则定义到一个样式表文件中,则可以为所有需要使用该样式的网页所链接。总之,CSS是一种格式化网页的标准方式,它对颜色、字体、间隔、定位以及边距等格式方面提供了多种属性,这些属性均可用于HTML标记符。 CSS技术的优点可概括如下: 1)方便网页格式的修改 由于CSS对页面格式的控制可以独立地进行,这就使得修改网页元素的格式变得更加容易,网页的更新工作也就大为减轻。 2)便于减少网页体积 为了得到一个较好的浏览效果,设计网页时常常要制作多种图片,以获得想要的字体和布局,但图片用的越多,网页就越臃肿。CSS的出现,为解决这类问题提供了另一种思路。如利用CSS技术来取代原先只能用图像表示的艺术字体。由于图像文件的减少,整个网页的体积随之大为减少,这样便可提高网页下载和现实的效率,实际意义十分明显。 3)能使网页元素更准确的定位 CSS的最大优点之一是它的定位技术。网页设计者往往采用表格或层来定位网页元素,层定位主要应用于复杂且不规则的网页结构。正确使用层定位必须配合CSS,才能实现最终效果。 4)良好的适应性 许多新的网页设计技术不断产生,但是现在浏览器不一定百分之百的支持这些技术,直接在HTML中使用时必须十分谨慎。而在CSS中使用则可以避免由于浏览器不支持这些新技术而出现的页面显示混乱的情况。当浏览器不支持这些规则时,系统会自动调用缺省方式进行解释并显示。 二、CSS技术的功能 1)灵活定制网页元素风格 有了CSS,就能方便地控制网页元素在页面上的外观,用CSS可将元素逐个地定义显示风格。通过创建类(CLASS),还可以定义标记元素的多种外观。例如: <style> <!— p.ok {font-family:“华文行楷”;font-size:15;font-style:“Italic”;color:"blue";} p.good {font-family:"隶书";font-size:20;font-style: "obligble";color : "red";} p.fun {font-family:"华文彩云";font-size:25;font-style:"normal";color:"green";} --> </style> 以上代码对<p> 标记符定义了3种显示风格,则在<body>中就可以分别用<p class = "ok"> 、<p class="good">、 <p class="fun">来使用,方便地改变字符显示效果。 2)能迅速地更新网站风格 通过将整个网站网页的风格信息集中在一个文件后缀为.css的称为外部css样式表的文件中,然后将所有的网页都链接到这个文件上。这样,当改变CSS文件的风格说明,就可以影响这个网站网页的风格。CSS文件也是一个文本文件,所有可以用来编辑HTML文件的编辑器都可以用来编辑CSS文件。 3)便于组合不同风格的网页 不同的设计者,通过使用CSS技术,链接CSS文件就可以使许多人开发制作的网页统一到同一种风格下。 CSS基本语法 一、样式表定义 一个样式表一般由若干样式规则组成,每条样式规则都可以看作是一条CSS的基本语句,每条规则都包含一个选择器(例如:BODY,P等)和写在花括号里的声明,这些声明通常是由几组用分号分隔的属性和值组成。每个属性带一个值,共同描述整个选择器应该如何在浏览器中显示。一条CSS语句的结构如下: 选择器{属性1:值1;属性2:值2;……} 选择符可以是HTML中任何的标识符,比如P、DIV、IMG甚至BODY都可以作为选择符。 2.样式引用 1)嵌入样式表 一种是把CSS文档放到<head>文档中:   <style type=“text/css”> …… </style>  其中<style>中的“type=‘text/css’”的意思是<style>中的代码是定义样式表单的。 通过<style>标记元素,可将样式信息作为文档的一部分用于HTML。所有样式表都应列于文档的头部,即包含在<HEAD> 和</HEAD>之间。在<HEAD>中,可以包含一个或多个<style>标记元素,但

您可能关注的文档

文档评论(0)

gpcjc1996 + 关注
实名认证
内容提供者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档