CSS的表单内容有哪些
导读：本文共9762字符，通常情况下阅读需要33分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 1. 表单框类型<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,init... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。1. 表单框类型
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>单选框,复选框,下拉框</title></head><body><formaction=""method=""><!--单选框radio多选一name名字要一致checkedc:默认选中--><inputtype="radio"name="sex"value="m"id="sex1"/><labelfor="sex1">男性</label><inputtype="radio"name="sex"value="w"id="sex2"checked/><labelfor="sex2">女性</label><hr/><!--复选框checkbox多选多name名字要一致--><inputtype="checkbox"name="food"value="banana"checked/>香蕉<inputtype="checkbox"name="food"value="huanggua"/>黄瓜<inputtype="checkbox"name="food"value="qiezi"checked/>茄子<inputtype="checkbox"name="food"value="donggua"/>冬瓜<hr/><!--下拉框select多选一selected默认选中,disabled无法选中--><selectname="city"><optionvalue="beijing">北京人</option><optionvalue="xian"selected>西安人</option><optionvalue="dalian">大连人</option><optionvalue="fuzhou">福州人</option><optionvalue="zhengzhou"disabled>郑州人</option></select><hr/><inputtype="submit"value="点我"/></form></body></html>
文件上传：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文件上传</title></head><body><formaction=""method="post"enctype="multipart/form-data"><!--文件上传-->头像:<inputtype="file"name="myfile"/><hr/><!--大段文本框--><textareaname="info">请填写相关数据</textarea><hr/><!--隐藏的表单框=>隐藏要修改的数据id--><inputtype="hidden"name="sid"value="13"/><hr/><inputtype="submit"value="提交"/></form></body></html>
2. 表单属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>input属性</title></head><body><!--placeholder灰色输入提示required必填readonly只能读不能改可以被提交disabled只能读不能改不会被提交size设置输入框的大小maxlength输入框最多可以输入多少字符minlength输入框最少需要输入多少字符autofocus自动获取焦点,整个页面只能有一个tabindex设置tab的切换顺序--><formaction=''method="">用户名:<inputtype="text"name="username"placeholder="请输入用户名"requiredtabindex=5/><br/>密码:<inputtype="password"name="pwd"tabindex=4><br/>年龄:<inputtype="text"name="age"value="18"readonlytabindex=3/><br/>邮箱:<inputtype="text"name="email"value="123463922@qq.com"disabled/><br/>班级:<inputtype="text"name="classroom"size=100maxlength=5minlength=2tabindex=2/><br/>国籍:<inputtype="text"name="country"autofocustabindex=1/><br/><inputtype="submit"></form></body></html>
3. css引入
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>css学习css的三种引入方法</title><!--2.内嵌样式--><style>p{color:blue;}</style><!--外部引入--><linkhref="my.css"type="text/css"rel="stylesheet"/></head><body><p>今天学习css</p><!--1.行内样式--><p>今天学习css</p><p>我们很开心</p><ahref="">我是链接</a></body></html>my.css
a{font-size:100px;}4. 选择器
4.1 常用选择器
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><h2class="one">1号标签222</h2><h3id="two">2号标签333</h3><ahref=""class="one">我是连接</a><spanid="two">我是span</span><h4>我是h4标签</h4></body></html>aoe4.2 选择器的优先级
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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选择器<-类选择器<-标签选择器大原则:泛指的元素优先级低,特指的元素优先级高,越具体优先级就越高--><fontclass="one"id="two">选择器的优先级</font></body></html>4.3 关系选择器
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>关系选择器</title><style>/*多行注释*/ulli/*包含选择器/后代选择器*/{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 属性选择器
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><formaction=""method="">用户名:<inputtype="text"name="username"/><br/>密码:<inputtype="password"name="nickname"><br/>性别:<inputtype="radio"name="sex"value="m">男<inputtype="radio"name="sex"value="w">女<br/><inputtype="submit"value="点我"></form></body></html>4.5 伪类选择器_颜色设置
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>伪类选择器</title><style>/*鼠标悬停的时候触发*/a:hover{color:teal;}/*列表中第一个元素*/ulli:first-child{color:yellow;}/*列表中最后一个元素*/ulli:last-child{color:green;}/*列表中具体某一个元素*/ulli:nth-child(4){color:red;}/*偶数个2n/even奇数个2n-1/oddn不可换*/ulli:nth-child(even){color:turquoise;}ulli:nth-child(odd){color:violet;}/*小练习*//*1.写一个table表格,设置一个背景色*/table{background-color:green;}/*2.偶数行颜色为蓝色*/tabletr:nth-child(2n){background-color:blue;}tabletrtd{}/*3.第3,6,93倍行颜色为黄色*/tabletr:nth-child(3n){background-color:yellow;}/*4.鼠标滑过时,颜色变成红色*/tabletr:hover{background-color:red;}</style></head><body><ahref="#">老男孩教育</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,93被行颜色为黄色4.鼠标滑过时,颜色变成红色--><!--颜色设置:RGB:三原色R:red0~2550~ffG:green0~2550~ffB:blue0~2550~ff1.使用rgb方式表达颜色:rgb(100,100,100)三原色的设置rgba(100,100,100,0~1)三原色+透明度设置2.使用十六进制的方式表达颜色f->151111ff->25511111111纯红色:#ff0000=>#f00(简写)纯绿色:#00ff00=>#0f0(简写)纯蓝色:#0000ff=>#00f(简写)--><tableborder=1cellspacing=0cellpadding=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 伪对象选择器
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>伪对象选择器</title><style>.name{color:goldenrod;}/*在内容之前插入*/.name::before{content:"我问:";color:green;}/*在内容之后插入*/.name::after{content:"肯定对!";color:magenta;}/*鼠标选中后的样式*/.name::selection{background-color:mediumspringgreen;color:white;}</style></head><body><spanclass="name">王文很帅,对不对?</span></body></html>5. 字体属性设置
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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:italicbold32px"宋体";}/*简写字体2*/.c3{border:solid1pxred;font:64px/2"宋体";/*字体大小/行高比例字体种类*/background-color:yellow;}/*自定义字体*/.c4{font:64px/2"王文";}ul{/*去掉前面的点.*/list-style:none;/*改变鼠标的形态*/cursor:wait;}</style></head><body><ul><liclass="c1">设置字体相关的属性1</li><liclass="c2">设置字体相关的属性2</li><liclass="c3">设置字体相关的属性3</li><liclass="c4">设置字体相关的属性4</li></ul></body></html>cursor属性：
6. 文本属性
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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;}.p6img/*vertical-align:top/middle/bottom文本垂直对齐方式[一般都是在图片排版的时候使用]*/{vertical-align:-600%;}/*text-shadow相关设置none：无阴影<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<color>：设置对象的阴影的颜色。*/.p7{text-shadow:7px4px10pxgray;}</style></head><body><pclass="p0p1">setwordxiangguanpropertyhahahah</p><pclass="p0p2">设置文本属性111222233asd设置文本属性设置文本属性</p><pclass="p3">本属性</p><pclass="p4">本属性</p><ahref=""class="p5">本属性</a><del>特价取消</del><pclass="p6"><imgsrc="tupian1.png"/><ahref>点我跳转</a></p><pclass="p7">我是炫酷的阴影效果</p></body></html>7. 盒子模型
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>盒子模型</title><style>#d1{width:200px;height:200px;/*上右下左toprightbottomleft*/border:solid10pxgreen;border-top:dotted3pxred;border-right:dashed5pxblue;}#d2{width:200px;height:200px;border:solid5pxred;/*border-radius:100px;*/border-top-left-radius:100px;border-bottom-right-radius:100px;}#d3{width:200px;height:200px;border:solid5pxred;/*上右下左padding会增大盒子的面积内填充*//*padding:50px;*//*上下左右*//*padding:10px20px;*//*上左右下*/padding:10px20px30px;/*上右下左*//*padding:10px20px30px10px;*//*padding-left:30px;*/}#d4{width:200px;height:200px;border:solid5pxred;/*上右下左盒子与盒子之间的间距外边距*//*margin:60px;*//*上下左右*/margin:10px20px;/*上左右下*/margin:10px20px30px;/*上右下左*//*margin:10px20px30px10px;*//*margin-left:30px;*/}#d5{width:200px;height:200px;border:solid5pxred;/*上下0px左右自动居中*/margin:0pxauto;}/*box-shadow:<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值<color>：设置对象的阴影的颜色。*/#d6{width:100px;height:100px;border:solid5pxred;box-shadow:6px3px16px6pxblack;}</style></head><body><divid="d1"></div><divid="d2"></div><divid="d3">我是d3</div><divid="d4">我是d4</div><divid="d5">我是d5</div><divid="d6"></div></body></html>order-style:
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
CSS的表单内容有哪些的详细内容，希望对您有所帮助，信息来源于网络。