小白第二天请大叔检验他的修行成果。大叔脸色不悦到：“欲速则不达，你还是太猴急。也罢，隔壁村长想统计他们村每户的家庭和睦情况，你用HTML做一个调查表先。”
小白接受任务后，兴冲冲跑回去开始他的任务时，才发现一个问题。调查表，要调查什么？具体内容是什么？于是他又跑去问村长，村长憨厚的笑了笑：“俺就是想知道下，俺也不知道。” 小白瞪大眼睛，无语之极，暗叹只能靠自己了。回去后花了一个小时，小白终于完成了它调查表的内容架构。
家庭和睦调查表
完成调查表之后，又迅速完成了调查表可能需要的HTML标签。
1 首先需要在浏览器的标签栏里显示调查表的名字，他需要这个：
<title>家庭和睦调查表<title>
家庭和睦调查表<title>家庭和睦调查表<title>
2 然后家庭编号，家庭住址他需要输入框：
家庭住址:<input type="text"></input>
家庭编号:<input type ="number"></input>
3 电影风格，吃饭口味，综艺节目他需要复选框“
<input type= "checkbox">动作</input>
4 输入时间他需要这个：
<input type="date"></input>
5 父亲，母亲，孩子的各自的选项用div包含在一起。所以需要三个div。
<div id = "father"></div>
<div id = "mother"></div>
<div id = "children"></div>
小白迅速的按照自己的规划完成了调查表的HTML。可是用浏览器打开一看，让他自己都觉得丑的无法直视。小白又找到大叔：“大叔，为什么我都调查表这么难看？”，大叔笑到：“人靠衣裳，马靠鞍。你现在只是有内容框架，你还需要为内容指定显示样式，这样浏览器才能知道调查表的布局，颜色，字体等等，最后去按样式的要求来显示调查表，而这个样式在前端css(Cascading Style Sheets)来决定，你去看下css，然后应用到你的调查表”。
调查表
小白拿到大叔给的css秘籍后，又立马开始研究起来：
HTML标签在浏览器中是按照css定义的规则显示的，如果没有定义css样式规则，则浏览器会按照默认的css样式来显示标签。CSS定义有三种方法：
1 外部样式表。单独的css文件，文件后缀为.css，在css文件中用为不同标签指定显示的规则。
2 内部样式表。在html文件的head标签内，用style标签来定义css样式规则，
3 内联样式。在html标签的开始标签内定义css样式规则。
以上三种方法可以混合使用，当三种方法为同一标签的某一个样式属性指定了不同的显示规则，浏览器将按优先级从高到低来选用规则，内联样式>内部样式>外部样式。不同的样式属性叠加显示，相同的则优先级高的覆盖掉优先级低的。
1 外部样式表<link rel = "stylesheet" type = "text/css" href= "homesearch.css">
2 <style>
body{background-color:WhiteSmoke;}
</style>
3 <body style = "background-color:WhiteSmoke;">
改变调查表整个背景颜色后，调查表如图显示：
背景颜色为WhiteSmoke
网友评论