4.2 CSS语法基础4.2 CSS语法基础群选择符： 群选择符不是一种选择符的类型，而是一种选择符的使用方法。当多个对象定义了相同的样式时，可以把它们分成一组，以便简化代码读写，选择符分组，可以用逗号把同组内不同对象分割： 派生选择符： 可以使用派生选择器给一个元素里的子元素定义样式，例如，给li下面的子元素a定义文字大小和颜色的样式： .dh1 a {font-size:12px; color:#333333; } p, td, li { font-size:12px; }4.2 CSS语法基础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; }4.2 CSS语法基础4.2 CSS语法基础在网页中添加CSS的方法 CSS样式可以以多种方式灵活地应用到设计的页面中，选择方法根据设计的不同要求来指定。 行内样式表： 指将CSS样式混合在HTML标签里使用，行内样式由HTML元素的style属性支持，只需要将CSS代码用分号隔开，书写在style=“”之中既可。 此做法是先了CSS对元素的精确控制，但是没有很好地将表现与内容分离，所以不推荐这样的用法。4.2 CSS语法基础4.2 CSS语法基础内部样式表： 内部样式表也将CSS样式编写到页面中，不同的是，内部样式可以将样式统一放置在一个固定的位置。这种CSS样式控制的内容一般位于HTML文件的头部，即标签内，并以结束。 4.2 CSS语法基础4.2 CSS语法基础链接外部样式表： 链接外部样式表是CSS应用的首选形式，将CSS样式代码单独编写在一个独立文件中，由页面进行调用，多个网页可以同时使用一个样式表文件。 Style.css文件内容： Body{ Background-color:#eeeeee; Margin-left:0px; Margin-top:0px; } Td { Font-size:12px; }4.2 CSS语法基础4.2 CSS语法基础CSS字体属性： 文字的属性主要有字体样式、字体大小、字体加粗等。4.2 CSS语法基础4.2 CSS语法基础CSS文本属性： 文本属性指整段文本的样式。包括单词间隔、字符间隔、文本缩进、行高等4.2 CSS语法基础4.2 CSS语法基础CSS背景属性：4.2 CSS语法基础4.2 CSS语法基础CSS边框属性：4.3 CSS布局基础4.3 CSS布局基础表现和结构相分离 1.内容 内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。 2.结构(Structure) 可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。 4.3 CSS布局基础4.3 CSS布局基础3.表现(Presentation) 虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。 4.行为(Behavior) 行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。 4.3 CSS布局基础4.3 CSS布局基础所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”：4.3 CSS布局基础4.3 CSS布局基础传统的HTML方法

忆江南

4.3 CSS布局基础4.3 CSS布局基础web标准推荐的方法<标题>忆江南 <作者>唐.白居易 <正文>江南好... <作者介绍>772－846 ，字乐天... <注释>据《乐府杂录》... <品评>此词写江南春色...4.3 CSS布局基础4.3 CSS布局基础用于布局的时候，它是一个控制表现的标签。混杂在内容和结构中，使我们的内容数据无法再利用。结构与表现相分离带来的好处主要有： 数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关 保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版; 由于结构清晰，数据的集成、更新和处理更加方便灵活； 更有意义的搜索。 4.3 CSS布局基础4.3 CSS布局基础调用样式表 在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。4.3 CSS布局基础4.3 CSS布局基础CSS盒模型4.3 CSS布局基础4.3 CSS布局基础CSS盒模型 CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景色和背景图片），这就是盒模型，它 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 了网页元素的显示基础。 在元素内容与边框之间的空白区域，被称为元素的补白(padding)，或内边距；在元素边框之外的空白区域，称为边界(margin)，或外边距。 盒模型的提出，使网页布局完全摆脱了表格的束缚，任何元素对象，无论是传统的段落、列表、标题、图片，还是标准布局中的div和span新元素，都可以通过自己的属性来实现布局，设置模型显示效果4.3 CSS布局基础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; } 4.3 CSS布局基础4.3 CSS布局基础CSS盒模型 4.3 CSS布局基础4.3 CSS布局基础盒模型的类型 CSS把盒模型分为两种基本形态：Block（块状）和Inline（内联或行内）。 在默认状态下，块状元素的宽度为100%，而且后面隐藏附带有换行符，使块状元素始终占据一行。 如：div、p 、table 、ul 、li 、ol 、dl 、h1-h6…… 内联元素没有高度和宽度，因此也就没有固定的形状，定义它的width和height属性无效。内联元素可以在行内自由流动，但它会遵循盒模型的基本规则，可以定义边界、补白、边框及背景。 如：a 、b 、em 、span 、img……4.3 CSS布局基础4.3 CSS布局基础盒模型的显示类型可以使用display属性来定义。任何元素都可以通过display属性改变默认显示类型。display属性的选项值如下： block：块状显示，在元素后面添加换行符，也就是说，其他元素不能在其后并列显示。 none：隐藏显示，此声明不会为被隐藏的元素保留位置。 inline：内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。 list-item：具有块状特征的列表项目显示，可添加可选项目标志。4.3 CSS布局基础4.3 CSS布局基础布局模型 布局模型与盒模型一样都是CSS最基本、最核心的概念，CSS包含3种基本的布局模型：Flow、Layer和Float 1. Flow Model(流动模型) 流动模型是HTML默认布局模型，在此模型中，元素本身是被动的，随着文档流自上而下按顺序动态分布。流动布局只能根据元素排列的先后顺序来决定分布位置，要改变某个元素的位置，只能通过改变它在HTML文档流中的分布位置。同时这种模式又是活动的，它的位置随时发生变化，当我们在一个元素前面添加另一个元素，它的位置会向后推移。4.3 CSS布局基础4.3 CSS布局基础2. Layer Model(层模型) Layer将页面的内容引入层，希望像图像编辑器那样精确定位网页元素，摆脱HTML元素自然流动带来的弊端。然而网页永远是一个活动的窗口，没法预知不同浏览者所使用的窗口大小，同时大部分网页本身的大小也是无法预测和控制的。 3. Float Model(浮动模型) 浮动模型汲取了前两者的优点，希望在流动和固定之间取得一个平衡，实现网页布局的自适应能力。4.3 CSS布局基础4.3 CSS布局基础流动布局模型 流动布局模型的特征 任何没有具体定义定位方式的元素，默认都呈现流动布局模式 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布 内联元素都会在所处的包含元素内从左到右水平分布显示。4.3 CSS布局基础4.3 CSS布局基础层布局模型 层布局模型中最核心的技术是元素的定位类型。 该属性取值可以包括：static、absolute、fixed和relative static：不定位，遵循默认的流动模型。 absolute：绝对定位，将元素从文档流中拖出来，使用left\right\top\bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。 fixed：固定定位。元素本身是固定的，不会随浏览器窗口的滚动条滚动而变化。 relative：相对定位。通过left\right\top\bottom属性确定元素在正常文档流中的偏移位置。div { position:absolute; }4.3 CSS布局基础4.3 CSS布局基础绝对定位包含块 CSS包含块是绝对定位的基础。包含块是对绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点的参考。默认状态下，body元素就是一个大的包含块，所有绝对定位的元素都是根据窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了某个元素为包含块后，对于包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。 一般情况下，用position属性来定义任意包含块，position属性有效取值包括absolute、fixed、relative4.3 CSS布局基础4.3 CSS布局基础浮动布局模型 任何元素在默认情况下都是不能浮动的，但是可以用CSS定义为浮动。 浮动布局模型的特征 任何定义为float的元素都会自动被设置为一个块状元素显示，这样就可以为浮动元素定义width和height属性。 浮动模型不会与流动模型发生冲突。当文档定义为浮动布局时，它在垂直方向上应该还处于文档流中，既不会脱离正常的文档流任意浮动。 浮动元素始终位于包含元素内，不会游离于外，或破坏包含元素div { float:left; /* 取值还包括right、none */}4.4 CSS扩展滤镜4.4 CSS扩展滤镜滤镜可以用来改变图象或文字外观，如加阴影、图像透明效果等。增加元素的视觉效果。 不透明度：alpha 不透明度alpha滤镜标记可以设置图像或文字的不透明度。其属性参数如下表：4.3 CSS布局基础4.3 CSS布局基础4.4 CSS扩展滤镜4.4 CSS扩展滤镜动感模糊：blur 对颜色进行透明处理：chroma 设置阴影：dropshadow 对象的翻转：flipH、flipV 发光效果：glow 灰度处理：gray 反相：invert X光片效果：Xray 遮罩效果：mask 波形滤镜：wave