使用CSS美化表格和表单元素课件.ppt

1、.使用使用CSS美化表格和表单元素美化表格和表单元素.网页中表格的应用无处不在，在HTML中，最初希望用于纯数据，却发展为基本页面布局子语言；但是在Web标准中，正在渐渐地恢复表格原来的用途，即只用来显示表格数据。如今，表格已经成为可视化构成与格式化输出的主要方式。本章介绍使用CSS样式设置表格的方法，掌握Web标准网站的页面中数据的制作方法，并能够使用CSS样式表对数据表进行综合运用。.主要内容7.1 创建数据表格制作企业网站新闻页面7.2 设置表格边框和背景制作精美表格7.3 为单元行应用类CSS样式 实现隔行变色的单元格7.4 应用CSS样式的hover伪类 实现交互的变色表格7.5 设

2、置表单元素的背景颜色制作商品搜索7.6 设置表单元素的边框美化登录框.主要内容7.7 使用CSS定义圆角文本字段7.8 使用CSS定义下拉列表制作多彩下拉列表7.9 column-width属性（CSS3.0）实现网页文本分栏7.10 column-count属性（CSS3.0）控制网页文本分栏数7.11 column-gap属性（CSS3.0）控制网页文本分栏间距7.12 column-rule属性（CSS3.0）为分栏添加分栏线.创建数据表格 HTML中的数据表格是网页中常见的元素，表格在网页中是用来显示二维关系数据的，并且还可以为网页进行排版、布局，但是使用表格布局的网页不能达内容与表现

3、的分离，因此不建议使用在Web标准中。本实例制作一个企业网站新闻页面，在该新闻页面中使用数据表格的形式来表现新闻标题内容，为页面中的数据进行合理、清晰的排版，使浏览者能够对页面中的数据一目了然。【任务描述任务描述】.创建数据表格【任务展示任务展示】案例效果图案例效果图.创建数据表格【任务实现任务实现】HTML代码代码.创建数据表格CSS样式代码样式代码.创建数据表格【相关知识相关知识】HTML表格通过标签定义。在的打开和关闭标签之间，可以发现有许多由标签指定的表格行，每一行由一个或者多个表格单元格组成。表格单元格可以是表格数据，或者表格标题。通常将表格标题认为是表达对应表格数据单元格的某种信息

4、。.创建数据表格 通过使用、和元素，将表格行聚集为组，可以构建更复杂的表格。每个标签定义包含一个或者多个表格行，并且将它们标识为一个组的盒子。标签用于指定表格标题行，如果打印的表格超过一页纸，应该在每个页面的顶端重复。是表格标题行的补充，它是一组作为脚注的行，如果表格横跨多个页面，也应该重复。用标签标记的表格正文部分，将相关行集合在一起，表格可以有一个或多个部分。.创建数据表格 、和标签使设计者能够将表格划分为逻辑部分，例如将所有列标题放在标签中，这样就能够对这个特殊区域单独的应用样式表。如果在一个表格中使用了和标签，那么在这个表格中至少使用一个标签。一个表格中只能使用一个和标签，但却可以使用

5、多个标签将复杂的表格划分为更容易管理的部分。.创建数据表格 默认情况下，Web浏览器如何显示表格数据？Web浏览器通过基于浏览器对表格标记理解的默认样式设计来显示表格，即：单元格之间或表格周围没有边框；表格数据单元格使用普通文本并且左对齐；表格标题单元格居中对齐，并设置为粗体字体；标题在表格中间。.创建数据表格 为什么需要使用CSS对表格数据进行控制？表格在网页中主要用于表现表格式数据，Web标准是为了实现网页内容与表现的分离，这样可以使网页的内容和结构更加整洁，便于更新和修改。如果直接在表格的相关标签中添加属性设置，会使得表格结构复杂，不能够实现内容与表现的分离，不符合Web标准的要求，所以

6、建议使用CSS样式对表格数据进行控制。.设置表格边框和背景 在网页中，通常会为表格添加边框和背景，以此来界定和区分不同单元格中的数据内容，如果表格的border值大于0，则显示边框；如果border值为0，则不显示边框。本实例通过设置表格的边框、背景颜色以及背景图片来对表格进行进一步的装饰和美化，使得页面中的内容能够更加丰富多彩，从而增加网页的吸引力。【任务描述任务描述】.设置表格边框和背景【任务展示任务展示】案例效果图案例效果图.设置表格边框和背景【任务实现任务实现】CSS样式代码样式代码.设置表格边框和背景【相关知识相关知识】在CSS样式中，通过定义border属性、border-coll

