网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案

第4章 CSS基础 4.1 CSS概述 4.2 样式表语法 4.3 CSS的属性单位 4.4 CSS与HTML文档的结合方法 4.2 样式表语法 4.3 CSS的属性单位 4.4 CSS与HTML文档的结合方法 4.5 样式表的层叠、特殊性与重要性 4.6 元素分类 4.7 实训——制作什锦果园业界资讯页面

4.1 CSS概述 4.1.1 CSS的基本概念 CSS（Cascading Style Sheets，层叠样式表单）简称为样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。样式就是格式，在网页中，像文字的大小、颜色以及图片位置等，都是设置显示内容的样式。层叠是指当在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。 建立一个定义样式的CSS文件，并让所有HTML都调用这个CSS文件所定义的样式即可，如图4-1所示。

4.1 CSS概述 4.1.2 CSS的发展历史 在HTML迅猛发展的90年代，CSS也以各种形式应运而生，用户可以使用这些样式语言来调节网页的显示方式。 1996年12月W3C推出了CSS规范的第一个版本CSS1.0。这一规范立即引起了各方的积极响应，随即MicroSoft公司和Netscape公司纷纷表示自己的浏览器能够支持CSS1.0，从此CSS技术的发展几乎一马平川。1998年W3C发布了CSS2.0/2.1版本，这也是至今流行最广并且主流浏览器都采用的标准。 早在2001年5月，W3C就着手开发CSS第三版规范，CSS3规范被分为若干个相互独立的模块。

4.1 CSS概述 4.1.3 CSS的代码规范 1．目录结构命名规范 存放CSS样式文件的目录一般命名为style或css。 在项目初期，会把不同的类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，为了网站性能上的考虑会整合不同的CSS文件到一个CSS文件，这个文件一般命名为style.css或css.css。 3．CSS选择符的命名规范 所有CSS选择符必须由小写英文字母或“_”下划线组成，必须以字母开头，不能为纯数字。设计者要用有意义的单词或缩写组合来命名选择符，做到“见其名知其意” 。

4.1 CSS概述 4．CSS代码注释 为代码添加注释是一种良好的编程习惯。注释可以增强CSS文件的可读性，后期维护也将更加便利。 （1）结构性注释 结构性注释仅仅是用风格统一的大注释块从视觉上区分被分隔的部分。 （2）提示性注释 在编写CSS文档时，可能需要某种技巧解决某个问题。在这种情况下，最好将这个解决方案简要的注释在代码后面。

4.1 CSS概述 4.1.4 CSS的工作环境 1．CSS的显示环境 浏览器是CSS的显示环境。目前，浏览器的种类多种多样，虽然IE、Opera、Chrome、Firefox等主流浏览器都支持CSS，但它们之间仍存在着符合标准的差异。 2．CSS的编辑环境 能够编辑CSS的软件很多，例如Dreamweaver、Edit Plus、EmEditor和topStyle等，这些软件有些还具有“可视化”功能，但本书不建议读者太依赖“可视化”。本书中所有的CSS样式均采用手工输入的方法，不仅能够使设计人员对CSS代码有更深入的了解，还可以节省很多不必要的属性声明，效率反而比“可视化”软件还要快。

4.1 CSS概述 4.1.5 体验CSS 要亲身体验CSS功能的强大之处，读者可以访问一个名为“CSS禅意花园”的网站（http://www.csszengarden.com/）。如图4-2所示。

4.2 样式表语法 4.2.1 CSS规则 CSS规则由两部分构成：选择符（selector）和声明，而声明又由属性（attribute）和属性的取值（value）组成。其语法为： selector{属性:属性值[[;属性:属性值]…]} 语法说明： selector表示希望进行格式化的元素；声明部分包括在选择器后的大括号中；用“属性:属性值”描述要应用的格式化操作。

4.2 样式表语法 4.2.2 选择符 1．类型选择符 类型选择符是指以文档对象模型（DOM）作为选择符，即选择某个HTML标签为对象，设置其样式规则。类型选择符就是网页元素本身，定义时直接使用元素名称。其格式为： E { /*CSS代码*/ }

4.2 样式表语法 4.2.2 选择符 2．class类选择符 在应用时只要在标签中指定它属于哪一个类，就可以使用该类的样式了。其格式为： 4.2 样式表语法 4.2.2 选择符 2．class类选择符 在应用时只要在标签中指定它属于哪一个类，就可以使用该类的样式了。其格式为： <style type="text/css"> <!-- 标签1.类名称1{属性:属性值; 属性:属性值 …} 标签2.类名称2{属性:属性值; 属性:属性值 …} … 标签3.类名称n{属性:属性值; 属性:属性值 …} --> </style>

