css在网站设计中的应用

《css在网站设计中的应用》由会员分享，可在线阅读，更多相关《css在网站设计中的应用（38页珍藏版）》请在金锄头文库上搜索。

1、CSS在网站设计中的应用 全有文档 本章要点nCSS的概念 nCSS的基本语法 nCSS的应用形式 nCSS的属性5.1 CSS简介 5.2 5.3CSS是一种对页面内容外观进行精确控制 的技术规范，它是由W3C组织负责发布的 。尽管使用HTML标记及其属性同样可以 对页面元素外观进行控制，但是这样一来 缺点也显现出来了。首先，将属性描述与 内容混合使代码变得混乱，可读性变差； 其次，HTML标记及其属性的描述能力有 限，只能实现一些常规的外观设定，对于 更加多样的呈现就无能为力了。使用CSS样式可以有效地对页面的布局、 字体、颜色、背景和其他效果实现精确描 述，同时对它们的修改和控制变得更加

2、快 捷。使用CSS样式还可以使Web页面内容和外 观定义分开，HTML专注于内容，CSS则 用于外观规划，使每个页面的内容及整个 站点更趋于规范。5.2 CSS的语法 n5.2.1 CSS的应用形式 n5.2.2 选择符 n5.2.3 CSS属性5.1 5.3n5.2.1 CSS的应用形式 n使用style属性定义内联样式 这种方法适合于单独定义某个对象的样式， 其格式为： style=“:;:;“ 网站规划与设计该例中第一个标记使 用style属性定义了样式，第二个仍 遵循默认外观。n定义内部CSS样式表 如果要批量定义一类元素的样式，可以采用 预先定义CSS样式的方法，这也是CSS的普 遍

3、应用方式。定义CSS样式的格式为： 选择符属性:属性值;属性:属性值CSS样式定义由三部分构成：选择符 （selector）、属性（properties）和属性 值（value）。CSS样式需要在内 部的中进行定义，在部分 使用。 n定义外部CSS样式表 可以将CSS样式定义在单独的文件，在需要 时导入。CSS样式表文件扩展名为.CSS。在中使用标记导入样式表文 件，其中定义的样式就可以用于该HTML文 档了。 n5.2.2 选择符 n标记选择符 CSS样式的选择符可以是HTML标记，这种 样式重新定义了特定标记的外观。使用标记 选择符定义CSS样式的格式为： 标记选择符属性:属性值;n类选择

4、符 使用自命名的标识符定义CSS样式。类选择 符样式的定义格式为： 类选择符属性:属性值; 选择符前面加“”表示这是一个类选择符。 nID选择符 使用自命名的标识符定义CSS样式。ID选择 符样式的定义格式为： #ID选择符属性;属性值; 选择符前面加“#”表示这是一个ID选择符。 n5.2.3 CSS属性 CSS样式允许定义的属性非常多，这 么多属性并不是对所有HTML标记都有 效。在定义CSS样式时，只需要定义几 种相关的属性即可。在涉及到数值时， 往往有多种计量单位可选，限于篇幅， 表中仅列出其中一种。每个CSS样式包 含一系列属性，这些属性确定了CSS样 式的显示效果。n文本属性 文本

5、属性是CSS属性中的一大类，用来设置 文字的显示效果。其中部分属性设置效果可 以通过文字的标记实现。 CSS样式文本属性 属性名作用与含义取值 font-family字体本机具有的字体 font-size大小像素值（*px） font-weight粗细normal bold bolder lighter font-style倾斜样式normal italic oblique line-height行高normal或像素值 text-decoration修饰blink underline line- through（可多选） letter-spacing字母间隔像素值 word-spacing单

6、词间 隔像素值 text-indent段落首行缩进像素值text-align: right文字对齐left right centern背景属性 背景属性设定对象的背景颜色或背景图像。CSS样式背景属性 属性名作用与含义 取值background-color背景颜色颜色值background-image背景图像URL(图像地址)background- attachment背景是否随 页面滚动scroll fixedbackground-repeat是否重复repeat repeat-x repeat-y no-repeatn内外填充属性 一些Web元素如表格、图像等可以看作是一 个容器，容器中放

7、置了呈现内容。所谓的内 外填充，可以认为是容器内外侧的衬垫。 CSS样式填充属性 属性名作用与含义取值 margin统一定义外部填充像素值 margin-top分别定义外部各边填 充margin-bottom margin-left margin-right padding统一定义内部填充像素值 padding-top分别定义内部各边填 充padding-bottom padding-left padding-rightn定位与显示属性 内外填充属性站在容器的角度，设定了页面 的排版。从容器内容的角度来说，也可以设 置内容相对于容器的定位以及内容的尺寸。 CSS样式定位与显示属性 属性名作用与

8、含义取值 position元素的定位方式static absolute fixed relative top bottom left right距容器各边缘距 离像素值z-index显示层次数值 height元素高度像素值 width元素宽度像素值 overflow溢出处理visible hidden scroll auto visibility可见性visible hidden float绕排left right color元素颜色颜色值n边框属性 边框属性用来设置对象的边框颜色、类型以 及粗细。 CSSCSS样式边框属性样式边框属性属性名作用与含义取值 border复合属性 border-

