网页设计CSS样式表应用.ppt

0,第四章 CSS样式表应用,主讲：钟杰卓,1,本章内容概述,2,4.1 CSS简介,CSS的全称是Cascading Style Sheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。 CSS是一组样式，样式的属性在HTML元素中一次出现，并显示在浏览器中。样式可以定义在HTML文档的标记里，也可以放在外部附加文档中，一个样式表文档可以用于多个页面，甚至是整个站点，因此具有更好的易用性和扩展性。 CSS可以减少开发和维护HTML文档所用的时间。增加了Web站点中文档间的灵活性。,3,4.2 CSS语法基础,完成了网页框架的构建，下一步就应该使用CSS来布局和修饰了。使用CSS的方法可以简单概括为： 选择符：表示要定义样式的对象，可以是元素本身，也可以是一类元素或指定名称的元素。 选择属性：制定选择符所具有的属性，它是CSS的核心。CSS 2一共定义了150多个属性，其中大部分属性是用于任何选择符。 定义属性值：数值表示（25px）、百分比表式（20%）、范围表示（top、right）,Selector property:value; property:value;,body color:#333; background-color:#eee;,4,4.2 CSS语法基础,CSS选择符 类型选择器： 类型选择符就是网页元素本身，定义时直接使用元素名称，如定义段落样式，可以选择p元素，即把p作为选择符。在HTML和XHTML中，所有的元素都可以作为类型选择符来进行定义： 定义了类型选择符，所定义的属性会影响引用这个样式的所有该元素的显示效果。使用恰当会非常省力，但如果考虑不周，贸然定义会给网页设计增加无穷烦恼。,html /*/ color : #f60 ;font-size:14px ; Body /*/ Margin-left:0px; Margin-top:0px; Td /*/ Font-family:”宋体”,”黑体”;,5,4.2 CSS语法基础,id选择符： CSS中的id是作为网页中元素的“身份证”来使用的。因此它是唯一的，不同元素的id值不能重复。使用id选择器能够扩展HTML和XHTML元素的显示效果。为每个元素的具体对象定义不同的样式，方便了用户更加精细地控制页面。 当使用id选择符时，应先为元素定义一个id属性： 在样式表中，需要使用 # 号进行标识：,#lefttable color : #f60 ;font-size:14px ; border:1pt #999 solid;,6,4.2 CSS语法基础,class选择符： class是一个集合名次，意味着在一个文档中可以为不同类型的元素定义相同的类名。是先把具有相同样式的元素统一为一类。使用class选择符可以实现代码简化的目的，节约了了CSS代码的编写，增强了代码的可读性。 当使用class选择符时，首先应为每个元素定义class属性： 在样式表中，需要使用 . 号进行标识：,.red color : #ff0000;,7,4.2 CSS语法基础,群选择符： 群选择符不是一种选择符的类型，而是一种选择符的使用方法。当多个对象定义了相同的样式时，可以把它们分成一组，以便简化代码读写，选择符分组，可以用逗号把同组内不同对象分割： 派生选择符： 可以使用派生选择器给一个元素里的子元素定义样式，例如，给li下面的子元素a定义文字大小和颜色的样式：,.dh1 a font-size:12px; color:#333333; ,p, td, li font-size:12px; ,8,4.2 CSS语法基础,伪类： CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active,a:link /* 定义超级链接的默认样式 */ font-size:12px; color:#c00; text-decoration:none; a:visited /* 定义访问过的链接样式 */ font-size:12px; color:#c00; text-decoration:none; a:hover /* 定义鼠标经过的链接样式 */ font-size:12px; color:#f30; text-decoration:underline; a:active /* 定义鼠标按下的链接样式 */ font-size:12px; color:#c00; text-decoration:none; ,9,4.2 CSS语法基础,在网页中添加CSS的方法 CSS样式可以以多种方式灵活地应用到设计的页面中，选择方法根据设计的不同要求来指定。 行内样式表： 指将CSS样式混合在HTML标签里使用，行内样式由HTML元素的style属性支持，只需要将CSS代码用分号隔开，书写在style=“”之中既可。 此做法是先了CSS对元素的精确控制，但是没有很好地将表现与内容分离，所以不推荐这样的用法。,10,4.2 CSS语法基础,内部样式表： 内部样式表也将CSS样式编写到页面中，不同的是，内部样式可以将样式统一放置在一个固定的位置。这种CSS样式控制的内容一般位于HTML文件的头部，即标签内，并以开始，以结束。,11,4.2 CSS语法基础,链接外部样式表： 链接外部样式表是CSS应用的首选形式，将CSS样式代码单独编写在一个独立文件中，由页面进行调用，多个网页可以同时使用一个样式表文件。 Style.css文件内容：,Body Background-color:#eeeeee; Margin-left:0px; Margin-top:0px; Td Font-size:12px; ,12,4.2 CSS语法基础,CSS字体属性： 文字的属性主要有字体样式、字体大小、字体加粗等。,13,4.2 CSS语法基础,CSS文本属性： 文本属性指整段文本的样式。包括单词间隔、字符间隔、文本缩进、行高等,14,4.2 CSS语法基础,CSS背景属性：,15,4.2 CSS语法基础,CSS边框属性：,16,4.3 CSS布局基础,表现和结构相分离 1.内容 内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。 2.结构(Structure) 可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。,17,4.3 CSS布局基础,3.表现(Presentation) 虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。 4.行为(Behavior) 行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。,18,4.3 CSS布局基础,所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”：,19,4.3 CSS布局基础,传统的HTML方法, 忆江南 ,20,4.3 CSS布局基础,web标准推荐的方法,忆江南 唐.白居易 江南好. 772846 ，字乐天. 据乐府杂录. 此词写江南春色.,21,4.3 CSS布局基础,用于布局的时候，它是一个控制表现的标签。混杂在内容和结构中，使我们的内容数据无法再利用。结构与表现相分离带来的好处主要有： 数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关 保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版; 由于结构清晰，数据的集成、更新和处理更加方便灵活； 更有意义的搜索。,22,4.3 CSS布局基础,调用样式表 在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。,23,4.3 CSS布局基础,CSS盒模型,24,4.3 CSS布局基础,CSS盒模型 CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景色和背景图片），这就是盒模型，它规范了网页元素的显示基础。 在元素内容与边框之间的空白区域，被称为元素的补白(padding)，或内边距；在元素边框之外的空白区域，称为边界(margin)，或外边距。 盒模型的提出，使网页布局完全摆脱了表格的束缚，任何元素对象，无论是传统的段落、列表、标题、图片，还是标准布局中的div和span新元素，都可以通过自己的属性来实现布局，设置模型显示效果,25,4.3 CSS布局基础,CSS盒模型 所有的网页元素都可以包括四个区域：内容区、补白区、边框区和边界区。在CSS中，可以增加补白、边框和边界的区域大小，而不影响内容区域。,#box height:160px; width:260px; margin:60px; padding:60px; border:solid 60px #aaa; background-image:url(box.jpg); background-color:#CC99CC; ,26,4.3 CSS布局基础,CSS盒模型,27,4.3 CSS布局基础,盒模型的类型 CSS把盒模型分为两种基本形态：Block（块状）和Inline（内联或行内）。 在默认状态下，块状元素的宽度为100%，而且后面隐藏附带有换行符，使块状元素始终占据一行。 如：div、p 、table 、ul 、li 、ol 、dl 、h1-h6 内联元素没有高度和宽度，因此也就没有固定的形状，定义它的width和height属性无效。内联元素可以在行内自由流动，但它会遵循盒模型的基本规则，可以定义边界、补白、边框及背景。 如：a 、b 、em 、span 、img,28,4.3 CSS布局基础,盒模型的显示类型可以使用display属性来定义。任何元素都可以通过display属性改变默认显示类型。display属性的选项值如下： block：块状显示，在元素后面添加换行符，也就是说，其他元素不能在其后并列显示。 none：隐藏显示，此声明不会为被隐藏的元素保留位置。 inline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。 list-item：具有块状特征的列表项目显示，可添加可选项目标志。,29,4.3 CSS布局基础,布局模型 布局模型与盒模型一样都是CSS最基本、最核心的概念，CSS包含3种基本的布局模型：Flow、Layer和Float 1. Flow Model(流动模型) 流动模型是HTML默认布局模型，在此模型中，元素本身是被动的，随着文档流自上而下按顺序动态分布。流动布局只能根据元素排列的先后顺序来决定分布位置，要改变某个元素的位置，只能通过改变它在HTML文档流中的分布位置。同时这种模式又是活动的，它的位置随时发生变化，当我们在一个元素前面添加另一个元素，它的位置会向后推移。,30,4.3 CSS布局基础,2. Layer Model(层模型) Layer将页面的内容引入层，希望像图像编辑器那样精确定位网页元素，摆脱HTML元素自然流动带来的弊端。然而网页永远是一个活动的窗口，没法预知不同浏览者所使用的窗口大小，同时大部分网页本身的大小也是无法预测和控制的。 3. Float Model(浮动模型) 浮动模型汲取了前两者的优点，希望在流动和固定之间取得一个平衡，实现网页布局的自适应能力。,31,4.3 CSS布局基础,流动布局模型 流动布局模型的特征 任何没有具体定义定位方式的元素，默认都呈现流动布局模式 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布 内联元素都会在所处的包含元素内从左到右水平分布显示。,32,4.3 CSS布局基础,层布局模型 层布局模型中最核心的技术是元素的定位类型。 该属性取值可以包括：static、absolute、fixed和relative static：不定位，遵循默认的流动模型。 absolute：绝对定位，将元素从文档流中拖出来，使用leftrighttopbottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。 fixed：固定定位。元素本身是固定的，不会随浏览器窗口的滚动条滚动而变化。 relative：相对定位。通过leftrighttopbottom属性确定元素在正常文档流中的偏移位置。,div position:absolute; ,33,4.3 CSS布局基础,绝对定位包含块 CSS包含块是绝对定位的基础。包含块是对绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点的参考。默认状态下，body元素就是一个大的包含块，所有绝对定位的元素都是根据窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了某个元素为包含块后，对于包含的绝对定