我们来介绍css入门，我们从基础标签介绍起，现阶段我们看到的网站大部分是div和css可以实现，今天介绍css定义表单字体样式，css定义表单边框和边距样式，css定义表单背景样式
1.css定义表单字体样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#form1 #bold {
font-weight: bold;
font-size: 14px;
font-family: "宋体";
}
#form1 #blue {
font-size: 14px;
color: #0000ff;
}
#form1 select {
font-size: 13px;
color: #ff0000;
font-family: verdana, arial;
}
#form1 textarea {
font-size: 14px;
color: #000099;
text-decoration: underline;
font-family: verdana, arial;
}
#form1 #submit {
font-size: 16px;
color: green;
font-family: "方正姚体";
}
</style>
</head>
<body>
<form name="form1" action="#" method="post" id="form1">
<input maxlength="10" size="10" value="加粗" name="bold" id="bold">
<input type="password" maxlength="12" size="8" name="blue" id="blue">
<br>
<select size="1" name="select">
<option value="2" selected>sina.com</option>
<option value="1">sohu.com</option>
</select>
<br>
<textarea name="txtarea" rows="5" cols="30" align="right">下划线样式</textarea>
<br>
<input type="submit" value="提交" name="submit" id="submit">
<input type="reset" value="清除" name="reset">
</form>
</body>
</html>
2.定义表单边框和边距样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background: #ffff99;
margin: 0;
padding: 0;
text-align: center;
}
#form1 {
width: 450px;
background: #fff;
text-align: left;
padding: 12px 32px;
margin: 0 auto;
font-size: 13px;
}
#form1 h2 {
border-bottom: dotted 1px #ddd;
text-align: center;
font-weight: normal;
}
ul {
padding: 0;
margin: 0;
list-style-type: none;
}
input, select {
border: groove #ccc 1px;
padding: 4px;
color:blue;
}
.label {
font-size: 13px;
font-weight: bold;
margin-top: 0.7em;
}
#save {
padding:8px 16px;
border:solid 1px #666;
color:red;
}
</style>
</head>
<body>
<form id="form1" action="#public" method="post">
<h2>个人信息注册</h2>
<ul>
<li class="label">姓名</li>
<li>
<input name="name" id="name" size="20">
</li>
<li class="label">职业</li>
<li>
<input name="work" id="work" size="25">
</li>
<li class="label">详细地址</li>
<li>
<input name="address" id="address" size="50">
</li>
<li class="label">邮编</li>
<li>
<input name="code" id="code" size="12" maxlength="12">
</li>
<li class="label">省市</li>
<li>
<input id="city" name="city">
</li>
<li class="label">国家</li>
<li>
<select id="country" name="country">
<option value="china">china</option>
<option value="armenia">armenia</option>
<option value="australia">australia</option>
<option value="italy">italy</option>
<option value="japan">japan</option>
</select>
</li>
<li class="label">Email</li>
<li>
<input id="email" name="email" maxlength="255">
</li>
<li class="label">电话</li>
<li>
<input name="tel1" id="tel1" maxlength="3" size="6">
-
<input name="tel2" id="tel2" maxlength="8" size="16">
</li>
<li class="label">
<input name="save" id="save" type="submit" value="提 交">
</li>
</ul>
</form>
</body>
</html>
3.定义表单背景样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<STYLE type="text/css">
body {
color: #666;
background-color: #CCCCCC;
font-size: 14px;
}
#fieldset h2 {
font-size: 2em;
color: #fff;
text-align: center;
}
#fieldset label {
padding: 0.2em;
margin: 0.4em 0px 0px;
float: left;
width: 70px;
text-align: right;
}
.textfield {
border: #fff 0px solid;
padding: 4px 8px;
margin: 3px;
width: 240px;
height: 20px;
background: url(//freemuban.com/js/429/textfield_bg.gif) no-repeat;
background-size: cover;
color: #FF00FF;
font-size: 1.1em;
}
textarea {
border: #fff 0px solid;
padding: 8px;
margin: 3px;
height: 200px;
width: 400px;
background: url(//freemuban.com/js/429/textarea_bg.gif) no-repeat;
background-size: cover;
color: #FF00FF;
font-size: 1.1em;
}
.submit {
border: #fff 0px solid;
margin: 6px;
width: 120px;
height: 30px;
background: url(//freemuban.com/js/429/submit.gif) no-repeat;
background-size: cover;
color: #666;
font-size: 1.1em;
}
</STYLE>
</head>
<body>
<form id="fieldset" action="#" method="post">
<h2>联系表单</h2>
<label for="name">姓名</label>
<input class="textfield" id="name" name="name">
<br>
<label for="email">Email</label>
<input class="textfield" id="email" name="email">
<br>
<label for="website">网址</label>
<input class="textfield" id="website" value="http://" name="website">
<br>
<label for="comment">反馈</label>
<textarea class="textarea" id="comment" name="comment" rows="15" cols="30"></textarea>
<br>
<label for="submit"> </label>
<input class="submit" id="submit" type="submit" value="提 交" name="submit">
</form>
<!--表单是网站至关重要的组成部分。
从非常简单、直接的表单，到花哨、多彩和创意的表单，每个网站都会呈现一种表单风格。当考虑站点的界面设计时，这必定是你应该关注的元素。不论是登录/注册表单，还是联系表单，或者其他类型表单，我们需要牢记一点：这些表单的目标是要赢得用户的注意，让他们想要在其 中填入信息。
--></body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<STYLE type="text/css">
#fieldset {
color: #6D8B1E;
font-size: 14px;
}
#fieldset input {
border: solid 1px #339900;
width: 12em;
margin:4px;
}
#fieldset dt {
font-size: 16px;
color: #333;
margin-bottom: 1em;
}
#fieldset dd {
line-height: 1em;
}
#fieldset #submit {
text-indent: 999px;
border: 0;
width: 53px;
height: 19px;
background: url(//freemuban.com/js/429/submit1.gif) no-repeat;
}
#fieldset #reset {
text-indent: 999px;
border: 0;
width: 53px;
height: 19px;
background: url(//freemuban.com/js/429/reset.gif) no-repeat;
}
</STYLE>
</head>
<body>
<form id="fieldset" action="default.asp" method="post">
<dl>
<dt>注册表单</dt>
<dd> 姓名
<input id="name" name="name">
<input id="submit" type="submit" value="提交" name="submit">
<dd> 密码
<input id="password" name="password">
<input id="reset" type="reset" value="取消" name="reset">
</dd>
</dl>
</form>
</body>
</html>
