一.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS基础</title>
</head>
<body>
<!--
作者:yize365
时间:2019-11-27
描述:表单以及相关标签
-->
<form action="" method="post">
昵称:<input type="haha" id="hehe" placeholder="请输入昵称" /><br />
密码:<input type="password" /><br />
性别:<input type="radio" name="xb" id="nan" checked="checked" /><label for="nan">男</label>
<input type="radio" name="xb" id="nv" /><label for="nan">女</label>
<input type="radio" name="xb" id="bm" /><label for="bm">保密</label><br />
地址:<select name="">
<option >郑州市</option>
<option >天津市</option>
<option selected="selected">深圳市</option>
<option >444</option>
<option >555</option>
<option >666</option>
</select>
<select name="">
<optgroup label="郑州市">
<option>二七区</option>
<option>金水区</option>
<option>中原区</option>
<option>管城区</option>
<option>经开区</option>
</optgroup>
<optgroup label="天津市">
<option>和平区</option>
<option>滨海新区</option>
<option>河北区</option>
<option>河东区</option>
<option>河西区</option>
</optgroup>
<optgroup label="深圳市">
<option>福田区</option>
<option selected="selected">宝山区</option>
<option>罗湖区</option>
<option>管城区</option>
<option>经开区</option>
</optgroup>
</select><br />
<!-- 文本域不能设置rows cols 需要设置 width hight
-->
介绍:<textarea name="dizhi" rows="15" cols="30" placeholder="请输入文字"></textarea><br />
你的爱好:<input type="checkbox" checked="checked" id="cs"/><label for="cs">测试</label>
<input type="checkbox" id="cf"/><label for="cf">吃饭</label>
<input type="checkbox" id="sj"/><label for="sj">睡觉</label><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<button>按钮</button>
</form>
</body>
</html>
二.CSS样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.p0{color: red;background-color: aquamarine; font-size: 35px; font-family: "微软雅黑";text-align: left;text-indent: 3em;}
#p1{color: #0000FF;}
#div1{color: red;}
#sp1{color: blue;}
#div3{
font-size: 100px;
}
.a-001{color: blue;}
.a-002{color: #cc3300;}
.a-003{color: orange;}
.a-004{color: green;}
.a-005{color: yellow;}
</style>
</head>
<body>
<p class="p0" id="p0">你好世界<br />你好中国</p>
<p class="p1" id="p1">你好世界<br />你好中国</p>
<p class="p2">你好世界<br />你好中国</p>
<p>你好世界<br />你好中国</p>
<div id="div1">
div大盒子
</div>
<span id="sp1">
小盒子
</span>
<br />
<div id="div3">
<span class="a-001">B</span>
<span class="a-002">a</span>
<span class="a-003">i</span>
<span class="a-004">D</span>
<span class="a-005">u</span>
</div>
</body>
</html>
三.CSS的引入方式
1.内嵌式:style标签放在head中
优点:加载速度快
缺点:html和css 不分离,不便于修改
2.外链式
通过link放在head标签中,把外部的css文件引入到html
优点:实现代码分离,便于修改管理
缺点:运行速度慢些
3.行内式
不建议使用,使得代码臃肿不便于修改
四.选择器权重
id>class>标签