第5章CSS在网站设计中的应用 主讲：李波涛
第5章 CSS在网站设计中的应用 主讲：李波涛
本章要点 CSS的概念 ÷CSS的基本语法 CSS的应用形式 ÷CSS的属性
本章要点 ❖ CSS的概念 ❖ CSS的基本语法 ❖ CSS的应用形式 ❖ CSS的属性
5.1CSS简介 CSS是一种对页面内容外观进行精确控制 的技术规范，它是由W3C组织负责发布的。 尽管使用HTML标记及其属性同样可以 对页面元素外观进行控制，但是这样一来 缺点也显现出来了。首先，将属性描述与 内容混合使代码变得混乱，可读性变差； 其次，HTML标记及其属性的描述能力有 限，只能实现一些常规的外观设定，对于 更加多样的呈现就无能为力了。 5
5.1 CSS简介 5.2 5.3 CSS是一种对页面内容外观进行精确控制 的技术规范，它是由W3C组织负责发布的。 尽管使用HTML标记及其属性同样可以 对页面元素外观进行控制，但是这样一来 缺点也显现出来了。首先，将属性描述与 内容混合使代码变得混乱，可读性变差； 其次，HTML标记及其属性的描述能力有 限，只能实现一些常规的外观设定，对于 更加多样的呈现就无能为力了
使用CSS样式可以有效地对页面的布局、 字体、颜色、背景和其他效果实现精确描 述，同时对它们的修改和控制变得更加快 捷。 使用CSS样式还可以使Web页面内容和外 观定义分开，HTML专注于内容，CSS则 用于外观规划，使每个页面的内容及整个 站点更趋于规范
使用CSS样式可以有效地对页面的布局、 字体、颜色、背景和其他效果实现精确描 述，同时对它们的修改和控制变得更加快 捷。 使用CSS样式还可以使Web页面内容和外 观定义分开，HTML专注于内容，CSS则 用于外观规划，使每个页面的内容及整个 站点更趋于规范
5.2CSS的语法 5.2.1CSS的应用形式 5.2.2选择符 5.2.3CSS属性 5.1 5.3
5.2 CSS的语法 ❖ 5.2.1 CSS的应用形式 ❖ 5.2.2 选择符 ❖ 5.2.3 CSS属性 5.1 5.3
÷5.2.1CSS的应用形式 。使用style属性定义内联样式 这种方法适合于单独定义某个对象的样式， 其格式为： style="：；：；.” 网站规划与设计该例中第一个标记使 用style)属性定义了样式，第二个仍 遵循默认外观
❖ 5.2.1 CSS的应用形式 ❖ 使用style属性定义内联样式 这种方法适合于单独定义某个对象的样式， 其格式为： style=":;:;…" 网站规划与设计该例中第一个标记使 用style属性定义了样式，第二个仍 遵循默认外观
÷定义内部CSS样式表 如果要批量定义一类元素的样式，可以采用 预先定义CSS样式的方法，这也是CSS的普 遍应用方式。定义CSS样式的格式为： 选择符{属性：属性值；属性：属性值..} CSS样式定义由三部分构成：选择符 (selector)、属性(properties)和属性 值(value)。CSS样式需要在内 部的中进行定义，在部分 使用
❖ 定义内部CSS样式表 如果要批量定义一类元素的样式，可以采用 预先定义CSS样式的方法，这也是CSS的普 遍应用方式。定义CSS样式的格式为： 选择符{属性:属性值;属性:属性值…} CSS样式定义由三部分构成：选择符 （selector）、属性（properties）和属性 值（value）。CSS样式需要在内 部的中进行定义，在部分 使用
·定义外部CSS样式表 可以将CSS样式定义在单独的文件，在需要 时导入。CSS样式表文件扩展名为.CSS。 在中使用标记导入样式表文 件，其中定义的样式就可以用于该HTML文 档了
❖ 定义外部CSS样式表 可以将CSS样式定义在单独的文件，在需要 时导入。CSS样式表文件扩展名为.CSS。 在中使用标记导入样式表文 件，其中定义的样式就可以用于该HTML文 档了
÷5.2.2选择符 ·标记选择符 CSS样式的选择符可以是HTML标记，这种 样式重新定义了特定标记的外观。使用标记 选择符定义CSS样式的格式为： 标记选择符属性：属性值；}
❖ 5.2.2 选择符 ❖ 标记选择符 CSS样式的选择符可以是HTML标记，这种 样式重新定义了特定标记的外观。使用标记 选择符定义CSS样式的格式为： 标记选择符{属性:属性值;}
÷类选择符 使用自命名的标识符定义CSS样式。类选择 符样式的定义格式为： 类选择符{属性：属性值；} 选择符前面加“”表示这是 一个类选择符。 ÷ID选择符 使用自命名的标识符定义CSS样式。ID选择 符样式的定义格式为： #ID选择符{属性；属性值；} 选择符前面加“#”表示这是一个ID选择符
❖ 类选择符 使用自命名的标识符定义CSS样式。类选择 符样式的定义格式为： {属性:属性值;} 选择符前面加“ ”表示这是一个类选择符。 ❖ ID选择符 使用自命名的标识符定义CSS样式。ID选择 符样式的定义格式为： #ID选择符{属性;属性值;} 选择符前面加“#”表示这是一个ID选择符