3.7 CSS设置表格和表单样式-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.7 CSS设置表格和表单样式 主要内容 CONTENTS PART 01 设置表格样式 PART 02 设置表单样式 2 设置表格样式 表格早期多用于页面布局，现在多用于较详细信息展示，如时间表、日程表等。功能各不相同的表格，其样式设计也应该各有特色。 【案例3.7.1】设置表格样式 属性值 说明 border-collapse 功能：设置表格行或单元格边是合并或独立。 语法：border-collapse:separate | collapse border-spacing 功能：设置表格边框独立时，行和单元格的边框在横向和纵向上的间距。 语法：border-spacing:length{1,2} caption 功能：设置表格标题所在位置。 语法：caption-side:top | bottom empty-cells 功能：设置当表格单元格无内容时，是否显示该单元格的边框。 语法：empty-cells:hide | show border 功能：用来综合设置表格的上述边框样式，是简写形式。 设置表单样式 表单是网页中浏览器与服务器交互的手段。表单中包含多种表单元素，每种表单元素都有自己的默认样式。 【案例3.7.2】设置表单的样式 属性 说明 input input元素可按type属性分类进行样式设置，建议使用属性选择器。 textarea 多行文本框适用于在网页上输入多行文字内容，CSS样式效果主要体现在控制文本框的尺寸、位置、文本内容等样式上。 select 下拉菜单样式主要体现在控制下拉菜单背景、前景、边框、显示菜单项数量等样式。 按钮 表单中的按钮分为提交按钮、重置按钮、普通按钮、图像按钮等，CSS样式效果重点在按钮的形状、尺寸、边框等样式上。 感谢观看 $