4.2 样式表语法 4.2.2 常用的选择符 3．id选择符 id选择符用来对某个单一元素定义单独的样式。定义id选择符时要在id名称前加上一个“#”号。格式为： <style type="text/css"> <!-- #id名1{属性:属性值; 属性:属性值 …} #id名2{属性:属性值; 属性:属性值 …} … #id名n{属性:属性值; 属性:属性值 …} --> </style>

4.2 样式表语法 4.2.2 常用的选择符 4．span选择符 <span>标签也可以用来定义区域，但一般用于网页中某一个小问题段落。其格式为： <span id="样式名">…</span> 或 <span class="样式名">…</span> 5．div选择符 div（division，部分的简写）在功能上与span相似，最主要的差别在于，div是一个块级标签。其格式为： <div id="样式名">…</div> 或 <div class="样式名">…</div>

4.2 样式表语法 4.2.2 常用的选择符 6．通用选择符 通用选择符指选定文档对象模型（DOM）中的所有类型的单个对象，是一种特殊的选择符，它用*表示。其格式为： *｛CSS代码｝ 7．通用兄弟元素选择符E~F 通用兄弟元素选择符E~F用来指定位于同一个父元素之中的某个元素的之后的所有其他某个种类的兄弟元素所使用的样式。其格式为： E~F：{att}

4.2 样式表语法 4.2.2 常用的选择符 8．包含选择符 9．分组选择符 包含选择符能够简化代码，大范围的样式控制。其格式为： 4.2 样式表语法 4.2.2 常用的选择符 8．包含选择符 包含选择符能够简化代码，大范围的样式控制。其格式为： E1 E2 ｛ /*对子层控制规则*/ ｝ 9．分组选择符 分组选择符指的是对多个标签设置同一样的样式。格式为： E1,E2,E3 { /*CSS代码*/}

4.2 样式表语法 4.2.2 常用的选择符 10．属性选择符 属性选择符存在7种具体形式： （1）E[att]属性名选择符 4.2 样式表语法 4.2.2 常用的选择符 10．属性选择符 属性选择符存在7种具体形式： （1）E[att]属性名选择符 （2）E[att=val]属性值选择符 （3）E[att~=val]属性值选择符 （4）E[att|=val]属性值选择符 （5）E[att^=val]属性值子串选择符 （6）E[att$=val]属性值子串选择符 （7）E[att*=val]属性值子串选择符

4.2 样式表语法 4.2.2 常用的选择符 11．伪类选择符 伪类可以让用户在使用页面的过程中增加更多的互交效果，例如应用最为广泛锚点标签<a>的几种状态（未访问链接状态、已访问链接状态、鼠标指针悬停在链接上的状态以及被激活的链接状态）。 12．伪元素 与伪类的方式类似，伪元素通过对插入到文档中的虚构元素进行触发，从而达到某种效果，伪元素语法的形式为： 选择符：伪元素{属性: 属性值; }

4.2 样式表语法 【演练4-1】伪类的应用。当鼠标悬停在超链接的时候背景色变为其他颜色，并且添加了边框线，待鼠标离开超链接时又恢复到默认状态，这种效果就可以通过伪类实现。本例文件4-1.html在浏览器中的显示效果如图4-11所示。

4.3 CSS的属性单位 4.3.1 长度、百分比单位 1．长度单位 长度单位有相对长度单位和绝对长度单位两种类型。 4.3.1 长度、百分比单位 1．长度单位 长度单位有相对长度单位和绝对长度单位两种类型。 相对长度单位是指，以该属性前一个属性的单位值为基础来完成目前的设置。 绝对长度单位将不会随着显示设备的不同而改变。换句话说，属性值使用绝对长度单位时，不论在哪种设备上，显示效果都是一样的，如屏幕上的1cm与打印机上的1cm是一样长的。 由于相对长度单位确定的是一个相对于另一个长度属性的长度，因而它能更好地适应不同的媒体，所以它是首选的。

4.3 CSS的属性单位 4.3.1 长度、百分比单位 2．百分比单位 4.3.1 长度、百分比单位 2．百分比单位 百分比单位也是一种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。并非所有属性都支持百分比单位。 一个百分比值由可选的正号“+”或负号“-”，接着一个数字，后跟百分号“%”组成。如果百分比值是正的，正号可以不写。正负号、数字与百分号之间不能有空格。

4.3 CSS的属性单位 4.3.2 色彩单位 在HTML网页或者CSS样式的色彩定义里，设置色彩的方式是RGB方式。在RGB方式中，所有色彩均由红色（Red）、绿色（Green）、蓝色（B1ue）三种色彩混合而成。 在HTML标记中只提供了两种设置色彩的方法：十六进制数和色彩英文名称。CSS则提供了3种定义色彩的方法：十六进制数、色彩英文名称、rgb函数和rgba函数。

