CSS 表单学习笔记

表单在网页中扮演着重要的角色，通过CSS样式可以美化表单，使之更符合网页整体设计风格。本文将介绍CSS中常用的表单样式属性，并举出实例。

表单样式属性

1. color 控制文本颜色。
2. background-color 控制文本框背景颜色。
3. border 控制文本框边框样式、宽度和颜色。
4. border-radius 控制文本框圆角弧度。
5. padding 控制文本框内部留白大小。
6. margin 控制文本框外部留白大小。
7. font-size 控制文本字号大小。
8. font-family 控制文本字体样式。

表单实例

以下为一组表单实例：

htmlCopy Code
<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>

  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>

  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required>

  <br>

  <input type="submit" value="提交">
</form>

接下来使用CSS样式美化上述表单：

cssCopy Code
form label {
  display: block;
  margin-bottom: 10px;
}

form input[type="text"],
form input[type="password"],
form input[type="email"],
form input[type="submit"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

form input[type="text"],
form input[type="password"],
form input[type="email"] {
  background-color: #f2f2f2;
}

form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

form input[type="submit"]:hover {
  background-color: #3e8e41;
}

上述CSS代码中，将label设为块级元素，使之成为一行，增加margin-bottom间距；设置表单文本框的padding、border-radius（圆角）和font-size（字体大小）等属性，美化表单样式；通过设置不同的background-color和color颜色，区分不同的表单元素，如submit按钮。同时，hover伪类可以在鼠标悬停时改变按钮颜色。

最终实现效果如下图所示：

以上就是CSS表单学习笔记的全部内容，希望对大家有所帮助。