首先学习了表单标签: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标签里的路径问题.