网站样式表格与CSS

网站登录

aluualish / getty图片

学习如何用CSS.是改善您网站外观的好方法。在大多数网页上最丑陋的东西中可以说出HTML表格。他们经常无聊和功利,并不是很多风格的方式。

使用CSS,可以改变。将CSS与更高级的表单标记相结合,可以提供一些漂亮的形式。

改变颜色

就像文字一样,您可以更改表单元素的前景和背景颜色。一种简单的方法来更改几乎每个表单元素的背景颜色是在输入标记上使用背景颜色属性。例如,此代码在所有元素上应用蓝色背景颜色(#9cf)。

输入 {
背景颜色:#9cf;
颜色:#000;
}

要更改某些表单元素的背景颜色,只需添加“textarea”并选择样式。例如:

输入,textarea,选择{
背景颜色:#9cf;
颜色:#000;
}

如果您制作背景颜色为黑暗,请务必更改文本颜色。对比颜色帮助使表单元素更清晰。例如,如果文本颜色为白色,则深红色背景颜色的文本更容易读取。例如,这段代码在红色背景放置白色文本。

输入,textarea,选择{
背景颜色:#c00;
颜色:#fff;
}

您甚至可以在表单标签本身上放置背景颜色。请记住,表单标签是一个块元素,所以颜色填充整个矩形,而不仅仅是元素的位置。您可以将黄色背景添加到块元素以使区域脱颖而出,如下所示:

形式 {
背景颜色:#ffc;
}

添加边框

与颜色一样,您可以更改各种表单元素的边界。您可以在整个表单周围添加一个边框。请务必添加填充,或者您的表单元素将在边框旁边卡住。这是一个1像素黑色边框的代码示例,具有5个像素的填充:

形式 {
边框:1px实体#000;
填充:5px;
}

您可以围绕的边框超过表格本身。更改输入项的边框,使其脱颖而出:

输入 {
边框:2PX虚线#C00;
}

当您在输入框上放置边框时要小心,因为它们看起来不那么像输入框,那么有些人可能无法意识到它们可以填写表格。

结合风格的功能

通过用思想和一些CSS将您的表单元素放在一起,您可以设置一个很好的寻找形式,这些表格补充了您网站的完整设计和布局。

此页面是否有帮助?