4.4 CSS与HTML文档的结合方法 4.4.1 内部样式表 内部样式表的格式为： 【演练4-2】使用内部样式表制作网络鞋城新品上架页面。 4.4.1 内部样式表 内部样式表的格式为： <style type="text/css"> <!-- 选择符1{属性:属性值; 属性:属性值 …} /* 注释内容 */ 选择符2{属性:属性值; 属性:属性值 …} … 选择符n{属性:属性值; 属性:属性值 …} --> </style> 【演练4-2】使用内部样式表制作网络鞋城新品上架页面。

4.4 CSS与HTML文档的结合方法 4.4.2 行内样式表 4.4.2 行内样式表 行内样式表也称内嵌样式表，是指在HTML标签中插入style属性，再定义要显示的样式表，而style属性的内容就是CSS的属性和值。用这种方法，可以很简单地对某个标签单独定义样式表。这种样式表只对所定义的标签起作用，并不对整个页面起作用。有时候这种方式却非常有效。其格式为： <标签 style="属性:属性值; 属性:属性值 …"> 【演练4-3】使用行内样式表制作网络鞋城新品上架页面。

4.4 CSS与HTML文档的结合方法 4.4.3 链入外部样式表 4.4.3 链入外部样式表 链入外部样式表就是当浏览器读取到HTML文档的样式表链接标签时，将向所链接的外部样式表文件索取样式。先将样式表保存为一个样式表文件（.css），然后在网页中用<link>标签链接这个样式表文件。<link>标签必须放到页面的<head>…</head>标签对内。其格式为： <head> … <link rel="stylesheet" href="外部样式表文件名.css" type="text/css"> </head> 【演练4-4】链入外部样式表制作网络鞋城新品上架页面。

4.4 CSS与HTML文档的结合方法 4.4.4 导入外部样式表 4.4.4 导入外部样式表 导入外部样式表就是当浏览器读取HTML文件时，复制一份样式表到这个HTML文件中，即在内部样式表的<style>标签对中导入一个外部样式表文件。其格式为： <style type="text/css"> <!-- @import url("外部样式表的文件名1.css"); @import url("外部样式表的文件名2.css"); 其他样式表的声明 --> </style> 【演练4-5】使用导入外部样式表制作网络鞋城新品上架页面。

4.5 样式表的层叠、特殊性与重要性 4.5.1 样式表的层叠 4.5 样式表的层叠、特殊性与重要性 4.5.1 样式表的层叠 样式表的优先级别从高到低为：行内样式表、内部样式表、链接样式表、导入样式表和默认浏览器样式表。浏览器将按照上述顺序执行样式表的规则。 样式表的层叠性就是继承性，样式表的继承规则是：外部的元素样式会保留下来，由这个元素所包含的其他元素继承；所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把多层嵌套的样式叠加在一起，除非进行更改；遇到冲突的地方，以最后定义的为准。 【演练4-7】样式表的层叠示例。 【演练4-8】样式表的层叠示例。

4.5 样式表的层叠、特殊性与重要性 4.5.2 特殊性 特殊性描述了不同规则的相对权重，当多个规则应用到同一个元素时权重越大的样式会被优先采用。 4.5.3 重要性 不同的选择符定义相同的元素时，要考虑不同选择符之间的优先级（id选择符、类选择符和HTML标签选择符），id选择符的优先级最高，其次是类选择符，HTML标签选择符最低。如果想超越这三者之间的关系，可以用!important来提升样式表的优先权，例如： p { color: #f00!important } .blue { color: #00f} #id1 { color: #ff0}

4.6 元素分类 1．块级元素（display:block） 块级元素是从一个新行开始显示的，其后面的元素也需要另起一行显示。 4.6 元素分类 1．块级元素（display:block） 块级元素是从一个新行开始显示的，其后面的元素也需要另起一行显示。 2．行级元素（display:inline） 行级元素也称内联元素，该类型的元素不需要另起一行显示，其后面的元素也不需要另起一行显示。 3．列表项元素（display:list-item） 该类型的元素如果出现在有序列表中，则具有顺序性，此元素会作为列表显示。 4．隐藏元素（display:none） 如果将某一元素的display设置为none，则元素的存在会被浏览器忽略，而且所占用的空间也会被忽略。 5．其他分类 display : inline-table | run-in | table | table-caption | table-cell | table-column | table-column-group | table-row | table-row-group | inherit

4.7 实训——制作什锦果园业界资讯页面 【实训】制作什锦果园业界资讯页面，本例文件4-9.html在浏览器中显示的效果如图4-22所示。

习题4 1．建立内部样式表，使用包含选择符制作如图4-23所示的页面。 2．使用伪类相关的知识制作鼠标悬停效果。当鼠标未悬停在链接上时，显示如图4-24（a）所示，当鼠标悬停在链接上时，显示如图4-24（b）所示。 3．使用CSS制作网络鞋城经营模式简介页面，如图4-25所示。 4．使用CSS制作网络鞋城常见问题解答局部页面，如图4-26所示。