前端基础之css一
学了几天的web了今天才来整理，这个相比较前面的python来说就比较好理解了，
那接下来我就以代码的方式呈现出来以便我们以后的查阅和理解，我就编辑到代
码框里了昂
1.列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<! --unorder list--> #unorder list 是没有排序的，前面是小黑点
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<! --order list--> #order list 是前面有序号，
<ol>
<li>222</li>
<li>222</li>
<li>222</li>
</ol>
<! --defind list-->
<dl>
<! --define title-->
<dt>河北省</dt>
<! --define data-->
<dd>石家庄</dd>
<dd>天津</dd>
<dd>北京</dd>
<dd>熊安</dd>
</dl>
</body>
</html>
2.form注册表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>注册页面</h3> <from action="" method="post"> <p>姓名:<input type="text" name="username" value="yuan"></p> <p>密码:<input type="password" name="password" value="123"></p> <p>性别:<input type="radio" name="gender" value="male"checked="checked">男<input type="radio" name="gender" value="male"checked="checked">女</p> <p>爱好:<input type="checkbox" name="hobby" value="basketball" checked="checked">篮球<input type="checkbox" name="hobby" value="football" checked="checked">足球</p> <p>头像:<input type="file" name="fileOBJ"> <p><input type="hidden" name="djfk" value="sfgd"></p> <p>个人简介<br> <textarea name="perdonalinfi" id="" cils="50" rows="20"></textarea> </p> <select name="province" size="5" multiple="multiple"> #multiple规定输入字段可选择多个值 <option value="hebei">河北省</option> <option value="hunan">湖南省</option> <option value="tianjin"selected>天津省</option> <option value="gansu"selected>甘肃省</option> <option value="henan">河南省</option> </select> </p> <hr> <p><input type="reset" ></p> <p><input type="button"value="按钮" ></p> <p><input type="submit" ></p> </hr> </from> {"username":"yuan","password":"123","gender":"male","hobby":["basketball","football"],"fileOBJ:fileOBJ","province:hebei"} </body> </html>
3.div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h3>yuan</h3> <em style="color: red;font-size:25px">yuan</em> <b>yuan</b> <div style="background-color: darkorange">yuan</div> <span>span</span><span>span</span> </body> </html>
4.css选择器，
这里我首先分析一下咱们再举例实现
在下面的这个分析中不要晕哈，这个E和F只是大的
方向，而c和p则是我例子中的东西
基本选择器： 标签选择器 div{ color:red; } 意思就是只要是div标签里面的就都变成红色 id选择器 #p2{ color:green; } 这个意思就是选择id为p2的那个，将其变成绿色 class 选择器 .c1{ color:red; } 就是说他是可以重复的，可以有多个，而id是不能重复的这个要区分开 那就是像下面这样 选择通配器 *{ color:green; } 这个就是说我们用*的话那就是所有的都匹配上 组合选择器 1.多元素选择器 c2,p{ color:red; } E,F 多元素选择器，同时匹配所有E元素和F元素，E和F之间用逗号分隔 2.后代选择器 E F 就比如说E和F，那后代选择器就是匹配所有属于E元素后代的F元素，他们之间用空格分隔 那不知道有没有人和我一样，只知道用空格分隔，但不知道前面的这个点是用来干嘛的，我就告诉你吧 这个点就是说前面有class，就是看哪个class等于c2，那如果是#c2的话我们就应该去找id，看谁的id等于c2 ，不知道这样说大家能够明白吗 .c2 p{ color:red; } 3.子代选择器 E>F 匹配所有E元素的子元素F .c2>p{ color:green; } 在这里要分清子代和后代，我在的过程中就给弄懵了 4.毗邻选择器 E+F 匹配所有紧随E元素之后的统计元素 在这里我又遇到一个问题，毗邻也就是紧紧的跟着，所以刚下 我企图让中间隔着某些语句的匹配，就只匹配一个 .c2+p{ color:pink } 5.兄弟选择器 E~F普通兄弟，以破折号分隔 .c2~p{ color:red } 这个只要是平级就都会显示
接下来我们就在例子中真切的感受一下他，注释起来的到最后要用的话就用Ctrl+/来打开注释就好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 一 基本选择器*/ /*1 标签选择器*/ /*div{*/ /*color: red;*/ /*}*/ /*2 id选择器*/ /*#p2{*/ /*color:red;*/ /*}*/ /*3.class选择器*/ /*.c1{*/ /*color: red;*/ /*}*/ /*4.通配选择器*/ /** {*/ /*color: green;*/ /*padding: 0;*/ /*}*/ /*组合选择器 */ /*1.后代选择器*/ /*.c2 p{*/ /*color: red;*/ /*}*/ /*2.子代选择器*/ /*.c2>p{*/ /*color: red;*/ /*}*/ /*3.毗邻选择器*/ .c2+p{ color: red; } /*!*4.兄弟选择器*!*/ /*.c2~p{*/ /*color: red;*/ /*}*/ /*5.多元素选择器*/ .c2.c3,.c2~.c3{ color: red; background-color: darkorange; font-size:15px; } /*!*6.多元素选择器*! 意思就是匹配所有c2元素和p元素，那凡是带p的都一律匹配了*/ /*c2,p{*/ /*color: lightpink;*/ /*}*/ </style> </head> <body> <p class="c1">p1</p> <p id="p2">p2</p> <p class="c1">p3</p> <div class="c2"> <div> <p>P3</p> </div> <p class="c3">P1</p> </div> <!--<span>span</span>--> <p class="c3">P2</p> <p class="c4">P3</p> <p class="c5">P3</p> <p class="c6">P5</p> <div>DIV</div> </body> </html>
5.css的四种引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<导入式>--> <style type="text/css"> @import "index.css"; </style>> <!--<嵌入式>--> <!--<style>--> <!--p{--> <!--background-color: red;--> <!--}--> <!--</style>--> <!--链接式>--> <!--<link rel="stylesheet"href="index.css">--> </head> <body> <!--<p>lanbo</p>--> <!--<p>xiaohua</p>--> <!--<p>baobao</p>--> <!--<行内式>--> <!--<p style="background-color: aqua">haha</p>--> <p>最亲爱的王老师</p> </body> </html>
这篇博客前面关于标签的这一部分阐述的还不是很清楚，待后面弄懂时再来仔细阐述一番，得来本篇就先说到这里
