温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

CSS的表单内容有哪些

发布时间:2022-01-24 09:24:12 来源:亿速云 阅读:158 作者:iii 栏目:开发技术

这篇“CSS的表单内容有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“CSS的表单内容有哪些”文章吧。

    1. 表单框类型

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>单选框 , 复选框 , 下拉框</title>
    </head>
    <body>
        <form action="" method="">
            <!-- 单选框 radio 多选一 name名字要一致  checkedc:默认选中 -->
            <input type="radio" name="sex" value="m" id="sex1"  /> <label for="sex1" >男性</label>
            <input type="radio" name="sex" value="w" id="sex2" checked /> <label for="sex2" >女性</label>
            <hr />
            <!-- 复选框 checkbox 多选多 name名字要一致 -->
            <input type="checkbox" name="food" value="banana" checked />香蕉
            <input type="checkbox" name="food" value="huanggua" />黄瓜
            <input type="checkbox" name="food" value="qiezi" checked />茄子
            <input type="checkbox" name="food" value="donggua" />冬瓜
            <hr />
            <!-- 下拉框 select 多选一 selected 默认选中, disabled 无法选中-->
            <select name="city" >
                <option value="beijing"  >北京人</option>
                <option value="xian" selected>西安人</option>
                <option value="dalian"  >大连人</option>
                <option value="fuzhou">福州人</option>
                <option value="zhengzhou" disabled >郑州人</option>
            </select>
            <hr / >
            <input type="submit" value="点我" />
        </form>
    </body>
    </html>

    文件上传:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> 文件上传 </title>
    </head>
    <body>
        <form action="" method="post" enctype="multipart/form-data">
            <!-- 文件上传 -->
            头像:<input type="file" name="myfile" />
            <hr/>
            <!-- 大段文本框 -->
            <textarea name="info"  >请填写相关数据</textarea>
            <hr/>
            <!-- 隐藏的表单框 => 隐藏要修改的数据id -->
            <input type="hidden" name="sid" value="13" />
            <hr/>
            <input type="submit" value="提交"/>
        </form>
    </body>
    </html>

    2. 表单属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>input属性</title>
    </head>
    <body>
        <!-- 
        placeholder  灰色输入提示
        required     必填
        readonly     只能读不能改   可以被提交
        disabled     只能读不能改   不会被提交
        size         设置输入框的大小
        maxlength    输入框最多可以输入多少字符
        minlength    输入框最少需要输入多少字符
        autofocus    自动获取焦点, 整个页面只能有一个
        tabindex     设置tab的切换顺序 
        -->
        <form action='' method="" >
            用户名:<input type="text" name="username" placeholder="请输入用户名" required tabindex=5 />
            <br />
            密码: <input type="password" name="pwd" tabindex=4 >
            <br />
            年龄: <input type="text" name="age" value="18" readonly tabindex=3 />
            <br />
            邮箱: <input type="text" name="email" value="123463922@qq.com" disabled   />
            <br />
            班级: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2  tabindex=2/>
            <br />
            国籍: <input type="text" name="country" autofocus tabindex=1 />
            <br />
            <input type="submit">
        </form>
    </body>
    </html>

    3. css引入

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css学习 css的三种引入方法</title>
        <!-- 2.内嵌样式 -->
        <style>
            p
            {color:blue;}
        </style>
        <!-- 外部引入 -->
        <link href="my.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <p>今天学习css</p>
        <!-- 1.行内样式 -->
        <p >今天学习css</p>
        <p>我们很开心</p>
        <a href="">我是链接</a>
    </body>
    </html>

    my.css

    a
    {font-size:100px;}

    4. 选择器

    4.1 常用选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>常用选择器</title>
        <style>
            /* 标签选择器*/
            h2
            {color:cyan}
            /* 类选择器 */
            .one
            {color:green;}
            /* ID选择器 */
            #two
            {color:red;}
            /* 组合选择器 */
            h2,h3,h4,h5
            {color:goldenrod;}
            /* 越具体指定,优先级就越高 */
            h2.one
            {color:gray;}        
            h3#two
            {color:greenyellow;}
        </style>
    </head>
    <body>
        <!-- 
        标签选择器 :  指定的是哪一些标签
        类选择器   :  指定的是哪一类标签
        ID选择器   :  指定的是哪一个标签 
        -->
        <h2>1号标签111</h2>
        <h2 class="one" >1号标签222</h2>
        <h3 id = "two">2号标签333</h3>
        <a href="" class="one">我是连接</a>
        <span id ="two">我是span</span>
        <h4>我是h4标签</h4>
    </body>
    </html>
    aoe

    4.2 选择器的优先级

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>选择器的优先级</title>
        <style>
            font
            {color:greenyellow;}
            .one
            {color:blue;}
            #two
            {color: indigo;}
            font
            {color:greenyellow!important;}
        </style>
    </head>
    <body>
        <!-- 
            !important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器 
            大原则: 泛指的元素优先级低, 特指的元素优先级高 , 越具体优先级就越高 
        -->
        <font  class="one" id="two"> 选择器的优先级 </font>
    </body>
    </html>

    4.3 关系选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> 关系选择器 </title>
        <style>
            /*  多行注释  */
            ul li   /* 包含选择器/后代选择器 */
            {color:darkslateblue;}
            ul>li   /* 父子选择器 */
            {color:yellow;}
            ol+li   /* 相邻选择器 特指下面一个*/
            {color:green;}
            ol~li   /* 兄弟选择器 特指下面一堆*/
            {color:deeppink;}
        </style>
    </head>
    <body>
        <ul>
            <li>动漫频道</li>
            <li>学习频道</li>
            <li>直播频道</li>
            <li>游戏频道</li>
            <ol>
                <li>少儿频道</li>
                <li>智慧树,大风车</li>
                <li>老年人频道</li>
            </ol>
            <li>授课直播</li>
            <li>亚洲捆绑</li>
        </ul>
    </body>
    </html>

    4.4 属性选择器

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>属性选择器</title>
        <style>
            input[name]
            {background-color: dodgerblue;}
            input[name=username]
            {background-color: red;}
            input[type=password]
            {background-color:yellow;}
            input[type=text]
            {background-color:green;}
        </style>
    </head>
    <body>
        <form action="" method="" >
            用户名: <input type="text" name="username" />
            <br />
            密码: <input type="password" name="nickname">
            <br />
            性别:<input type="radio" name="sex" value="m"> 男
            <input type="radio" name="sex" value="w"> 女
            <br />
            <input type="submit" value="点我">
        </form>
    </body>
    </html>

    4.5 伪类选择器_颜色设置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>伪类选择器</title>
        <style>
            /* 鼠标悬停的时候触发 */
            a:hover
            {color:teal;}
            /* 列表中第一个元素 */
            ul li:first-child
            {color:yellow;}
            /* 列表中最后一个元素 */
            ul li:last-child
            {color:green;}
            /* 列表中具体某一个元素 */
            ul li:nth-child(4)
            {color: red;}
            /*  偶数个2n / even   奇数个2n-1 / odd n不可换 */
            ul li:nth-child(even)
            {color:turquoise;}
            ul li:nth-child(odd)
            {color:violet;}
    
            /* 小练习 */
            /* 1.写一个table表格,设置一个背景色 */
            table
            {background-color:green;}
            /* 2.偶数行颜色为蓝色 */
            table tr:nth-child(2n)
            {background-color: blue;}
            table tr td
            {}
            /* 3.第3 , 6 , 9   3倍行颜色为黄色 */
            table tr:nth-child(3n)
            {background-color:yellow;}
            /* 4.鼠标滑过时,颜色变成红色 */
            table tr:hover
            {background-color: red;}
        </style>
    </head>
    <body>
        <a href="#"> 老男孩教育 </a>
        <ul>
            <li>马春妮</li>
            <li>孙坚</li>
            <li>晓东</li>
            <li>文东</li>
            <li>王伟</li>
            <li>好心</li>
            <li>蜂拥</li>
            <li>倩倩</li>
            <li>石超</li>
            <li>帅帅</li>
        </ul>
        <!--
        小练习:
            1.写一个table表格,设置一个背景色
            2.偶数行颜色为蓝色
            3.第3 , 6 , 9   3被行颜色为黄色
            4.鼠标滑过时,颜色变成红色
        -->
        <!--
        颜色设置:
            RGB:  三原色
                R:red     0~255 0~ff
                G:green   0~255 0~ff
                B:blue    0~255 0~ff
                1.使用rgb方式表达颜色:
                    rgb(100,100,100)      三原色的设置
                    rgba(100,100,100,0~1) 三原色+透明度设置
                2.使用十六进制的方式表达颜色
                    f -> 15 1111  ff -> 255  1111 1111
                    纯红色: # ff 00 00   => #f00 (简写)
                    纯绿色: # 00 ff 00   => #0f0 (简写)
                    纯蓝色: # 00 00 ff   => #00f (简写)
        -->
        <table border=1  cellspacing=0 cellpadding=0 >
            <tr>
                <td >111</td><td >222</td><td  >333</td><td>444</td>
            </tr>
            <tr>
                <td  >111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td >111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td>111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td>111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td>111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td>111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td>111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td>111</td><td>222</td><td>333</td><td>444</td>
            </tr>
            <tr>
                <td>111</td><td>222</td><td>333</td><td>444</td>
            </tr>
        </table>
    </body>
    </html>

    4.6 伪对象选择器

    &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    &lt;title&gt;伪对象选择器&lt;/title&gt;    &lt;style&gt;        .name        {color:goldenrod;}        /* 在内容之前插入 */        .name::before        {            content:"我问:";            color:green;        }        /* 在内容之后插入 */        .name::after        {            content:"肯定对!";            color:magenta;        }        /* 鼠标选中后的样式 */        .name::selection        {            background-color: mediumspringgreen;            color: white;        }    &lt;/style&gt;&lt;/head&gt;&lt;body&gt;        &lt;span class="name"&gt;王文很帅,对不对?&lt;/span&gt;&lt;/body&gt;&lt;/html&gt;

    5. 字体属性设置

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css的相关属性: 字体属性 </title>
        <style>
            /*@符制定规则,来设置引入的自定义字体 */
            @font-face
            {
                font-family:"王文";
                src:url("font/方正舒体.TTF");
            }
            /* 设置字体属性 */
            .c1
            {
                font-style:italic; /*字体斜体*/
                font-weight:bold;  /*字体粗细*/
                font-size:32px;    /*字体大小*/
                font-family:"宋体";/*字体种类*/
            }
            /* 简写字体1 */
            .c2
            {font:italic bold 32px "宋体"; }
            /* 简写字体2 */
            .c3
            {
                border:solid 1px red;
                font:64px/2 "宋体";   /*  字体大小/行高比例 字体种类  */
                background-color: yellow;
            }
            /* 自定义字体 */
            .c4
            {font:64px/2 "王文";}
            ul
            {
                /* 去掉前面的点. */
                list-style:none;
                /* 改变鼠标的形态 */
                cursor:wait;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="c1">设置字体相关的属性1</li>
            <li class="c2">设置字体相关的属性2</li>
            <li class="c3">设置字体相关的属性3</li>
            <li class="c4">设置字体相关的属性4</li>
        </ul>
    </body>
    </html>

    cursor属性:

    CSS的表单内容有哪些

    6. 文本属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css的相关属性: 文本属性 </title>
        <style>
            .p0
            {
                font-size:16px;
                width:200px;height:200px;background-color: red;
                /* 字符间距 */
                letter-spacing:5px; 
                /* 文本的首行缩进 */
                /* text-indent:32px; */ /* px代表像素*/
                text-indent:2em;        /* 1em = 1个元素的大小 按照字体比例缩进 */
            }
            .p1  
            /* 强制换行 纯英文不会默认换行*/
            {word-wrap: break-word;}  
            .p2
            /* 强制不换行 中文默认换行   */
            {white-space:nowrap;}
            .p3
            /* 设置height与line-height数值相同,可以让文字在垂直方向上居中 */
            {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;}
            .p4
            /* text-align:left/center/right       文本水平对齐方式 */
            {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;text-align:center;}
            .p5
            /* text-decoration:overline/line-through/underline/none; */
            {text-decoration:none;}
            .p6 img
            /* vertical-align:top/middle/bottom   文本垂直对齐方式[一般都是在图片排版的时候使用] */
            {vertical-align:-600%;}
    
            /* 
            text-shadow相关设置
            none: 无阴影 
            <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
            <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
            <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
            <color>: 设置对象的阴影的颜色。  */
            .p7        
            {text-shadow:7px 4px 10px gray;}
    
        </style>
    </head>
    <body>
        <p class="p0 p1">setwordxiangguanpropertyhahahah </p>
        <p class="p0 p2">设置文本属性111222233asd设置文本属性设置文本属性</p>
        <p class="p3">本属性</p>
        <p class="p4">本属性</p>
        <a href="" class="p5">本属性</a>
        <del>特价取消</del>
        <p class="p6">   <img src="tupian1.png" />   <a href>点我跳转</a>   </p>
        <p class="p7"> 我是炫酷的阴影效果</p>
    </body>
    </html>

    7. 盒子模型

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> 盒子模型 </title>
        <style>
            #d1
            {
                width: 200px;
                height:200px;
                /* 上 右 下 左  top right bottom left*/
                border:solid 10px green;
                border-top:dotted 3px red;
                border-right:dashed 5px blue;
            }
            #d2
            {
                width: 200px;
                height:200px;
                border:solid 5px red;
                /* border-radius: 100px; */
                border-top-left-radius: 100px;
                border-bottom-right-radius: 100px;
            }
            #d3
            {
                width: 200px;
                height:200px;
                border:solid 5px red;
                /*上 右 下 左 padding会增大盒子的面积 内填充*/
                /* padding:50px; */            
                /* 上下 左右*/
                /* padding:10px 20px; */
                /* 上 左右 下 */
                padding:10px 20px 30px;
                /* 上 右 下 左 */
                /* padding:10px 20px 30px 10px;  */
                /* padding-left:30px; */
            }   
            #d4
            {
                width: 200px;
                height:200px;
                border:solid 5px red;
                /*上 右 下 左 盒子与盒子之间的间距 外边距*/
                /* margin:60px; */
                /* 上下 左右 */
                margin:10px 20px;
                /* 上 左右 下 */
                margin:10px 20px 30px;
                /* 上 右 下 左 */
                /* margin:10px 20px 30px 10px;  */
                /* margin-left:30px; */
            }  
            #d5
            {
                width: 200px;
                height:200px;
                border:solid 5px red;
                /*  上下0px 左右自动居中*/
                margin:0px auto;
            }
            /* 
            box-shadow:
            <length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值 
            <length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 
            <length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 
            <length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值 
            <color>: 设置对象的阴影的颜色。  */
            #d6
            {width:100px;height:100px;border:solid 5px red;box-shadow:6px 3px 16px 6px black;}
        </style>
    </head>
    <body>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3">我是d3</div>
        <div id="d4">我是d4</div>
        <div id="d5">我是d5</div>
        <div id="d6"></div>
    
    </body>
    </html>

    order-style:

    CSS的表单内容有哪些

    以上就是关于“CSS的表单内容有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    css
    AI