9、color统一定义边 框颜色颜色值border-top-color分别定义各 边框颜色border-bottom- color border-left-color border-right-colorCSS样式边框属性(续表) 属性名作用与含义取值 border-style统一定义边框类型dotted dashed solid double groove ridge inset outsetborder-top-style分别定义各边框类 型border-bottom-style border-left-style border-right-style border-width统一定义边框粗细

10、medium thin thick或 像素值border-top-width分别定义各边框粗 细border-bottom- width border-left-width border-right-widthn鼠标指针及滤镜属性 可以使用鼠标指针属性（curor）设置鼠标指 针的呈现形态。而滤镜（filter）是CSS样式 的重要组成部分，通过设置滤镜，可以实现 页面元素的特别效果。5.3 CSS的应用 n5.3.1 文字排版 n5.3.2 内外填充定位与绕排 n5.3.3 定位与绕排 n5.3.4 边框修饰 n5.3.5 鼠标指针效果 n5.3.6 滤镜 5.25.1n5.3.1 文字排版

11、标记可以设置文字的属 性，通过CSS除了能设置基本的文 字属性，还可以设置字间距、缩进 等高级样式。 n5.3.2 内外填充 所谓填充，是依容器类对象所说的， 如表格、单元格、图像等。 n5.3.3 定位与绕排 n定位 一般的，浏览器按照从前到后、从上到下的顺序 解析Web文档，依次展现页面元素。若要将某 个元素个性化定位，可以使用CSS样式的定位属 性来决定其精确位置。 top、bottom、left、right这4个属性用来设置 对象与容器四边的距离。通过这4个属性，可以 实现对象的精确定位。需要说明的是，配合使用 的属性还有position，position的值为absolute 或re

12、lative，只有加上了position属性，上述几 个属性才有效。n绕排 默认情况下，图片与文字混排时，一幅 图片只能处在一行文字中。由于图片往 往较大，显示效果不太好，这时可以使 用float属性实现图文混排。 n5.3.4 边框修饰 边框修饰用于定义对象的边框颜色、 样式、粗细等。表单元素外观默认呈现灰色或白色， 为使表单元素外观与Web页面协调， 可以使用CSS重新定义其样式。 n5.3.5 鼠标指针效果 默认情况下，鼠标指针停留在页面上的外 观形如或者，或，可以设定页面元素的个 性化鼠标指针效果。鼠标指针属性还可以取值为某个鼠标指针 文件（扩展名为cur），格式为 curor:url

13、(url)。该url可以位于本站点内 部，也可以位于Internet上。 n5.3.6 滤镜 n透明滤镜（Alpha） 设置对象的透明度，多用于图像 。透明滤镜参数 参数含义取值opacity（起始）透明度0100style透明渐变形状0-3finishopacity最终透明度0100startx透明渐变区域开始点的X坐标像素值starty透明渐变区域开始点的Y坐标像素值finishx透明渐变区域结束点的X坐标像素值finishx透明渐变区域结束点的Y坐标像素值n模糊滤镜（blur） 设置对象的模糊效果，多用于图像。模糊滤镜参数 参数含义取值add是否设置为印象派模糊效 果true false

14、 direction模糊方向0360strength模糊强度数值n去色滤镜（chroma） 去除对象中包含的特定颜色，应用格式 为chroma(color=颜色值)。去除某种 颜色后，被去除的区域显示后景色，即 对象所在容器的颜色。该滤镜用于图像 的效果不是太好，除非图像中出现连续 的同一颜色。 n投影滤镜（dropshadow） dropshadow投影滤镜产生对象的投影，如同 物体投射产生的影子，对图像的支持不太好。投影滤镜参数 参数含义取值color投影颜色颜色值offx投影横向偏移像素值（默认5）offy投影垂直偏移像素值（默认5）positive是否正投影true falsen阴影滤

15、镜（shadow） shadow阴影滤镜产生对象的阴影，如同光线 照射形成的阴影区域。阴影滤镜参数 参数含义取值color阴影颜色颜色值direction阴影方向0-360n发光滤镜（glow） 发光滤镜用来设置对象的发光效果。 发光滤镜在某种程度上与阴影滤镜有些类似， 但阴影滤镜是有方向的，发光滤镜是辐射状的 。发光滤镜参数 参数含义取值color发光颜色颜色值strength发光强度（范围）1-255n波浪滤镜（wave） 波浪滤镜用来设置对象的波浪效果。波浪滤镜参数 参数含义取值add是否扭曲式波浪true falsefreq波形的数目数值lightstrength对比度0-100phase波形初相位0-100strength波形强度数值add参数设定波浪效果是扭曲还是缠绕。 add=true设置扭曲式波浪，对象呈扭曲状； add=false设置缠绕式波浪，对象形状不变， 但缠绕了波形。freq设定对象出现波形的数目 ，数值越大，则扭曲越密集。lightstrength设 置波峰和波谷的显示对比度，其数值越大，则 波峰越亮、波谷越暗。phase设定波形初相位 。strength设定波形的强度即振幅，数值越大 ，扭曲越厉害。