CSS的表单内容有哪些

2023-06-28 23:06:00 763人浏览薄情痞子

摘要

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

这篇“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;}                #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;}                ul li:nth-child(even)        {color:turquoise;}        ul li:nth-child(odd)        {color:violet;}                        table        {background-color:green;}                table tr:nth-child(2n)        {background-color: blue;}        table tr td        {}                table tr:nth-child(3n)        {background-color:yellow;}                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:"宋体";        }                .c2        {font:italic bold 32px "宋体"; }                .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:2em;                }        .p1                  {word-wrap: break-word;}          .p2                {white-space:nowrap;}        .p3                {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;}        .p4                {font-size:16px;width: 200px;height:50px; line-height: 50px;   background-color:goldenrod;text-align:center;}        .p5                {text-decoration:none;}        .p6 img                {vertical-align:-600%;}                .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;                        border:solid 10px green;            border-top:dotted 3px red;            border-right:dashed 5px blue;        }        #d2        {            width: 200px;            height:200px;            border:solid 5px red;                        border-top-left-radius: 100px;            border-bottom-right-radius: 100px;        }        #d3        {            width: 200px;            height:200px;            border:solid 5px red;                                                                                    padding:10px 20px 30px;                                            }           #d4        {            width: 200px;            height:200px;            border:solid 5px red;                                                margin:10px 20px;                        margin:10px 20px 30px;                                            }          #d5        {            width: 200px;            height:200px;            border:solid 5px red;                        margin:0px auto;        }                #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>