day52——分类于嵌套、伪元素/类选择器、选择器优先级、css属性
今日内容
- 分类与嵌套
- 伪类选择器
- 伪元素选择器
- 选择器优先 级
- css属性相关（操作标签样式）
一、分类与嵌套
ps：默认提示placehoder
<body>
<input type="text" placeholder="用户名">
<!--文本框内默认以背景的形式展示提示信息-->
</body>
# 同类型用逗号并列在一起查找标签
div,p,span {
color:red;
}
# 不同类型的选择器（类、id、标签……）也可以用逗号并列在一起查找标签
#d1,.c1,span {
color:orange;
}
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body { /*整个个页面的样式*/
background-color: black;
/*页面的背景颜色设置为黑色*/
}
a:link { /*访问之前的状态*/
color:red;
/*a标签被点击之前时的颜色为黑色*/
}
a:hover { /*鼠标悬浮态*/
color:black;
/*鼠标悬浮在a标签上为黄色*/
}
a:active { /*鼠标激活态*/
color:green;
/*鼠标点击不松开时的颜色为绿色*/
}
a:visited {
/*访问之后的状态*/
color:gray;
/*鼠标点击之后的颜色为灰色*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框获取焦点(鼠标点了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小微在不在</a>
<p>
点我点我...
</p>
<input type="text">
</body>
</html>
总结：记住几个关键字，针对a标签,link：访问前的状态、hover：鼠标悬浮态、active：激活态(鼠标点击不松开时的状态)、visited：访问之后的状态；针对input标签，focus：input框获取焦点(鼠标点了input框)
伪元素选择器
<style>
p:first-letter {
font-size:30px;
/*指定第一个字的大小为30px*/
color:red;
/*颜色为红色*/
}
p:before { /*在文本的开头，同css添加内容*/
content:'好好看';
color:blue;
}
p:after {
/*在文本末尾添加内容*/
content:'好好学';
color:green;
}
</style>
ps:before和after通常是用来清除浮动带来的影响，父标签塌陷的问题
选择器有优先级
ps:HTML页面是从上往下加载的
- 选择器相同是的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color:red;
}
</style>
<link rel="stylesheet" href="mycss1.css">
</head>
<body>
<p id="d1" class="c1" style="color:black">
德玛西亚！！！！
</p>
</body>
</html>
<!--mycss1.css内容-->
<!--p {
color:greenyellow;
}-->
总结：选择器相同的情况下，书写顺序不同，就近原则，谁离的近就是按谁的样式
黑色在body标签内离的最近所有文本显示为黑色，将黑色注释掉，导入的颜色最近，为黄绿色，将其注释掉文本就为红色。
- 选择器不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
color:green;
}
.c1 {
color:yellow;
}
p {
color:red;
}
</style>
</head>
<body>
<p id="d1" class="c1" style="color:black">
德玛西亚！！！！
</p>
</body>
</html>
总结：选择器不同，按查找的精确度来确定，谁查找的越精确优先级就越高
行内>id选择器>类选择器>便签选择器
上述代码文本的颜色显示为黑色；将行里颜色样式去掉，这个时候id查找的最精确，颜色为绿色；将id选择器注释掉，类选择器查找最精确，颜色为黄色；类选择器注释掉，就是便签选择器的颜色红色了。
css属性相关
背景及长宽的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: green; # 块级便签p设置背景颜色
width:400px; # 设置长宽
height:400px;
}
span {
background-color: yellow; # 行类便签span设置背景颜色
width:300px; # 行内标签无法设置长宽，就算设置了也不会生效，还是文本多大占多大
height:300px;
}
</style>
</head>
<body>
<p>ppp</p>
<span>span</span>
</body>
</html>
总结：块儿级标签和行里标签都能设置背景颜色，但只有块儿级标签设置长宽有效，行内标签设置长宽无效。
字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family:"颜文字","微软雅黑","..."; /*第一个没用就用第二个，依次往后*/
font-size:40px; /*字体大小*/
font-weight: lighter; /*字体加粗*/
font-weight: lighter; /*字体变细*/
font-weight:500; /*加数字调节字体粗细 范围100~900*/
font-weight: inherit; /*继承父标签的字体粗细*/
color:red; /*1 字体颜色 直接写颜色的单词*/
color: #677e76; /*2 写颜色的标号*/
color:rgb(11,28,257); /*3 三元色，范围0~255*/
color:rgba(11,28,257,0.5); /*4 三元色加透明度，第四个参数为透明度，范围为0~1*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
微信公众号:软件管家...
*/
}
</style>
</head>
<body>
<p>我用双手成就我的梦想</p>
</body>
</html>
总结：font-family：那种字体(宋体、微软雅黑)、font-size 字体大小，font-weight字体粗细，color字体颜色(单词、颜色编号、三基色、三基色加透明度)，pycharm、微信截图、qq截图有取色器功能。
文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align:center; /*文本居中对齐*/
text-align:left; /*左对齐*/
text-align:right; /*右对齐*/
text-align:justify; /*两端对齐*/
text-decoration:underline; /*为文字加下滑线*/
text-decoration:line-through; /*加删除线*/
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size:16px; /*设置文字字体的大小，跟字体属性里设置字体大小一样的效果*/
text-indent:32px; /*缩进32px*/
text-decoration:none; /*用于去掉a标签自带的下划线,需要掌握*/
}
</style>
</head>
<body>
<p>
大家好，我叫王晗旭! 我家里面特别的困难，从小我的妈妈告诉我，穷人的孩子要早当家。
</p>
</body>
</html>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
height: 800px;
width: 800px;
/*background-color: red;*/
/*背景图片*/
/*background-image: url("222.png"); !*默认要全部铺满*!*/
/*background-repeat: no-repeat; !*不铺*!*/
/*background-repeat:repeat-x; */
/*background-repeat:repeat-y; */
/*其实浏览器不是一个平面 是一个三维立体结构
z轴指向用户 越大离用户越近
*/
/*background-position:center center; !*第一个左 第二个上*!*/
/*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/
background: red url("222.png") no-repeat center center; /*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
总结：image url()添加背景图片；repeat 铺满不铺满，以x轴铺满，以y轴铺满。
背景图片小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#d1 {
height: 500px;
background-color: red;
}
#d2 {
height: 500px;
background-color: green;
}
#d3 {
height: 500px;
background-image: url("222.png");
background-attachment: fixed;
}
#d4 {
height: 500px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>
"""
background-attachment :定义背景图片随滚动轴的移动方式
取值: scroll fixed inherit
scroll: 随着页面的滚动轴背景zhidao景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否"""
用div标签将页面分成相等高度的四份，其中三份背景颜色不相同，另外一个id为d3 的div标签背景设为图片，background-attachment: fixed;定义随着页面的滚动轴背景图片不会移动
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: red;
border-width: 5px;
border-style:solid;
border-color: green;
}
div {
border-left-width:5px;
border-left-style:dotted;
border-left-color: blue;
border-right-width:10px;
border-right-style: solid;
border-right-color: aliceblue;
border-top-width:15px;
border-top-style: dashed;
border-top-color: greenyellow;
/*border-bottom-width:10px;*/
/*border-bottom-style: solid;*/
/*border-bottom-color: gray;*/
border-bottom:15px gray solid; /*简写，顺序不用管*/
}
#d1 {
background-color: #e2b9b9;
height:400px;
width:400px;
border-radius:50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
}
</style>
</head>
<body>
<p>北京躺.png</p>
<div>这沙发可真舒服啊！</div>
<div id="d1"></div>
</body>
</html>
总结：边框的上下左右都能设置宽度、颜色和样式，通过border-radius:50%;能将边框变成园的形状，如果给的长宽不一则变为椭圆。
display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*#d1 {*/
/* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
/* display: inline; !*将标签设置为行内标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: inline;*/
/*}*/
/*#d1 {*/
/* display: block; !*将标签设置成块儿级标签的特点*!*/
/*}*/
/*#d2 {*/
/* display: block;*/
/*}*/
/*#d1 {*/
/* display: inline-block;*/
/*}*/
/*#d2 {*/
/* display: inline-block; !*标签即可以在一行显示又可以设置长宽*!*/
/*}*/
</style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>
盒子模型
"""
盒子模型
就以快递盒为例
快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
盒子的厚度(标签的边框 border)
盒子里面的物体到盒子的距离(内容到边框的距离 padding内边距)
物体的大小(内容 content)
如果你想要调整标签与标签之间的距离 你就可以调整margin
浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0; /*上下左右全是0
/*margin: 10px 20px; !* 第一个上下 第二个左右*!*/
/*margin: 10px 20px 30px; !*第一个上 第二个左右 第三个下*!*/
/*margin: 10px 20px 30px 40px; !*上 右 下 左*!*/
}
/*p {*/
/* margin-left: 0;*/
/* margin-top: 0;*/
/* margin-right: 0;*/
/* margin-bottom: 0;*/
/*}*/
#d1 {
margin-bottom: 50px;
}
#d2 {
margin-top: 20px; /*不叠加 只取大的*/
}
#dd {
margin: 0 auto; /*只能做到标签的水平居中*/
}
p {
border: 3px solid red;
/*padding-left: 10px;*/
/*padding-top: 20px;*/
/*padding-right: 20px;*/
/*padding-bottom: 50px;*/
/*padding: 10px;*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px;*/
/*padding: 10px 20px 30px 40px;*/ /*规律和margin一模一样*/
}
</style>
</head>
<body>
<!-- <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!-- <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!-- <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->
<p>ppp</p>
</body>
</html>
浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
body {
margin: 0;
}
#d1 {
height: 200px;
width: 200px;
background-color: red;
float: left; /*浮动 浮到空中往左飘*/
}
#d2 {
height: 200px;
width: 200px;
background-color: greenyellow;
float: right; /*浮动 浮到空中往右飘*/
}
</style>
