[计算机软件及应用]第5章 CSS在网站设计中的应用.pptVIP

第5章 CSS在网站设计中的应用 主讲：××× 本章要点 CSS的概念 CSS的基本语法 CSS的应用形式 CSS的属性 5.1 CSS简介 CSS是一种对页面内容外观进行精确控制的技术规范，它是由W3C组织负责发布的。 尽管使用HTML标记及其属性同样可以对页面元素外观进行控制，但是这样一来缺点也显现出来了。首先，将属性描述与内容混合使代码变得混乱，可读性变差；其次，HTML标记及其属性的描述能力有限，只能实现一些常规的外观设定，对于更加多样的呈现就无能为力了。 使用CSS样式可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。 使用CSS样式还可以使Web页面内容和外观定义分开，HTML专注于内容，CSS则用于外观规划，使每个页面的内容及整个站点更趋于规范。 5.2 CSS的语法 5.2.1 CSS的应用形式 5.2.2 选择符 5.2.3 CSS属性 5.2.1 CSS的应用形式 5.2.2 选择符 5.2.3 CSS属性 CSS样式文本属性 CSS样式填充属性 CSS样式定位与显示属性 CSS样式边框属性(续表) 5.3 CSS的应用 5.3.1 文字排版 5.3.2 内外填充定位与绕排 5.3.3 定位与绕排 5.3.4 边框修饰 5.3.5 鼠标指针效果 5.3.6 滤镜 5.3.1 文字排版 5.3.2 内外填充 所谓填充，是依容器类对象所说的，如表格、单元格、图像等。 5.3.3 定位与绕排 5.3.4 边框修饰 5.3.5 鼠标指针效果 5.3.6 滤镜 透明滤镜参数 * * 5.2 5.3 5.1 5.3 使用style属性定义内联样式 这种方法适合于单独定义某个对象的样式，其格式为： style=属性:属性值;属性:属性值;… 网站规划与设计该例中第一个h1标记使用style属性定义了样式，第二个h1仍遵循默认外观。 定义内部CSS样式表 如果要批量定义一类元素的样式，可以采用预先定义CSS样式的方法，这也是CSS的普遍应用方式。定义CSS样式的格式为： 选择符{属性:属性值;属性:属性值…} CSS样式定义由三部分构成：选择符（selector）、属性（properties）和属性值（value）。CSS样式需要在head内部的style中进行定义，在body部分使用。 定义外部CSS样式表 可以将CSS样式定义在单独的文件，在需要时导入。CSS样式表文件扩展名为.CSS。 在head中使用link标记导入样式表文件，其中定义的样式就可以用于该HTML文档了。 标记选择符 CSS样式的选择符可以是HTML标记，这种样式重新定义了特定标记的外观。使用标记选择符定义CSS样式的格式为： 标记选择符{属性:属性值;} 类选择符 使用自命名的标识符定义CSS样式。类选择符样式的定义格式为： 类选择符{属性:属性值;} 选择符前面加“”表示这是一个类选择符。 ID选择符 使用自命名的标识符定义CSS样式。ID选择符样式的定义格式为： #ID选择符{属性;属性值;} 选择符前面加“#”表示这是一个ID选择符。 CSS样式允许定义的属性非常多，这么多属性并不是对所有HTML标记都有效。在定义CSS样式时，只需要定义几种相关的属性即可。在涉及到数值时，往往有多种计量单位可选，限于篇幅，表中仅列出其中一种。每个CSS样式包含一系列属性，这些属性确定了CSS样式的显示效果。 文本属性 文本属性是CSS属性中的一大类，用来设置文字的显示效果。其中部分属性设置效果可以通过文字的font标记实现。 left right center 文字对齐 text-align: right 像素值 段落首行缩进 text-indent 像素值 单词间隔 word-spacing 像素值 字母间隔 letter-spacing blink underline line-through（可多选） 修饰 text-decoration normal或像素值 行高 line-height normal italic oblique 倾斜样式 font-style normal bold bolder lighter 粗细 font-weight 像素值（*px） 大小 font-size 本机具有的字体 字体 font-family 取值 作用与含义 属性名 背景属性 背景属性设定对象的背景颜色或背景图像。 CSS样式背景属性 repeat repeat-x repeat-y no-repeat 是否重复 backgrou