文章目录
一.CSS1.概述2.入门案例二.CSS选择器1.概述1）标签名选择器：根据属性条件选中网页中的所有元素2）class选择器：根据class属性的选中元素（添加class属性，通过.选中元素）3）id选择器4）分组选择器5）属性选择器三.盒子模型1.margin（外边距）2.边框3.内边距4.元素类型的补充四.练习1.修改学生管理系统样式2.用户注册案例一.CSS
1.概述
专门用来修饰网页的技术，全称：层叠样式表stylesheet
语法：元素的选择器{属性名：属性值； 属性名：属性值； 属性名：属性值}
用法：
1.行内CSS（在标签上使用CSS代码）
2.内部CSS（使用style标签，在head里写css代码）
3.外部CSS（把HTML代码和CSS代码分离）
2.入门案例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试css</title><!-- 写法2：内部css --><style type="text/css">/* 元素的选择器{属性名:属性值;} *//*** 修饰div的字号*/div{font-size: 40px;/* 修饰div的字号 */background-color: azure; /*修饰div的背景色 */}</style></head><body><!--需求：提供两个div，修饰第一个div的背景颜色--><!-- 写法1：行内css --><div id="01" style="background-color: aqua;">我是div1</div><div id="02" style="background-color: aqua;">我是div2</div></body></html>
二.CSS选择器
1.概述
所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。
辅助你选中网页中的元素
常见的：
1）标签名选择器：根据属性条件选中网页中的所有元素
标签名选择器<style> /* 在HTML中加入css*/span{/* 标签名选择器,选中所有span */background-color: chartreuse; /* 背景颜色*/ font-size: 24px; /*字号*/font-family: 黑体;/* 字体 */}</style>
2）class选择器：根据class属性的选中元素（添加class属性，通过.选中元素）
class选择器给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。<p class="a b">123</p> <!-- b覆盖a--><style> /* 在HTML中加入css*//* 选择class=a的元素 */.a{background-color: cornflowerblue; /*背景颜色*/color:red; /*字体颜色*/}.b{background-color: lightsalmon;color: black;}</style>
3）id选择器
id属性的值在整个HTML中作为唯一标识的存在。
#id选择器id属性的值在整个HTML中作为唯一标识的存在。可以通过ID值选中指定的元素（#id值）<p id="p1">123</p>/* 使用id选中元素 */#p1{text-indent: 200px; /* 首行缩进*/
4）分组选择器
分组选择器,将多个选择器选中的元素组合在一起，统一设置样式
分组选择器/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */.a,.b,#p1{background-color: #000000;}
5）属性选择器
根据属性条件选中符合条件的元素来设置样式（逗号隔开）
<style type="text/css">/* 选中指定的元素 */input[type='text']{background-color: #6495ED;}</style>
三.盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
1.margin（外边距）
<input type="radio" name="sex" value="1" style="margin: 20px;"/>男
2.边框
#div2{border:10px solid yellow;/*实线*/border:10px dashed yellow;/*点状*/border:10px dotted yellow;/*虚线*/}
3.内边距
<td style="padding: 20px;">用户名:</td>
4.元素类型的补充
块级元素
默认情况下，块级元素独占一行（div , p，h1~h6）
可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容外边距、边框、内边距都可以设置
行内元素
默认情况下，多个行内元素处在同一行，比如a标签
不能设置宽和高
左右外边距、边框、内边距都可以设置，上下外边距设置无效
行内块元素
既具备行内元素的特征，还具备块级元素的特征
四.练习
1.修改学生管理系统样式
<!DOCTYPE html><html><head><meta charset="utf-8"><title>练习表单标签</title><style>/*修饰输入框*/.a1{width: 300px;/*宽度*/height: 30px;/*高度*/padding-left:20px;/* 内边距左 */padding-top:5px ;/* 内边距上 */padding-bottom: 5px;/*内边距下*/border-radius: 3px;/*弧度*/font-size: 20px;/*字号加大*/}/*修饰报存按钮*/input[type="submit"]{width: 60px;/*宽度*/height: 30px;/*高度*/background-color: #00aaff;/*背景颜色*/color: white;/*字的颜色*/border-color: #4169E1;/*边框颜色*/font-size: 15px;/* 加大字号 */}/*修饰取消按钮*/input[type="button"]{width: 60px;/*宽度*/height: 30px;/*高度*/background-color: pink;/*背景颜色*/color: white;/*字的颜色*/border-color: #f7a5f7;/*边框颜色*/font-size: 15px;}</style></head><body><!--其他标签--><div>大家好</div><div>大家好</div><div>大家好</div><p>NICE</p><p>NICE</p><p>NICE</p><span>hello</span><span>hello</span><span>hello</span><!--form可以提交数据，而且数据默认采用get方式，就在此地址栏中展示的http://127.0.0.1:8848/cgb2106/HTML/test04.html?user=tarena&age=45&sex=0&hobby=1&edu=2&datetime=-07-29#不好：长度受限，不安全可以改成post提交数据，而且可以指定，交给哪段程序处理数据action面试题：get和post提交数据的区别get方式：是默认的提交方式，但是不安全（都展示在地址栏），长度受限post方式：安全，数据不在地址栏展示，看不见，提高安全性--><form method="post" action="#"><table><tr><td><h1>学生信息管理系统MIS</h1></td></tr><tr><td>姓名：</td></tr><tr><td><input type="text" class="a1" name="user" placeholder="请输入姓名……" /></td></tr><tr><td>年龄：</td></tr><tr><td><input type="text"class="a1" name="age" placeholder="请输入年龄……" /></td></tr><tr><td>性别：(单选框)<input type="radio" name="sex"value="1" />男<input type="radio" name="sex"value="0" />女</td></tr><tr><td>爱好：（多选）<input type="checkbox" name="hobby" value="1" />乒乓球<input type="checkbox" name="hobby" value="2" />爬山<input type="checkbox" name="hobby" value="3" />唱歌</td></tr><tr><td>学历：(下拉框)<select name="edu"><option value="1">本科</option><option value="2">专科</option><option value="3">硕士</option></select></td></tr><tr><td>入学日期：<br><input type="date" name="datetime" /></td></tr><tr><td><input type="submit" value="保存"/><input type="button" value="取消" /></td></tr></table></form><!--使用h5的播放音频 controls是使用控件，source是文件位置--><form ><audio controls="controls"><source src="res/a.mp3"></source></audio><br><!-- 使用h5的播放视频controls是使用控件，source是文件位置 --><video controls="controls"loop="loop"><source src="res/c.mkv"></source></video></form></body></html>
2.用户注册案例
1）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>用户注册</title><style type="text/css">#a{margin-top: 100px;margin-left: 700px;background-image: url(./imgs/c.jpg);background-size:100%100%;opacity: 0.8;width: 460px;height: 600px;}#b1{padding-top: 40px;padding-left:110px ;font-size: 40px;color: white;font-family: serif;}#b2{margin-top: 50px;margin-left: 40px;}.c1{width:300px ;height: 35px;}.c2{padding-left: 10px;padding-top: 6px;padding-bottom: 6px;font-size:2px;color: #fdfdfd;}#b3{margin-top: 30px;margin-left: 80px;}#d1{color: #F0FFFF;padding-top: 20px;}input[type="submit"]{width:250px ;height: 40px;background-color: #ee0f2d;border-color: #ee0f2d;font-size: 20px;color: #F0FFFF;}</style></head><body><form action="" method="get"><div id="a"><div id="b1">用户注册</div><div id="b2"><input type="text" class="c1" placeholder="用户名"/><br><p class="c2">支持中文，字母，数字，“—”，“_”的组合，4-20个字符</p><input type="password" class="c1" placeholder="密码"/><br><p class="c2">建议使用数字，字母和符号两种以上的组合，6-20个字符</p><input type="password" class="c1" name="repwd" placeholder="确认密码"/><br><p class="c2">两次密码输入不一致</p><input type="text"class="c1" placeholder="验证手机" />或<a href="#" >验证邮箱</a><br><div id="d1"><input type="checkbox" />我已阅读并同意<a href="#">《京淘用户注册协议》</a></div></div><div id="b3"><input type="submit" value="立即注册" /></div></div></form></body></html>
2）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 HTML CSS综合案例</title><style>/* 1. 修饰输入框 */.a{width: 350px;/* 宽度 */height: 40px;/* 高度 */}/* 2. 修饰提示的文字 */.b{font-size:2px; /* 字号变小 */color: darkgray; /* 字的颜色 */font-family: "宋体"; /* 字体 */padding: 10px;/* 边距 */ }/* 3. 修饰注册按钮 */#btn{color: white; /* 字的颜色 */font-size: 20px; /* 字号加大 */background-color: orangered; /* 背景色 */border-color: orangered; /* 边框颜色 */}/* 4.修饰我已阅读 */#readme{padding: 30px;/* 外边距 */}</style></head><body><!-- 默认是get方式提交数据,都在地址栏里展示 --><form><table><tr><td><h2 style="text-align: center;">用户注册</h2></td></tr><tr><td><input class="a" type="text" placeholder="用户名" name="user"/></td></tr><tr><td class="b" >支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td></tr><tr><td><input class="a" type="password" placeholder="设置密码" name="pwd"/></td></tr><tr><td class="b" >建议使用数字、字母和符号两种以上的组合，6-20个字符</td></tr><tr><td><input class="a" type="password" placeholder="确认密码" name="repwd"/></td></tr><tr><td class="b" >两次密码输入不一致</td></tr><tr><td><input class="a" type="number" placeholder="验证手机" name="tel"/>或<a href="#">验证邮箱</a></td></tr><tr><td id="readme"><input type="checkbox"/>我已阅读并同意 <a href="#">《京淘用户注册协议》</a></td></tr><tr><td><input id="btn" class="a" type="submit" value="立即注册" /></td></tr></table></form></body></html>
注：前端–JS语法，函数学习
