第3讲Web程序设计基础-DIV+CSS-8-9_第1页
第3讲Web程序设计基础-DIV+CSS-8-9_第2页
第3讲Web程序设计基础-DIV+CSS-8-9_第3页
第3讲Web程序设计基础-DIV+CSS-8-9_第4页
第3讲Web程序设计基础-DIV+CSS-8-9_第5页
已阅读5页，还剩37页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3讲基于DIV+CSS的网站构架XHTML+CSS任务8：使用CSS层叠样式表1．CSS的概念

CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”。W3C：WorldWideWebConsortium万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（标准通用标记语言下的一个应用）、可扩展标记语言（标准通用标记语言下的一个子集）以及帮助残障人士有效获得Web内容的信息无障碍指南（WCAG）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。任务8：使用CSS层叠样式表1．CSS的概念CSS，中文译为层叠样式表，常称为CSS样式表或是样式表，其扩展名为.css。CSS是用于增强或控制页面样式并允许将样式信息与网页内容分离的一种标记语言。W3C与1996年12月推出CSS1.0（Level1）规范，为HTML4.0添加了样式。1998年5月又发布了新版本CSS2.0（Level2），该版本在兼容旧版本的情况下又扩展了一些其他的内容。CSS负责为网页设计人员提供丰富的样式来设计网页。CSS所提供的网页结构内容与表现形式分离的机制大大简化了网站的管理，提高了开发网站的工作效率。CSS可用于控制任何HTML和XML内容的表现形式。任务8：使用CSS层叠样式表

在设计页面时采用CSS技术可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单地修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。概括来说，CSS有如下特点：任务8：使用CSS层叠样式表（1）丰富的样式定义CSS允许页面具有更为丰富的文档样式外观以及设置文本属性、背景属性的能力；允许为任何元素创建边框并调整边框与文本之间的距离；允许改变文本的大小写方式、修饰方式（比如加粗、斜体等）、文本字符间隔，甚至隐藏文本以及其他页面。任务8：使用CSS层叠样式表（2）易于使用和修改CSS能够将样式定义代码集中于一个样式文件中以实现某种页面效果，这样就不用将样式代码分散到整个页面文件代码中，从而方便管理。另外，还可以将几个CSS文档集中应用于一个页面，也可以将CSS样式表单独应用于某个元素，从而应用到整个页面。如果需要调整页面的样式外观，只需修改CSS样式表的样式定义代码即可。任务8：使用CSS层叠样式表（3）可重复使用不仅可以将多个CSS样式表应用于一个页面，也可以将一个CSS样式表应用于一个网站的所有页面。通过在各个页面引用该CSS样式表，能够保证网站风格及格式的统一。任务8：使用CSS层叠样式表（4）层叠先举一个例子，一个CSS样式表main.css定义了一个网站的10个页面的样式外观，但是由于需求的变化，需要对其中一个页面布局在保持外观的情况下更改，此时就可以应用CSS样式表的层叠特性。再创建一个只适用于该页面的CSS样式表css.css，该样式表中包含修改的那一部分样式定义代码。将样式表css.css和main.css同时应用在该页面，那么css.css样式表中新定义的样式规则将代替main.css样式表的样式规则。任务8：使用CSS层叠样式表（5）页面压缩一个拥有精美页面的网站往往需要大量或重复的表格和<font>标记形成各种规格的文字样式，这样做的后果就是会产生大量的标记，从而使页面文件大小增加。将用于描述页面的相似的代码形成块加到CSS样式表中可以大大地减少页面的容积，这样加载页面的时间也会减少。任务8：使用CSS层叠样式表2．CSS基础语法（1）CSS样式规则CSS样式表是由若干条样式规则组成，这些样式规则可以应用到不同的元素或文档中，从而定义这些元素或文档的显示外观。每一条样式规则都由3部分构成：选择符（selector）、属性（properties）和属性的取值（value），基本格式如下：任务8：使用CSS层叠样式表selector{property：value}selector选择符可以采用多种形式，选择符区分大小写。如果定义选择符的属性，则属性和属性值为一组，组与组之间有分号（；）隔开。格式如下。selector{property1：value1；property2：value；…}任务8：使用CSS层叠样式表下面就给出一条样式规则：P{color:red}该样式规则的选择符P是指为段落标记<P>提供样式，color为指定文字颜色的属性,，red为属性值，该规则表示<P>指定的段落文字为红色。如果属性值由多个字符串和空格组成，那么该属性就必须用双引号。比如设置段落字体为西方TimesNewRoman，样式规则如下：P{font-family:"TimesNewRoman"}如果要为段落标记内容同时设置多种样式，则可以使用下列语句。P{font-family:"隶书";color:red;font-size:40px;font-weight:bold}任务8：使用CSS层叠样式表一般情况下，为了便于阅读，书写样式规则时可以采用分行的格式P{font-family:"隶书";color:red;font-size:40px;font-weight:bold}任务8：使用CSS层叠样式表（2）CSS的样式划分为3种CSS样式，即嵌入式样式、内联式和外联式。①内联样式内联样式是将样式代码直接内联到标记内，以style语句作为属性值，例如：<tablestyle="border-collapse:collapse">这种CSS样式与HTML标记书写在一起，简单直观并且能够单独控制个别元素的外观。②嵌入样式嵌入样式是使用<style>标记将一段CSS代码嵌入到HTML文档中。一般是使用<style>标记将一段CSS代码插入到HTML文档头部，也就是<head></head>标记之间。下面的代码演示了嵌入式CSS的用法。任务8：使用CSS层叠样式表

