8、表单（二）、CSS

一、复习

1、input的type类型

2、radio和checkbox的name

二、新课

（一）表单

1、多行文本输入框

• 在网页设计中经常需要收集用户对某一事件的看法或征求一下用户的意见，而用户的反馈意见往往比较长，原来的单行文本输入框已经不能满足要求，textarea标记可以向表单中插入多行文本输入框。多行文本输入框可以用来输入较多的文字信息，而且可以换行，并将这些信息提交到服务器。
• 基本语法 

<form>

         <textarea name=” ”  rows=" "  cols=" "  wrap=" " >

</form>

2、下拉列表框

• select和option标记用于在表单中插入下拉菜单和列表项。
• 基本语法 

<form>

      <select name=" " size= " "   multiple=" ">

            <option value=" ">

           <option value=" ">

       </select>

</form>

3、定义域和域标题

• 利用<fieldset>标记可将表单内的相关元素进行分组并定义域。fieldset标记将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者可创建一个子表单来处理这些元素。<legend>标记为<fieldset>元素定义标题。
• 基本语法 

<form>

        <fieldset>

                 <legend></legend>

         </fieldset>

</form>

（二）CSS

1、概述

       CSS( Cascading Style Sheets )称为层叠式样式表，用于设置网页中文本、图像的外形样式及版面布局。

       CSS中层叠的意思就是可以对某个标记重复定义多次样式，子标记继承所有父标记定义的样式，还可以多次定义自己的样式，全部样式可以按从外到内、由先到后的顺序叠加起来，如果不发生冲突则全部样式都有效，重复定义发生冲突时依照内层优先、后定义优先的原则进行覆盖，即内层子元素覆盖父元素样式、后定义覆盖先定义的样式。

2、CSS样式规则和内联CSS样式

1）CSS样式规则

样式规则由样式属性和属性值构成，每个样式属性都必须带有属性值，且样式属性与属性值必须以西文冒号分隔：

    样式属性:属性值

• CSS样式属性必须小写，属性值一般不区分大小写。
• 如果一个属性值由多个单词组成且是用空格隔开的，则必须对该属性值加西文的单引号或双引号。
• 样式规则中允许使用空格的地方可以包含任意空格或换行。
• 多个样式规则之间不论是否换行都必须用西文分号分开，最后一个样式分号可以省略(为便于增加新样式最好保留)。

2）内联CSS样式

内联CSS样式也称为行内CSS样式，就是在标记内部用style属性定义的样式规则：

       <标记名style="样式规则1 ;样式规则2 ; … ; " >

3、CSS文本样式

1）CSS大小尺寸量度的属性值

A、绝对单位

       可以用磅、像素、毫米等度量单位设置为固定数值。

       px  像素      pt   磅(1pt=1/72英寸)     pc 皮卡(1pc=12pt)

       mm 毫米      cm 厘米                           in  英寸

B、相对单位

    em    当前默认字体大小的倍数—可根据父元素字号自动调整

    ex      当前字体高度x-height(通常是字体尺寸的一半)的倍数

    %      对区域大小指相对浏览器窗口或父元素的百分比

2）文本字符的CSS样式

字体属性

取值和描述

font-family:字体集;

系统支持的各种字体—逗号隔开

font-size:字号大小;

不同单位固定值、相对% em、预定义值

font-style:样式;

normal、italic斜体、oblique偏斜体

font-weight:粗细;

normal、100~900、bold粗、bolder更粗

font-variant:变体;

normal、small-caps全部小体大写字母

font:综合属性;

样式 变体 粗细 字号 字体—顺序空格隔开

作业：

1、实训报告（1）

2、讨论warp的属性值