CSS的表单内容有哪些
短信预约 -IT技能 免费直播动态提醒
这篇“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>aoe4.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 伪对象选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="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> <span class="name">王文很帅,对不对?</span></body></html>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:"王文"; class="lazy" data-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属性：
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 class="lazy" data-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>order-style:
以上就是关于“CSS的表单内容有哪些”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