7、apse属性和background-color属性可以对表格的边框和背景进行设置，border-collapse属性的语法格式如下：separate：默认值，表示边框会被分开，不会忽略border-spacing和empty-cells属性；collapse：表示边框会合并为一个单一的边框，会忽略border-spacing和empty-cells属性。border-collapse:separate|collapse;.设置表格边框和背景 n如何设置表格标题？标签是表格标题标签，标签出现在标签之间，作为第一个子元素，它通常在表格之前显示。包括标签的显示盒子的宽度和表格本身宽度相同。标题的位置

8、并不是固定的，可以使用caption-side属性将标题放在表格盒子的不同边，只能对标签设置这个属性，默认值是top（标题出现在表格之前）；bottom（标题出现在表格之后）；inherit（使用包含盒子设置的caption-side值）。在大多数的浏览器中，标签的默认样式设计是默认字体，在表格上面居中显示。.为单元行应用类为单元行应用类CSS样式样式 对于一些信息量较大的网站，可以为网页中的表格数据使用隔行变色的显示方式，将表格的奇数行和偶数行设置不一样的颜色，使得页面中数据信息的显示效果更加清晰、有条理，从而方便浏览者查看数据信息。本实例为表格中的单元行设置背景颜色来实现单元格隔行变色的效

9、果，为浏览者提供舒适的浏览效果。【任务描述任务描述】.为单元行应用类为单元行应用类CSS样式样式【任务展示任务展示】案例效果图案例效果图.为单元行应用类为单元行应用类CSS样式样式【任务实现任务实现】HTML和和CSS样式代码样式代码.为单元行应用类为单元行应用类CSS样式样式【相关知识相关知识】如果想实现隔行变色的单元格效果，首先需要在CSS样式表中创建设置背景颜色的类CSS样式；其次，为了产生灰色和白色的交替行效果，将新建的类CSS样式应用于数据表格中每一个偶数行即可。.为单元行应用类为单元行应用类CSS样式样式n如何控制表格单元格中的水平对齐？在表格单元格中，默认的水平对齐方式是左对齐。

10、可以使用text-align属性使单元格中的元素向左、向右或者居中排列。n如何控制表格单元格中的垂直对齐？在表格单元格中，默认的垂直对齐方式是垂直居中对齐。可以使用vertical-align属性改变单元格的垂直对齐方式，顶端对齐、居中对齐、底端对齐。.应用应用CSS样式的样式的hover伪类伪类 通常，浏览者在面对大量的信息时都会感到非常枯燥和疲惫，因此可以通过为表格设置交互变色的效果，使得数据行能够根据鼠标的悬浮位置来改变背景颜色，从而让页面充满动态效果，减少阅读信息时产生的乏味感观。本实例将页面中存储数据的表格使用交互变色的方式展现出来，为整个页面增添了不少动态效果，也增加了页面的交互性

11、。【任务描述任务描述】.应用应用CSS样式的样式的hover伪类伪类【任务展示任务展示】案例效果图案例效果图.应用应用CSS样式的样式的hover伪类伪类【任务实现任务实现】CSS样式代码样式代码.应用应用CSS样式的样式的hover伪类伪类【相关知识相关知识】在CSS样式中，变色表格的特殊功能主要是通过hover伪类来实现。在CSS规则中定义的就是，标签中的标签的hover伪类，其中分别定义了背景颜色和光标指针的形状。.应用应用CSS样式的样式的hover伪类伪类n标签与标签的区别？行和列的标题应该使用标记而不是标记，但是如果某些内容既是标题又是数据，那么它仍然应该使用标记。表格标题可以设置

12、值为row或col的scope属性，定义它们是行标题还是列标题。它们还可以设置rowgroup或colgroup，表示它们与多行或多列相关。.设置表单元素的背景颜色设置表单元素的背景颜色 在制作网页时，刚插入的表单元素默认的背景颜色为白色。可以通过设置CSS属性来控制表单元素的背景颜色，从而提高页面的审美效果。本实例制作的是一个商品搜索页面，该页面中运用了大量的表单元素，为了丰富页面的视觉效果，通过CSS样式为表单元素进行相应的美化，以此来吸引浏览者的目光。【任务描述任务描述】.设置表单元素的背景颜色设置表单元素的背景颜色【任务展示任务展示】案例效果图案例效果图.设置表单元素的背景颜色设置表单

13、元素的背景颜色【任务展示任务展示】CSS样式代码样式代码.设置表单元素的背景颜色设置表单元素的背景颜色 其实，在CSS样式中设置表单元素的背景颜色和设置其他元素的背景颜色一样，都是通过background-color属性进行设置的，但是在此例中该属性需要在类CSS样式中定义，然后再通过为表单元素应用该类CSS样式即可。【相关知识相关知识】.设置表单元素的边框设置表单元素的边框 设置表单元素的边框同样能够对表单元素的外观进行相应的美化和装饰，在Dreamweaver中，可以通过border属性的设置对表单元素的边框进行控制，从而达到赏心悦目的画面效果。本实例介绍了如何对表单元素的边框样式进行设置

