52、伪类选择器与css属性相关
一、选择器的分组与嵌套
分组：多个选择器是并列关系，都要找到
嵌套：找到d1选择器下面的类选择器c1
#d1,c1,span { /*逗号表示并列关系*/
color: yellow;
} #分组
#d1 .c1,span {
color: orange;
} #嵌套：d1下面的类选择器c1以及标签选择器span
二、伪类选择器
a标签的伪类选择器：
a:link 默认态，访问前的初始状态
a:hover 悬浮态，鼠标放在上面时的状态
a:active 激活态，鼠标点着不放的状态
a:visited 被访问态，访问后的状态
input:focus{background-color:red;} 输入框点击后的状态（获取焦点）
<!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 { background-color: black; } a:link { /*访问之前的状态*/ color: red; } a:hover { /*需要记住*/ color: aqua; /*鼠标悬浮态*/ } a:active { color: black; /*鼠标点击不松开的状态 激活态*/ } a:visited { color: darkgray; /*访问之后的状态*/ } 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>
三、伪元素选择器
first-letter{font-size： color： } 设置开头第一个字
before{content： color： } 开头添加
after{content： color： } 末尾添加
p:first-letter {
font-size: 48px;
color: orange;
}
p:before { /*在文本开头 同css添加内容*/
content: '你说的对';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)
四、选择器的优先级
1.相同选择器下，顺序不同：就近原则谁离标签近，执行等级越高
2.相同选择器下，距离相同：按照从上到下的顺序执行
3.不同选择器下：行内（标签内部）》id选择器》类选择器》标签选择器，精度越高，执行等级越高
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* 1.选择器相同 书写顺序不同 就近原则:谁离标签更近就听谁的 2.选择器不同 ... 行内 > id选择器 > 类选择器 > 标签选择器 精确度越高越有效 */ #d1 { color: aqua; } /*.c1 {*/ /* color: orange;*/ /*}*/ /*p {*/ /* color: red;*/ /*}*/ </style> <!-- <link rel="stylesheet" href="mycss1.css">--> </head> <body> <p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p> </body> </html>
五、css属性相关
5.1、长宽属性
块级高度和宽度可以设定，行内高度和宽度设定无效
<style> p { background-color: red; height: 200px; width: 400px; } span { background-color: green; height: 200px; width: 400px; /*行内标签无法设置长宽 就算你写了 也不会生效*/ } </style>
5.2、字体属性
font-family：“ ”，“ ” 字体设置左边为优先级
font-size： 字体大小
dont-weight：（加粗：bolder，变细：lighter，粗细值：100~900，继承父类的粗细值：inherit）
color： 直接写颜色
color：rgb（128,55,66）；通过三基色（0~255）锁定颜色
color：rgba（128,123,12，0.9）；通过三基色以及透明度确定，透明度值越小越透明
p {
/*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/
/*font-size: 24px; !*字体大小*!*/
/*font-weight: inherit; !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/
/*color: red; !*直接写颜色英文*!*/
/*color: #ee762e; !*颜色编号*!*/
/*color: rgb(128,23,45); !*三基色 数字 范围0-255*!*/
/*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是0-1*!*/
/*当你想要一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能
也可以多软件结合使用
*/
}
5.3、文字属性
5.3.1、文字位置
text-align：center 居中
text-align：left 居左
text-align：right 居右
text-align：justify 两端对齐
5.3.2、文字划线
text-decoration：underline； 下划线
text-decoration：overline： 上划线
text-decoration：line-through； 删除线
text-decoration：none； 无划线，可以用来删除a标签的自带下划线
5.3.3、空两格
text-saze：16px
text-indent：32px 设置字体大小为16px，空两格
p {
/*text-align: center; !*居中*!*/
/*text-align: right;*/
/*text-align: left;*/
/*text-align: justify; !*两端对齐*!*/
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
/*text-decoration: none;*/
/*在html中 有很多标签渲染出来的样式效果是一样的*/
font-size: 16px;
text-indent: 32px; /*缩进32px*/
}
a {
text-decoration: none; /*主要用于给a标签去掉自带的下划线 需要掌握*/
}
5.4、背景属性
background-color：背景颜色
background-image：（“图片地址”）；背景图片，默认图片铺满，当图片小于背景块时，将会自动铺满
background-repeat：no-repeat；背景图片不铺满
background-repeat：repeat-x；x轴铺满
background-repeat：repeat-y；y轴铺满
background-repeat：center center；左右居中，上下居中
可以简写为：background：red url（“a.png”） no-repeat center center；将需要的条件写一起
background-attachment：fixed；固定该背景，不会因为滑动页面而变化
!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>
5.5、边框
5.5.1、边框四周一致
border-width：宽度
border-style：样式
border-color：颜色
简写：border：3px solid red
5.5.2、定制边框的四周
border-left-width：左边的宽度
border-bottom-style：底部的样式
border-right-color：右边的颜色
border-top-color：顶部的颜色
5.5.3、画圆
height：400px
width：400px
border-radius：50% 半径为高度的一半
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p { background-color: red; border-width: 5px; border-style: solid; border-color: green; } div { /*border-left-width: 5px;*/ /*border-left-color: red;*/ /*border-left-style: dotted;*/ /*border-right-width: 10px;*/ /*border-right-color: greenyellow;*/ /*border-right-style: solid;*/ /*border-top-width: 15px;*/ /*border-top-color: deeppink;*/ /*border-top-style: dashed;*/ /*border-bottom-width: 10px;*/ /*border-bottom-color: tomato;*/ /*border-bottom-style: solid;*/ border: 3px solid red; /*三者位置可以随意写*/ } #d1 { background-color: greenyellow; height: 400px; width: 400px; border-radius: 50%; /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/ } </style> </head> <body> <p>穷人 被diss到了 哭泣.png</p> <div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div> <div id="d1"></div> </body> </html>
5.6、display属性
display：none 隐藏，不占位置
display：inline 将标签设置成行内特点，无法设置长宽，可以在一行
display：block 将标签设置成块级特点，可以设置长宽，无法在一行
display：inline-block 同时具备行内特点和块级特点
visibility：hidden 隐藏，占位置
<!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>
5.7、盒子模型
盒子模型分为四种特性：
1.margin：边框与边框的距离
margin-left：0 左边相邻边框之间的距离0
margin：0 所有边框之间的距离为0
margin：10px 20px； 上下为10，左右为20
margin：10px 20px 30 px 上为10，左右为20，下为30
margin：10px 20px 30 px 40px 上为10，右为20，下30，左为40
两个边框都显示距离，以最大值为准，边框距离不相加
margin：0 auto； 只能水平居中
2.border：边框的宽度
3.padding：文本到边框的距离
和margin的使用一致
4.content：文本的大小
""" 盒子模型 就以快递盒为例 快递盒与快递盒之间的距离(标签与标签之间的距离 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>
5.8、浮动
浮动就是将图片置于上方
float：left 浮动至左边
float：right 浮动至于右边
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大""" 只要是设计到页面的布局一般都是用浮动来提前规划好 <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>
