css层叠样式表
对网页进行美化--html相当于布料，css给其上色装饰等。
如何嵌入，样式如何显示html文件？--样式通常是存储在样式表中，把样式表添加到html元素中
一、css：定义css样式的方式：
1.行内样式
style：任何标签都可以通过其设置属性--行内样式，内联样式（如：<p style="....."></p>）
如果当前的样式不需要复用，可以用行内样式。
2.内页样式（嵌入样式）
定义一个样式，声明一个样式--style放在head中，style作为一个标签存在，style中的样式根据下方想设置属性的标签来命名。
标签选择器selector：可以让设置的标签名对应页面上所有的标签都有对应样式。（如在style中设置p{....},那下方所有p标签都是{....}里设置的样式）
类选择器：声明一个样式并起个名字--声明样式的时候需要用一个英文的"."，选择样式通过class属性，不需要再写“.”。（如在style中设置 .bg{....} ,在下方p标签想调用，设置 <p class="bg"></p>）
id选择器:声明样式需要用一个#号，对应的元素的id要匹配。（如在style中设置 #spring{....} ，在下方p标签想调用，设置<p id="spring"></p>）
3.外部样式（推荐使用）
<link rel="stylesheet" href="......">href后面跟着的是css文件路径。
二、Css选择器:
1、*标签选择器
2、*类选择器:一个标签元素是可以选择多个样式，样式名中间用空格隔开
3、id选择器
4、div,p: 选中页面上所有的div和p元素_
5、* div p: 选中div里面的p，无论嵌套多少层，都可以找到.
6、* div>p: 选中div里面的直接字标签p
7、div+p: 选中紧跟着div的p
8、[type]: 选中硕面上所有带有type属性的标签
9、[type=text]: 选中页面上所有带有type=text属性的标签
10、[type'=t]:选中页面上type属性包含单词的所有元素
11、伪类选择器*: :link :hover. :active :visited
12、 nth-child(*: 选中第几个对应的元素
13、:checked: 选中所有被选中的元素
三、css层叠样式表
层叠性:
1.如果样式冲突，遵循就是就近原则，哪个样式离结构近，就执行哪个样式
2.如果样式不冲突，就不层叠
继承性:字标签会继承父标签的某些样式。文本颜色，字号，背景颜色...
优先级:类〉标签>id
权重:
1.继承的样式权重为最低0
2.行内样式权重最高100
3.如果权重相同，就近原则
4. ! important无限大
四、css常用的单位:
1、px像素:绝对单位，-一个像素代表-一个点。如100px*100px的正方形， 宽度100个点
高度100个点。
2、em是相对单位。它会参考它的父级元素。字体，父级元素的字体是16px，要设置元
素的字体大小为2em， 当前元素的字体大小就是32px。
3、rem相对单位。由页面决定。当我们改变了浏览器的字号设置，页面的字号也会随之
发生变化。 应用在老人版。
4、百分比:相对于父级元素的比例。
今日作业:制作注册页面
css文件代码：
/* 重置 */
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 设置layout */
.rg_layout{
width: 750px;
height: 500px;
border: 5px solid wheat;
background-color: aliceblue;
/* 让div水平居中 */
margin:auto;
margin-top: 100px;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color: aqua;
font-size: 20px;
}
.rg_left > p:last-child{
color: aquamarine;
font-size: 20px;
}
.re_center{
float: left;
}
.rg_right{
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right > p a {
color:red;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid yellowgreen;
/* 设置边框圆角 */
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: cyan;
border: 1px solid rgb(38, 0, 255);
}html文件代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<style media="screen">
* {
padding: 0;
margin: 0;
}
.video{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.video video{
width: 100%;
height: 100%;
object-fit: cover;
}
.ribbon {
display: flex;
justify-content: center;
position: absolute;
right: 10px;
top: 10px;
margin: auto;
}
.ribbon:after,
.ribbon:before {
margin-top: 0.5em;
content: "";
display: flex;
;
border: 1.5em solid #fff;
}
.ribbon:after {
border-right-color: transparent;
}
.ribbon:before {
border-left-color: transparent;
}
.ribbon a:link,
.ribbon a:visited {
color: #000;
text-decoration: none;
height: 3.5em;
overflow: hidden;
}
.ribbon span {
background: #fff;
display: inline-block;
line-height: 3em;
padding: 0 1.5em;
margin-top: 0.5em;
position: relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s;
/* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s;
/* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s;
/* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s;
/* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background: greenyellow;
margin-top: 0;
}
.ribbon span:before {
content: "";
position: absolute;
top: 3em;
left: 0;
border-right: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}
.ribbon span:after {
content: "";
position: absolute;
top: 3em;
right: 0;
border-left: 0.5em solid #9B8651;
border-bottom: 0.5em solid #fff;
}
</style>
<link rel="stylesheet" href="css\zhucecss.css">
</head>
<body>
<div class="ribbon">
<a href="shouye.html" target="_blank"><span>首页</span></a>
<a href="gequ.html" target="_blank"><span>一起听歌</span></a>
<a href="zhuce.html" target="_blank"><span>加入我们</span></a>
</div>
<div class="video">
<video src="video\背景视频.mp4" muted loop autoplay></video>
</div>
<div class="rg_layout">
<!-- layout；布局 -->
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img\验证码.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>结果呈现：
总结:今天的笔记，我只记了一点点，还缺少了很多知识点，对相对定位和盒子模型的知识点掌握不是很好。但是操作跟着去做了 ，也顺利完成作业。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