14、，并同时考虑到边框的样式与页面整体的色调、大小是否协调。【任务描述任务描述】.设置表单元素的边框设置表单元素的边框【任务展示任务展示】设置表单单边框后的效果图设置表单单边框后的效果图设置表单单边框前的效果图设置表单单边框前的效果图.设置表单元素的边框设置表单元素的边框【任务实现任务实现】CSS样式代码样式代码.设置表单元素的边框设置表单元素的边框 在CSS样式中，border属性包含三个参数，分别为style（定义边框的样式）、color（定义边框的颜色）和width（定义边框的宽度），只要对这三个参数进行相应的设置，即可很好的控制表单元素的显示效果。【相关知识相关知识】.设置表单元素的边框设

15、置表单元素的边框n在网页中是不是可以在任意位置插入任何的表单元素？表单域是表单中必不可少的元素之一，所有的表单元素只有在表单域中才会生效，因此制作表单页面的第1步就是插入表单域。如果在表单区域外插入文本域，Dreamweaver会弹出一个提示框，提示用户插入表单域，单击“是”按钮，Dreamweaver会在插入文本域的同时在它周围创建一个表单域。这种情况针对其他的表单元素也同样会出现。.使用使用CSS定义圆角文本字段定义圆角文本字段 定义CSS属性可以设置表单元素的背景颜色、边框样式，还可以为文本字段实现圆角的效果，这种方法的使用进一步增加了网页页面的装饰效果，从而给浏览者提供一个更加完美、精

16、彩的网页界面。本实例介绍的是通过设置CSS属性来定义圆角文本字段，该样式从视觉上给人一种亲近感，减少了直角文本字段太过锋利的视觉感受。【任务描述任务描述】.使用使用CSS定义圆角文本字段定义圆角文本字段【任务展示任务展示】案例效果图案例效果图.使用使用CSS定义圆角文本字段定义圆角文本字段【任务实现任务实现】CSS样式代码样式代码.使用使用CSS定义圆角文本字段定义圆角文本字段【相关知识相关知识】在CSS样式中，圆角文本字段的定义主要是通过设置类CSS样式，然后再为相应的文本字段应用该类CSS样式实现的。在该类CSS样式中，定义了一个圆角文本字段的背景图片，从而使得文本字段实现圆角文本字段的效

17、果。.使用使用CSS定义下拉列表定义下拉列表 在Dreamweaver中，通过一个或者多个标签周围包装标签构造选择列表。另外，设置size属性值能够使列表以多行的形式显示，如果没有给出size属性值，则选择列表是下拉列表的样式；如果给出了size值，则选择列表将会是可滚动列表。本实例将下拉列表中每个选项的背景颜色进行了设置，为枯燥的列表注入了不少活力。【任务描述任务描述】.使用使用CSS定义下拉列表定义下拉列表【任务展示任务展示】案例效果图案例效果图.使用使用CSS定义下拉列表定义下拉列表【任务实现任务实现】HTML和和CSS样式代码样式代码.使用使用CSS定义下拉列表定义下拉列表【相关知识相

18、关知识】在Dreamweaver中，、和标签可以同时使用任何样式，还可以和HTML中的任何元素一起使用，并且Web浏览器对其也支持。.column-width属性（属性（CSS3.0）在一些文字内容较多的网站中，通常会采用多列布局的显示方式。在Dreamweaver中，实现多列布局的效果有两种方法，分别为浮动布局和定位布局，但由于浮动布局的灵活性太强，容易发生错位，因此大多使用CSS3.0中新增的column属性设置来实现网页多列布局的页面结构。本实例介绍实现页面中的文字内容多列布局的排版方式。【任务描述任务描述】.column-width属性（属性（CSS3.0）【任务展示任务展示】Fire

19、fox浏览器浏览器下显示效果下显示效果.column-width属性（属性（CSS3.0）【任务实现任务实现】CSS样式代码样式代码.column-width属性（属性（CSS3.0）【相关知识相关知识】column-width属性可以定义多列布局中每列的宽度，可单独使用，也可以和其他多列布局属性组合使用。其的语法格式如下：length：由浮点数字和单位标识符组成的长度值；auto：根据浏览器自动计算列宽限。column-width:|auto ;.column-width属性（属性（CSS3.0）类型版本IE（）IE6.0 （）IE7.0 （）IE8.0Firefox（）Firefox3.0