任务8：使用CSS层叠样式表

任务8：使用CSS层叠样式表③外联样式把上例的样式定义部分单独存入一个文本文件，这种文件叫样式文件，后缀为.css。在要使用的时候把其导入（链接）到文档中来，这种通过导入（链接）外部的样式文件的样式叫外联样式。指定样式文件的标记是<link>，一般使用格式如下：<linkrel="stylesheet"href="css/stylesheetl.css"type="text/css"/>

该标记一般都放在文档的<head></head>标记之间，REL属性用于定义连接的文件和HTML文档之间的关系。StyleSheet的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式，href属性指定了样式文件的路径，type属性表明这是一个样式文件。外联式CSS样式的应用代码如下：任务8：使用CSS层叠样式表任务8：使用CSS层叠样式表（3）选择符（5个）

①标记选择符标记选择符是选择符为HTML中的标记名称的选择符。我们前面举的例子都是标记选择符，如P{color:red}，对标记<P>内的内容显示为红色。标记选择符的作用范围为文档内所使用该标记的所有内容，改变的是该标记的默认显示格式。如:table{background-color:#00FF00;Border-color:#ff0000;}在该文档内的所有表格的背景色为绿色（＃00ff00），边框色为红色（＃ff0000）。任务8：使用CSS层叠样式表②类选择符使用类选择符能够为相同的标记定义不同的样式，也可以使用到不同的标记上。定义类选择符时，需要在自定义类的名称前面加一个句点“．”。任务8：使用CSS层叠样式表例如，为段落标记定义两个类来表示不同的样式.rr{color:red}p.green{color:green}在上面两个样式规则中，p表示样式应用的标记为段落标记<P>，rr、green为定义的类选择符的类的名称，｛｝内为样式定义。将定义的类选择符应用到不同的段落中，只要在<P>标记中指定class属性即可。例如：<pclass="rr">红色</p><pclass="green">绿色</p>任务8：使用CSS层叠样式表③ID选择符ID选择符类似于类选择符，但有一个重要的区别就是ID选择符前不是句点“．”，而是“＃”号。在页面中，具有ID属性的标记才能够使用ID选择符定义样式，所以与类选择符相比，使用ID选择符是有一定局限性的。<pid=＂fontstyle＂>段落样式</p>类选择符与ID选择符主要有以下两个区别：类选择符可以给任意数量的标记定义样式，但ID选择符在页面的标记中只能使用一次。ID选择符对给定标记应用何种样式比类选择符具有更高的优先级。任务8：使用CSS层叠样式表id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。以下的样式规则应用于元素属性实例<pid=＂fontstyle＂>段落样式</p>......#fontstyle{text-align:center;color:red;}任务8：使用CSS层叠样式表④伪类选择符伪类选择符可以看作是一种特殊的类选择符，它是一种能被CSS的浏览器自动识别的特殊选择符。伪类选择符的最大作用就是可以对链接的不同状态定义不同的样式效果。伪类选择符定义的样式常应用在定位锚标记“<a>”上，即锚的伪类选择符，它表示动态链接4种不同的状态：未访问的链接（link）、已访问的链接（visited）、激活链接（active）和鼠标停留在链接上（hover）。例如：a:link{color:#FF0000;text-decoration:none}a:visited{color:#00ff00;text-decoration:none}a:active{color:#0000FF;text-decoration:underline}a:hover{color:#FF00FF;text-decoration:underline}任务8：使用CSS层叠样式表⑤派生选择符HTML的标记是有一定的层次关系，标记之间形成一个树形层次结构，CSS依据元素在其位置的上下文关系来定义样式，这样可以使标记更加简洁。比方说，你希望列表中的strong元素变为斜体字，而不是所有的strong元素都变为的斜体字，可以这样定义一个派生选择器。在下面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。任务8：使用CSS层叠样式表listrong{font-style:italic;font-weight:normal;}<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p><ol><li><strong>我是斜体字。这是因为strong元素位于li元素内。</strong></li><li>我是正常的字体。</li></ol>在上面的例子中，只有li元素中的strong元素的样式为斜体字，无需为strong元素定义特别的class或id，代码更加简洁。任务8：使用CSS层叠样式表（4）盒子模型CSS中有个重要的思维模型，就是盒子模型(Boxmodel)。如图2-16所示：任务8：使用CSS层叠样式表盒子里由外至里依次是：margin边距、border边框、padding间隙、content(内容，比如文本，图片等)下面介绍盒子模型的一些重要属性，这是CSS中定位技术的核心部分。①边距属性(margin)：用来设置一个元素所占空间的边缘到相邻元素之间的距离。②边框属性(border)：用来设定一个元素的边线（包括线宽、线型、线色）。③间隙属性(padding)：是来设置元素内容到元素边框的距离。④背景属性（background）：指的是content和padding区域，可设颜色或图片背景。⑤宽高属性（width、height）：指的是content区域的宽和高，而不是指整个盒子的宽和高，这在布局时要特别注意。盒子的宽＝width+2×padding+2×border+2×margin。或者说width=盒子的宽-2×padding-2×border-2×margin⑥定位属性：包括定位坐标类型position属性、定位坐标（left、top、right、bottom）、文本流float属性。任务8：使用CSS层叠样式表其中，定位坐标有left、top、right、bottom四个，一般指盒子一个角，如左上坐标，注意不能同时设定left/right或top/bottom自相矛盾的坐标，否则出现异常。position：指定位坐标的类型，有以下几种：static：默认次序，即文本流顺序，从左到右，从上到下。这时指定的定位坐标无效。relative：相对坐标，相对于“原来的位置”，需设定左上角的偏移量（left、top）。absolute：绝对坐标，显示在父容器的指定的绝对坐标上。此时将忽略其他对象（块、层、盒子）的存在，会覆盖其他的对象。fixed：固定坐标，浏览器窗口坐标，固定在窗口的某一位置，不随页面滚动而移动。我们上网常遇到这样的小广告，始终显示在窗口的某一位置。inherit：继承父容器的position。文本流float：控制文本流的显示方向，可设定的left、right、none、inherit。取left或right会影响其他对象（层）的排列。任务8：使用CSS层叠样式表层叠属性z-index：控制层（盒子）在Z轴上排列次序，为整数，值越大越靠上面。该属性只对position设置为absolute或relative有效。可见性属性visibility：控制显示或隐藏。可取visible、hidden、collapse和inherit等。说明：盒子模型中的margin边距、border边框、padding间隙的四个方向属性可以是不相同的，可分别设置。任务9：基于DIV+CSS布局1．DIV+CSS页面布局的优点在W3C标准中，网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。在Web标准中,HTML/XHTML负责页面结构,CSS负责样式表现,JavaScript负责动态行为。结构主要包括DIV在内的一系列的XHTML标记，表现主要包括CSS层叠样式表，行为主要包括对象模型（如W3C、DOM）等。利用这种模式开发的网页是符合W3C设计标准的，有下列优点：任务9：基于DIV+CSS布局（1）网页开发与维护变得更简单、容易。因为使用了更具有语义和结构化的XHTML，让程序员更加容易、快速的理解网页代码。（2）网页下载、读取速度变得更快。使用DIV+CSS模式开发网页，网页HTML代码减少，下载速度更快；因为网页

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论