家庭网页html,前端江湖之秘籍HTML(3)实战：家庭和睦调查表

小白第二天请大叔检验他的修行成果。大叔脸色不悦到：“欲速则不达，你还是太猴急。也罢，隔壁村长想统计他们村每户的家庭和睦情况，你用HTML做一个调查表先。”

小白接受任务后，兴冲冲跑回去开始他的任务时，才发现一个问题。调查表，要调查什么？具体内容是什么？于是他又跑去问村长，村长憨厚的笑了笑：“俺就是想知道下，俺也不知道。” 小白瞪大眼睛，无语之极，暗叹只能靠自己了。回去后花了一个小时，小白终于完成了它调查表的内容架构。

家庭和睦调查表

完成调查表之后，又迅速完成了调查表可能需要的HTML标签。

1 首先需要在浏览器的标签栏里显示调查表的名字，他需要这个：

家庭和睦调查表

家庭和睦调查表

家庭和睦调查表

2 然后家庭编号，家庭住址他需要输入框：家庭住址:

家庭编号:

3 电影风格，吃饭口味，综艺节目他需要复选框“动作

4 输入时间他需要这个：

5 父亲，母亲，孩子的各自的选项用div包含在一起。所以需要三个div。

小白迅速的按照自己的规划完成了调查表的HTML。可是用浏览器打开一看，让他自己都觉得丑的无法直视。小白又找到大叔：“大叔，为什么我都调查表这么难看？”，大叔笑到：“人靠衣裳，马靠鞍。你现在只是有内容框架，你还需要为内容指定显示样式，这样浏览器才能知道调查表的布局，颜色，字体等等，最后去按样式的要求来显示调查表，而这个样式在前端css(CascadingStyleSheets)来决定，你去看下css，然后应用到你的调查表”。

调查表

小白拿到大叔给的css秘籍后，又立马开始研究起来：

HTML标签在浏览器中是按照css定义的规则显示的，如果没有定义css样式规则，则浏览器会按照默认的css样式来显示标签。CSS定义有三种方法：

1 外部样式表。单独的css文件，文件后缀为.css，在css文件中用为不同标签指定显示的规则。

2 内部样式表。在html文件的head标签内，用style标签来定义css样式规则，

3 内联样式。在html标签的开始标签内定义css样式规则。

以上三种方法可以混合使用，当三种方法为同一标签的某一个样式属性指定了不同的显示规则，浏览器将按优先级从高到低来选用规则，内联样式>内部样式>外部样式。不同的样式属性叠加显示，相同的则优先级高的覆盖掉优先级低的。

1 外部样式表

2

body{background-color:WhiteSmoke;}

3

改变调查表整个背景颜色后，调查表如图显示：

背景颜色为WhiteSmoke