20、 （）Firefox3.5Chrome（）Chrome1.0.x （）Chrome2.0.xOpera（）Opera9.63Safari（）Safari3.1（）Safari4.0column-width属性的兼容性.column-count属性（属性（CSS3.0）在对页面中的内容使用多列布局的排版方式时，会根据页面的宽度和文字内容的多少来设置多列布局的列数。在Dreamweaver中，可以使用column-count属性进行控制，而不需要通过列宽度自动调整列数。本实例设置多列布局的列数，不用设置固定的列宽，使得页面能够更加随意地使用不同数量的文字内容。【任务描述任务描述】.column-c

21、ount属性（属性（CSS3.0）【任务展示任务展示】Firefox浏览器浏览器下显示效果下显示效果.column-count属性（属性（CSS3.0）【任务实现任务实现】CSS样式代码样式代码.column-count属性（属性（CSS3.0）【相关知识相关知识】column-count属性可以设置多列布局的列数，而不需要通过列宽度自动调整列数。其的语法格式如下：integer：用于定义栏目的列数，取值为大于0的整数，不可以为负数；auto：根据浏览器自动计算列数。column-count:|auto;.column-count属性（属性（CSS3.0）类型版本IE（）IE6.0 （）IE7

22、.0 （）IE8.0Firefox（）Firefox3.0 （）Firefox3.5Chrome（）Chrome1.0.x （）Chrome2.0.xOpera（）Opera9.63Safari（）Safari3.1（）Safari4.0column-count属性的兼容性.column-gap属性（属性（CSS3.0）在为页面设置多列布局时，除了设置列宽和列数，还要根据整个页面的大小考虑到列与列之间的间距，从而能够更好地控制页面中的内容和整体版式。在此可以通过column-gap属性的设置来控制列与列之间的间距。本实例便是通过控制列与列之间的间距来达到更好的页面效果。【任务描述任务描述】.c

23、olumn-gap属性（属性（CSS3.0）【任务展示任务展示】Firefox浏览器下显示效果浏览器下显示效果.column-gap属性（属性（CSS3.0）【任务实现任务实现】CSS样式代码样式代码.column-gap属性（属性（CSS3.0）【相关知识相关知识】在多列布局中，可以通过column-gap属性设置列与列之间的间距，从而可以更好地控制多列布局中的内容和版式。其的语法格式如下：length：由浮点数和单位标识符组成的长度值，不可以为负数；normal：根据浏览器默认设置进行解析，一般为1em。column-gap:|normal;.column-gap属性（属性（CSS3.0）

24、类型版本IE（）IE6.0 （）IE7.0 （）IE8.0Firefox（）Firefox3.0 （）Firefox3.5Chrome（）Chrome1.0.x （）Chrome2.0.xOpera（）Opera9.63Safari（）Safari3.1（）Safari4.0column-gap属性的兼容性.column-rule属性（属性（CSS3.0）对页面使用多列布局的方式进行排版时，使用列边框能够更清晰地区分不同的列。若想实现列边框效果，可以通过column-rule属性来定义，该属性设置包括边框的颜色、样式、宽度等。本实例在多列布局的页面基础上增添了列边框的设置，不仅能让浏览者更容易

25、区分页面中每个列的内容，还能够在视觉上增强页面的可观赏性。【任务描述任务描述】.column-rule属性（属性（CSS3.0）【任务展示任务展示】Firefox浏览器下显示效果浏览器下显示效果.column-rule属性（属性（CSS3.0）【任务实现任务实现】CSS样式代码样式代码.column-rule属性（属性（CSS3.0）【相关知识相关知识】column-rule的语法格式如下：length：由浮点数和单位标识符组成的长度值，不可 以为负值，用于设置边框的宽度；style：设置边框的样式；color：设置边框的颜色。column-rule:|;.column-rule属性（属性（C

26、SS3.0）类型版本IE（）IE6.0 （）IE7.0 （）IE8.0Firefox（）Firefox3.0 （）Firefox3.5Chrome（）Chrome1.0.x （）Chrome2.0.xOpera（）Opera9.63Safari（）Safari3.1（）Safari4.0column-rule属性的兼容性.应用实例应用实例制作新闻资讯网页制作新闻资讯网页 本实例通过为表格中的单元行设置背景颜色来实现单元格隔行变色的效果；当鼠标指向某单元行时使用交互变色的方式展现，使页面中的数据信息的显示效果更加清晰、有条理，并且为整个页面增添了不少动态效果，增强了页面的交互性。【任务描述任务描述】.应用实例应用实例制作新闻资讯网页制作新闻资讯网页【任务展示任务展示】页面最终效果图页面最终效果图.应用实例应用实例制作新闻资讯网页制作新闻资讯网页【任务实现任务实现】