首先学习了表单标签:form
<form action="#" method="get"><!--当要提交表单,想要提交的项目我们就应该添加一个name属性-->用户: <input type="text" name="username" required="required" /><br />密码: <input type="password" name="password" readonly="" /><br />确认密码:<input type="password" /><br />性别:<input type="radio" name="sex" />男<input type="radio" name="sex" />女<br />爱好:<input type="checkbox" />吃饭<input type="checkbox" />睡觉<br />年龄:<select name="age"><option>--选择年龄--</option><option>20</option><option>21</option><option>22</option></select><br />隐藏字段:<input type="hidden" name="id" value="" /><br />文件:<input type="file" /><br />提交:<input type="submit" /><br />重置:<input type="reset" /><br /></form>
通过form标签,我们可以将页面数据提交到服务器。当然这都是后话。
关键还是对于CSS的学习。
------------------------------------------分割------------------------------------------
css主要是在<style></style>这个标签里书写的.
1.ID选择器 使用#+id
这里要说一下什么是ID了,其实就是每一个标签里的一个重要属性,而ID选择器就是我们为所有ID值等于某个值的标签设置css
第一个选择器,我怕只是贴出style标签那一段,会看不懂,所以全贴出来了
<html><head><meta charset="utf-8"><title>id选择器</title><style>#div1{font-size: 40px;color: green;}</style></head><body><div id="div1">说起苏轼的感情生活,相信大部分人首先想到的就是王弗和那首千古流传的悼亡词《江城子·乙卯正月二十日夜记梦》。</div><div>说起苏轼的感情生活,相信大部分人首先想到的就是王弗和那首千古流传的悼亡词《江城子·乙卯正月二十日夜记梦》。</div></body>
</html>
上边的代码就是为所有id=div1的标签设置格式.
2.类选择器 使用.+类名
<style> .myDiv{font-size:30px;color:red;}</style>
只要标签的class这个属性是myDiv的都设置为上边的风格.
3.元素选择器 标签名
<style>div{font-size: 20px;color: yellow;}</style>
这里只要是div标签的都会使用这个风格.
4.层级选择器 标签名+空格+标签名
<style>div p{font-size: 40px;color: #FFFF00;}</style>
这里只要是div标签下的p标签都会使用这个风格.
5.属性选择器 标签名[属性='???']
<style>/* 注意标签与[]之间不可以留下空格 */input[type='text']{background-color: #008000;}input[type='password']{background-color: #FF0000;}</style>
这里只要是input标签下的属性为type为text的都会使用这个风格.
------------------------------------------分割------------------------------------------
然后,学习CSS引入方式,一共分为三种
行内引入,内部引入,外部引入
1.行内引入
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{color: #FF0000;}</style></head><body><div>大家好我是红色的</div><div style="color: #008000;">大家好因为我使用了行内引入 因为就近原则 所以我是绿色的</div></body>
</html>
可以看出在下方的第二个div里有个属性style也是设置风格的,因为就近原则,所以最后的风格是属性里的style的设置
2.行内引入
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{font-size: 200px;}</style></head><body><div>说起苏轼的感情生活,相信大部分人首先想到的就是王弗和那首千古流传的悼亡词《江城子·乙卯正月二十日夜记梦》。</div></body>
</html>
可以看出,我们一直使用的就是上面的内部引入.
3.外部引入
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="style.css" type="text/css"/></head><body><div> 我使用了外部引入 </div></body>
</html>
什么叫外部引入呢?学习过Java就可以知道,我们通过import关键字来导入包,使用类。这里也是这样我们从外部导入了一个css文件:style.css,这里要注意路径,就是在我的上一篇博文中的img标签里的路径问题.