使用CSS定义表单字体样式 网页设计与制作教程

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS » 使用CSS定义表单字体样式 网页设计与制作教程

表单字体样式

同表格一样,表单也是网页中常见的对象,它主要负责界面交互,实现客户端与服务器端的信息传递,表单的设计目的是让表单更美观,更好用,提升用户的交互体验!

CSS没有定义专用的表单属性,但是CSS字体和文本属性都可以被应用到所有表单对象上,比如font-weight、font-size、font-family、color、text-decoration等属性都可以应用到表单上。

在为表单定义样式时,需要注意以下几点:

  • 输入型表单对象大部分都是使用<input>标签定义,如果仅为部分表单对象应用CSS样式,建议使用类样式,或者使用属性选择器进行精确控制。
  • 为列表框定义样式时,可以使用select或者option作为选择器,二者效果相同。但是如果显示位下拉菜单,则select和option选择符作用的对象是不同的,option选择符只定义下拉菜单中的样式,而select只定义下拉框及其显示选项的样式。
<style type="text/css">
    #form1{
        font-family: sans-serif;
        font-weight: bold;
        font-size: 23px;
    }
    #bbb{    /*密码输入框样式*/
        color: #0000ff;
    }
    #ccc{  /*登录按钮样式*/
        font-size: 20px;
        color: green;
    }
    #form1 select{  /*下拉选择框样式*/
        font-family: serif;
        color: #ff0000;
        font-size: 14px;
    } 
    #form1 textarea{  /*文本输入框样式*/
        font-family: "宋体";
        font-size: 30px;
        font-weight: bold;
        text-decoration: underline;
    }

</style>
<form id="form1" method="post" action="#">
    <input maxlength="40" size="50" value="文本输入框" type="text" name="bold">
    <br>
    <select size="1" name="select">
        <option value="1">www.e1yu.com</option>
        <option value="2">www.e1yu.com</option>
    </select>
    <br>
    <textarea name="textarea" rows="5" cols="30" align="right">下划线样式</textarea>
    <input id="bbb" type="password" name="blue" placeholder="密码">
    <input id="ccc" type="submit" name="blue" value="登录">
</form>

表单边框和边距样式

CSS使用border属性可以定义表单对象的边框样式;使用padding属性可以调整表单对象的边距大小。

表单的背景颜色

CSS使用background-color属性定义背景颜色,background-image属性定义背景图像。

form{
    font-size: 2em;  /*字体大小*/
    color: #fff; /*字体颜色*/
    text-align: center; /*字体居中对齐*/
    border: #fff 0px solid;  /*定义边框样式*/
    margin:5px 3px; /*定义外边距*/
    padding: 2px 10px;  /*定义内边距*/
    background: url("1.jpg") no-repeat ; /*定义背景图片 不平铺*/
    background-size: cover; /*背景图像尺寸*/
    }

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《使用CSS定义表单字体样式 网页设计与制作教程》 发布于2020-04-09

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

3 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册