当前位置: 代码迷 >> 综合 >> Web02:HTMLCSS
  详细解决方案

Web02:HTMLCSS

热度:82   发布时间:2023-12-27 19:05:35.0

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