文章目录
一.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=2021-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>
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
