day38 css
内容回顾:
1.标签嵌套
行内标签, 块标签
行内标签不能嵌套块标签, 但不是绝对的
块标签可以嵌套块标签/行内标签
但是p标签:只可以嵌套字体,图片,表单,而且不能嵌套
2.table
tr
td
3.form: action methods(get|post) enctype
input
type
text
password
submit: 与action相关
file: 与enctype相关,mothods一定是post请求
radio
checkbox
name
value
select
option
textarea
rows
clos
lable
for: 对应input里的id
4.python:
input()
print()
5.css
三种引入方式
行内样式> 内接样式, 外接样式
@import url()
link
link
基本选择器:
作用: 选中标签,设置属性
标签选择器
类名选择器
id选择器:未来与js有很大关联
通配符选择器
高级选择器:
组合选择器
今日内容
共性选择器, 和特性选择器的对比: '共性'简化代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1{
font-size: 30px;
color: green;
}
#p2{
text-decoration: underline;
color: green;
}
#p3{
font-size: 30px;
text-decoration: underline;
}
</style>
</head>
<body>
<!--
需求, 用id没问题, 但是style的代码重复的多
八戒1 30px green
八戒2 green text-decoration: underline;
八戒3 30px text-decoration:underline;
-->
<p id="p1">八戒1</p>
<p id="p2">八戒2</p>
<p id="p3">八戒3</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fs{
font-size: 30px;
}
.cl{
color: green;
}
.ud{
text-decoration: underline;
}
</style>
</head>
<body>
<!--
用class类名, 可以比id少一些代码(公共属性class的使用, 比特性id的优点)
八戒1 30px green
八戒2 green text-decoration: underline;
八戒3 30px text-decoration:underline;
-->
<p id="p1", class="fs cl">八戒1</p>
<p id="p2", class="cl ud">八戒2</p>
<p id="p3", class="fs ud" >八戒3</p>
</body>
</html>
一.高级选择器
后代选择器(中间用空格分隔)
div p{ }
.faster p{}
.faster ul li p{}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div p{
color: green;
}
ul{
list-style-type: none; #去掉小圆点
}
</style>
</head>
<body>
<div class="faster">
<p>
bajie
</p>
<ul>
<li>
<p>
wukong
</p>
</li>
</ul>
</div>
</body>
</html>
子代选择器(用>号, 只代表选中第一层)
div>p{ }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father>p{
color: green;
}
.father>ul>li{
/*这个li下面的ul下面的li也变red了, 是因为inherited from li: (继承性)*/
color: red;
}
</style>
</head>
<body>
<div class="father">
<p>bajie</p>
<p>bajie</p>
<div class="content">
<p>wukong</p>
</div>
<ul>
<li>
datang
<ul>
<li>
tangtang
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
组合选择器
多个选择器, 组合到一起共同设置样式
div,p,a,li,span{ }
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
/*继承性设置*/
font-size: 30px;
}
*{
/*通配选择器: 一般不用,消耗大*/
padding: 0;
margin: 0;
}
div,p,a,span{
/*组合选择器*/
color: red;
}
</style>
</head>
<body>
<div>
bajie
</div>
<p>
wukong
</p>
<a href="#">大唐</a>
<span>糖糖</span>
</body>
</html>
交集选择器
dev.active{ }: (两个同级选择器的交集)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
font-size: 30px;
}
.active{
color: green;
}
div.active{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="active">
八戒
</div>
<div class="wu">
悟空
</div>
</body>
</html>
属性选择器
专门用做选择属性的, 基本不用, 因为id和class已足够进行选择
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
form input[type='text']{
}
form input[type='password']{
}
form #user{
/*上面的属性选择器基本不用, 用id和class完全够用*/
}
</style>
</head>
<body>
<form action="">
<input type="text" id="user">
<input type="password">
</form>
</body>
</html>
伪类选择器
从a标签演变而来, "爱恨准则" LoVe HAte:
link: 链接没被访问时的样式
visited: 访问过后的样式
hover: 鼠标悬停时的样式
active: 按住鼠标时的样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*link visited hover active: 这些属性都只能用在a标签中*/
a:link{
color: green;
}
a:visited{
color: yellow;
}
a:hover{
color: red;
}
a:active{
color: black;
}
span:hover{
/*span可以用悬停的属性*/
color: fuchsia;
font-size: 40px;
}
.bcd{
/*标签的显示与隐藏*/
display: none; #隐藏: 不显示
}
.abc:hover .bcd{
/*在父标签上悬浮, 让子标签变色*/
color: red;
display: block; #显示: 不隐藏
}
</style>
</head>
<body>
<a href="#">八戒爱谁谁</a>
<span>悟空</span>
<div class="abc">
bajie
<p class="bcd">wukong</p>
</div>
</body>
</html>
伪元素选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p:first-letter{
color: red;
}
/*伪元素, 属性一定是content*/
p:before{
content: '$';
}
p:after{
content: '.';
}
.box2{
/*需求:这个标签是块级标签, 并且不再页面中占位置; 这个东西和布局有关系*/
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<p class="box">
<span>bajie</span>
</p>
<span class="box2">wukong</span>
</body>
</html>
二.css的继承性和层叠性
css的继承性:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box p{
/*只有color, font-xxx,line-xxx,text-xxx 这几个可以继承*/
color: red;
font-size: 30px;
line-height: 40px;
text-align: center; #文本在盒子里左右居中
}
span{
/*span的默认背景色是"透明"色, 所以span的属性也是green*/
}
/*坑一: a标签有爱恨准则, 所以不继承: 如果要改a标签的颜色一定要选中a,不能用继承性来设置*/
.box{
color: red;
}
</style>
</head>
<body>
<div class="box">
bajie
<a href="#">百度一下</a>
<p>
wukong
<apan>
datang
</apan>
</p>
</div>
</body>
</html>
css的层叠性:
就是覆盖: 看权重, 谁的权重大,就按谁的样式进行显示(分为选中的标签属性 和 继承来的标签属性)
选中的标签,如何看权重(数选择器的数量): id class 标签
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*权重(数选择器的数量): id class 标签*/
/*1 0 0 */
#box{
color: yellow;}
/*0 1 0*/
.box{
color: red;}
/*0 0 1*/
div{
color: green;}
</style>
</head>
<body>
<div class="box" id="box">
bajie
</div>
</body>
</html>
选中的标签,数权重, 权重一样的, 后写的优先级高, 生效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*0 4 0*/
.box1 .box2 .box3 .box4{
color: red;}
/*2 2 0*/
#father1 #father2 .box3 .box4{
color: green;}
/*2 2 0 */
.box1 .box2 #father3 #father4{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
继承而来的标签的属性的权重为0, 它和"完全"选中的标签没有可比性
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#father1 #father2 #father3{
color: red;}
.box1 .box2 .box3 .box4{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
都是继承来的时候,权重都为0,这时候哪个生效? 哪个层级更接近, 哪个就生效
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#father1 #father2 #father3{
color: red;}
.box1 .box2{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
都是继承来的时候,权重都为0,这时候哪个生效? 哪个层级更接近, 哪个就生效; 若是两个层级一样呢? 再去数选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*3 0 0*/
#father1 #father2 #father3{
color: red;}
/*0 3 0*/
.box1 .box2 .box3{
color: yellow;}
</style>
</head>
<body>
<div class="box1" id="father1">
<ul class="box2" id="father2">
<li class="box3" id="father3">
<p class="box4" id="father4">
八戒爱谁谁
</p>
</li>
</ul>
</div>
</body>
</html>
总结:
行内 > id > class > 标签
三.盒模型
width: 内容宽度
height:内容的高度
padding: 内边距
border: 边框
margin: 外边距
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
padding: 100px;
border: 20px solid green;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒模型的计算
总结: 如果要保证盒模型的大小不变,加padding,就一定要减width或减height
前提: 在标准文档流下
padding: 调整父子之间的位置
margin: 调整兄弟之间的位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
padding-left: 20px;
padding-top: 20px;
border: solid 10px green;
}
span{
margin: 30px;
}
</style>
</head>
<body>
<!--202*202-->
<div class="box">
<span>八戒</span>
<span>八戒</span>
</div>
<div class="box">八戒</div>
</body>
</html>
四.布局方式: 浮动
作用: 浮动能实现元素并排
盒子一浮动就脱离了标准文档流, 就没有了标准下的属性(比如块, 和行内), 脱离了就不占位置了
第一个盒子浮动, 就去找父亲的边, 第二个盒子浮动,就去找前面浮动盒子的边
(container: 容器)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0; #清除默认宽高
padding: 0;}
.top-Bar{
width: 100%;
height: 40px;
}
.container{
width: 1226px;
height: 40px;
/*居中*/
margin-left: auto;
margin-right: auto;
}
.top-Bar .top-content{
width: 550px;
height: 40px;
float: left;
}
.top-Bar .top-shop{
width: 120px;
height: 40px;
float: right;
}
.top-Bar .top-info{
width: 180px;
height: 40px;
float: right;
}
</style>
</head>
<body>
<div class="top-Bar">
<div class="container">
<div class="top-content"></div>
<div class="top-shop"></div>
<div class="top-info"></div>
</div>
</div>
</body>
</html>