python_way day14 CSS
层叠样式表
一、CSS作用域：
二、css标签选择器
三、css样式
四、莫泰对话框：
一、css作用域：
基本用法：style="样式"
<body>
<div style="background-color: crimson; color: aqua;">这是css效果</div>
</body>
图示：
css应用范围： 1、当前标签，2、当前页面，3、所有文件
上面就是放在了div标签中，但是这样不可重用
当前页面使用
也可以写在head中，这样就可以被这个文件中的任意一个标签使用了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #head中de style标签就是定义css样式的
div{ #指定想要使用的标签名
background-color: crimson;
color: aqua;
}
</style>
</head>
<body>
<div >这是css1效果 ,重用的效果</div> #这里div标签都被适用了
<div >这是css2效果 ,重用的效果</div>
<div >这是css3效果 ,重用的效果</div>
</body>
</html>
图示：
所有文件使用
link 就是引入文件
common.css
div{
background-color: crimson;
color: aqua;
}
图示：
效果也是一样的
优先：标签内>头部>文件
二、css选择器
1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div { #找到所有的div
background-color: crimson;
color: blue;
}
</style>
</head>
<body>
<div>这是css1效果 ,重用的效果</div> #只要是div全部生效
<div>这是css2效果 ,重用的效果</div>
<div>这是css3效果 ,重用的效果</div>
</body>
</html>
2、id选择器
id唯一，不能重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div {
background-color: crimson;
color: blue;
}
#i1 { #只找id = i1的
font-size: 56px;
}
</style>
</head>
<body>
<div>这是css1效果 ,重用的效果</div>
<div>这是css2效果 ,重用的效果</div>
<div id="i1">这是css3效果 ,重用的效果</div>
</body>
</html>
3、class选择器
class可以重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div {
background-color: crimson;
color: blue;
}
#i1 {
font-size: 56px;
}
.c1{
background-color: blue;
color: azure;
}
</style>
</head>
<body>
<div>这是标签选择器</div>
<div class="c1">这是class选取器</div>
<div id="i1">这是id选择器</div>
</body>
</html>
图示：
4、层级选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<link rel="stylesheet" href="common.css">--> <style> .c1{ background-color: blue; color: azure; } span div p .c1{ background-color: chartreuse; color: black; } </style> </head> <body> <div class="c1">我是class选择器</div> <span> <div> <p> <a class="c1">我也是c1，使用层级选择器更精准，而且不影响上面的c1 <br/> 但是由于class的优先级要高于标签，所以这里需要指定class=c1 <br/> 如果指定了a标签不好使，会被之前定义的class选择器抢先 </a> </p> </div> </span> </body> </html>
图示：
从选择器里再进行挑选：
5、组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
span div p .c1,h1{ #用逗号 , 隔开，可以选择多个标签，这就是组合选择器
background-color: chartreuse;
color: black;
}
</style>
</head>
<body>
<span>
<div>
<p>
<a class="c1">我是c1，使用层级选择器更精准
</a>
</p>
<h1>我是h1标签,组合选择器也把我穿上衣服了！</h1>
</div>
</span>
</body>
</html>
三、css样式
color：字体颜色
backgroup-color： 北京颜色
backgroup-img: 引用图片
backgroup-repeat： 图片是否重复
backgroup-position: 图片坐标
border:边框
cursor：让鼠标变成个小手
display：隐藏标签
font-size ：字体大小
height： 50px 高度
100% or 500px 宽度
float: left 往左飘
边距：
margin：外边距
padding：内边距
flost：漂浮
position： 位置
relative
absolute 固定窗口的一个位置，但是滚动窗口还是会一定
fixed 固定，相对浏览器的窗口，想让他固定在哪里都可以。
opacity:透明度 1不透明，0透明
z-index:标签显示的层级，越大越靠前
第二种写法
background-color: rgba(0,0,0,.6); 前面3个数是颜色，后面的 .6是透明度
1、颜色
第一种：
backgroup-color：颜色可以写英文： chartreuse
第二种：
也可以写成rgb颜色 #ddd
第三种：
2：宽度
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: fuchsia;
/*color: black;*/
500px; #父亲500像素
}
.c1{
20%; #一个儿子占像素的20%
background-color: chartreuse;
}
.c2{
80%; #一个儿子占500像素的80%
background-color: blue;
}
</style>
</head>
<body>
<div> #父亲
<div class="c1">这是20</div> #儿子
<div class="c2">这是80</div>
</div>
</body>
</html>
图示：
两个儿子因为是div块级标签，所以就一人占一行。我们想要的效果是看他们分享父亲div的500像素
所以就用上了
float：left
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: fuchsia;
/*color: black;*/
500px;
}
.c1{
20%;
background-color: chartreuse;
float: left;
}
.c2{
80%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div>
<div class="c1">这是20</div>
<div class="c2">这是80</div>
</div>
</body>
</html>
小知识点：
如果在div中的div使用了float，最外层的div没有定义高度，切最外层的div有边框，目的是想让内层的两个float的div将外层的边框撑起来。如果不做特殊的设置是不成的。
如图
但是不加特殊设置事实则是事与愿违：
<div style="border: solid 1px red"> <div style="height: 20px; 20%;background-color: blue;float:left ">f</div> <div style="height: 20px; 70%; background-color: aqua; float: left">f</div> <div style="clear: both;"></div> <!-- 就是个人设置可以撑起最外侧的边框 -->
</div>
实际上使用了float是标签飘起来在最上层，这样的话就脱离出来了整个页面。使用clear：both则是将脱离的标签拽回来
3、background-image: 图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('s1.jpg');
}
</style>
</head>
<body>
<dev class="c3"></dev>
</body>
</html>
这样没有效果，因为相当于前面有一堵墙，我没有开洞，图片一直在墙后面
下面我们就要开洞了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('4.gif');
height: 100px; #开洞的高度
500px; #开洞的宽度
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>
图示：
问题来了！怎么图片成平铺效果了！
如果不想重复
4、backgroup-repeat: no-repeat; 不重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('4.gif');
height: 100px;
500px;
background-repeat: no-repeat; #这样就是不让他重复
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>
图示：
5、backgroup-position : 调整图片位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('2.jpg');
height: 100px;
100px;
background-repeat: no-repeat;
background-position: 0 0; #这就是现实图片的左上角
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>
如果我们想调整图片的位置，只要调整postition的位置就可以了
6、background系列的命令可以写到一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c4{
background: url("2.jpg") -263px -51px no-repeat; #这里把所有关于background的参数都写到了一起。
height: 50px;
50px;
}
</style>
</head>
<body>
<div class="c4"></div>
</body>
</html>
图示
7、border
solid 实线
dotted 大虚线
dashed 小虚线
<style>
#i1{
border: solid saddlebrown ; #边框 实线 颜色
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
50px;
}
</style>
</head>
<body>
<div id="i1"> <---------- 这里
<div class="c4"></div>
</div>
图示：
边框的范围：
左边边框：border-left
右边框：border-right
下边框：border-bottom
上边框：border-top 等等还有改变颜色，边框宽度都可以改变。
图示：
8、display：none 隐藏，并且不占位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
50px;
display: none;
}
</style>
</head>
<body>
<div id="i1">
<div class="c4"></div>
</div>
</body>
</html>
图示 ： 图片没了并且位置也没了
display：block
将行内标签变为块级标签
display：inline
将块级标签变为行内标签
desplay：inline-block
内联标签，自己有多高多款就占多少，高度宽度不生效
如果想把内联标签设置高宽，哪我们就要用这个参数了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
display: inline-block; #如果不写这个下面的高度宽度是不生效的，不生效中间的c4图片就不能显示出来
height: 100px;
100px;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
50px;
}
</style>
</head>
<body>
<span id="i1">
<div class="c4"></div>
</span>
</body>
</html>
图示：现在加上了 display: inline-block,就可以显示出来了。
9、visibility:hidden 隐藏，但是位置保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
50px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="i1">
<div class="c4"></div>
</div>
</body>
</html>
图示： 图片没了但是为之保留
10、cursor 让鼠标放到图边上变成小手等图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c5{
cursor: pointer; #小手
}
.c6{
cursor: wait; #等待
}
.c7{
cursor: cell; #十字
}
</style>
</head>
<body>
<ul>
<li class="c5">首页</li>
<li class="c6">产品</li>
<li class="c7">销售</li>
</ul>
</body>
</html>
11、边距
- margin：外边距，本身不增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 70px;
border: solid red;
}
.c2{
height: 30px;
background-color: aquamarine;
margin-top: 20px; #给里面的颜色上面加上一个外边距
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>
图示：
- padding:内边距，本身增加
图示：没有加padding时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
border: solid red;
}
.c2{
height: 30px;
background-color: aquamarine;
margin-top: 20px;
}
.c3{
height: 30px;
background-color: cornflowerblue;
padding-bottom: 10px; #这里加上了下内边距
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
</html>
图示效果：
12、flost 漂浮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
500px; #宽度是500px
background-color: cadetblue;
}
.c2{
background-color: aquamarine;
30%; #第一个儿子的宽度是c1的30%
}
.c3{
background-color: cornflowerblue;
70%; #第二个儿子宽度是c1的70
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
</div>
</body>
</html>
图示：
但是我们想要的是两个儿子都在父亲里面，这时就需要使用flost了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
500px;
border: solid red;
}
.c2{
background-color: aquamarine;
30%;
float: left; #让老大飘起来
}
.c3{
background-color: cornflowerblue;
50%; #这里我们让老二小一些，看一下效果，但是如果儿子相加超过了100%，那么就会撑破了，就漂不起来了。
float: left; #让老二飘起来
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
</div>
</body>
</html>
图示：
但是问题来了，我们把父亲的高度给删了，按说父亲的红色外框应该是被两个儿子撑起来的。这会却没有。那我们怎么办？
style="clear: both"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
500px;
border: solid red;
}
.c2{
background-color: aquamarine;
30%;
float: left; #孩子用上float
}
.c3{
background-color: cornflowerblue;
50%;
float: left;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
<div style="clear: both"></div> #在父亲里面加上这句话
</div>
</body>
</html>
图示：
float: right 就是靠右边飘
13、position
- fixed： 根据整个阅览器的窗口定位，拉动窗口位置不会变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 1000px;
background-color: cadetblue;
}
.c2{
position: fixed; /*默认是在c1 div的外面*/
}
.c3{
background-color: cornflowerblue;
50%;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
图示：
调整
<title>Title</title>
<style>
.c1{
height: 1000px;
background-color: cadetblue;
}
.c2{
position: fixed; /*默认是在c1div的外面*/
right: 200px; # 我让c2的字体靠右
bottom: 0; # 并且在最底部
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
图示：
- absolute 放在浏览器的一个位置，滚动会跟着移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 2000px;
background-color: cadetblue; #只是这里做了修改
}
.c2{
position: absolute;
right: 200px;
bottom: 0;
}
.c3{
background-color: cornflowerblue;
50%;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>
图示：位置还是在窗口的最底部，但是滑动窗口却会跟着窗口动。
- relative 单独写没有什么效果，要和absolute 结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 500px;
500px;
background-color: cadetblue;
position: relative; #最终找到了这里
}
.c2{
position: absolute; #对应的c2会一层一层的网上找，知道找到relative这个标签定位
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1"> #因为relative在v1中，所以c2是根据c1定位
<div style="background-color: blue;height: 100px"> #就算上层还有一个div，c2的absolute不会根据这个定位
<div class="c2">返回顶部</div>
</div>
</div>
</body>
</html>
图示：
div边框圆角效果
<style type="text/css"> .a { background-color: #c7dec6; border: 1px solid #000; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height:200px; width:500px; padding:20px; } </style> </head> <body> <p class="a"> 在HTML中如何把块的边框做成圆角 </p> </body> </html>
莫泰对话框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>莫泰对话框</title> <style> .c1 { 100%; height: 1000px; } .dl { /*登录按钮的位置永远会在模态框的右下角*/ 45px; height: 20px; background-color: antiquewhite; position: absolute; right: 600px; top: 300px; } .model { /*莫泰框的class*/ 300px; height: 200px; background-color: coral; top: 300px; left: 600px; position: absolute; margin-top: -100px; margin-left: -150px; z-index: 10; } .hide{ /*设置隐藏的class*/ display: none; } .myinpyt { margin-left: 82px; margin-top: 20px; } .but{ position: absolute; right: 30px; bottom:20px; } .zj{ /*中间遮罩层*/ background-color: black; top: 0; left: 0; bottom: 0; right: 0; z-index: 8; position: fixed; /*只要想调整标签的位置就需要postition这个参数*/ opacity: 0.4; } </style> </head> <body> <div class="c1"> <button class="dl">登录</button> <div class="zj"> </div> <div class="model"> <div class="myinpyt"> <p> <input name="user" placeholder="用户名"> </p> <p> <input name="password" placeholder="密码"> </p> <button class="but">退出</button> </div> </div> </div> </body> </html>