给标签设置长宽
只有块儿级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本值)
字体大小
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 24px; 字体大小
font-weight: lighter; 字体粗细
字体颜色 color后面可以跟多种颜色数据
颜色英文 red color: 'red';
#06a0de 直接用pycharm提供的取色器即可 color: #06a0de;
rgb(1,1,1) 可以利用截图软件获取三基色数字,数字范围只能是0~255 color: rgb(0,128,128);
rgba(0,128,128,0.9) 最后一个数字 只能用来调节颜色的透明度（0,1）越小，越透明。 color: rgba(0,128,128,0.9);
文字属性
文字对齐
text-align: center; 居中
text-align: left; 左对齐
text-align: right; 右对齐
text-align: justify;
文字装饰
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 之间划掉，类似 s
text-decoration: none 用处：取消a标签默认的下划线(即取消超链接下面的下划线)
font-size: 24px;
text-indent: 48px; 字体缩进2格
背景图片 默认是铺满整个区域
div {
width: 400px;
height: 400px;
background-color: orange;
background-image: url("111.png"); 放入图片地址 如果div 大于图片大小，默认图片自动复制铺满
background-repeat: no-repeat; 不平铺
background-repeat: repeat-x; x轴，水平方向复制铺满
background-repeat: repeat-y; y轴，水平方向复制铺满
background-position: center center; 左右上下居中
background-position: 10px 50px; 第一个参数是x轴 第二个参数y轴
支持简写：
background-attachment:fixed 图片固定在该处
background: url("111.png") red no-repeat center center;
}
通常一个页面上的一个个的小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图标样式
边框
border 后面写三个参数：颜色，字体，样式 与位置没有关系
border-top: 3px solid red; 上边框 solid实线边框
border-left: 1px dotted green; 左边框 dotted点状虚线边框
border-right: 5px dashed blue; 右边框 dashed矩形虚线边框
border-bottom: 10px solid pink; 下边框
border-bottom: yellow 10px dotted; 与位置没有关系
border: solid 10px red; 也可以简写（四边都一致，但不能单独调某一边）
border-style: dot-dash;
border-color: ;
可以单独设置 样式 颜色 粗细
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
例子：画圆
div {
border: 1px solid black;
background-color: red;
height: 400px;
width: 400px;
width: 800px; 长宽不一样，画出来的是椭圆
border-radius: 20px; 四个角都是圆角
border-radius: 50%;
}
display：
inline 将块儿级标签变成行内标签
block 能够将行内标签 也能设置长宽和独占一行
inline-block 即可以设置长宽 也可以在一行展示
display:none 隐藏标签 并且标签原来占的位置也没有了
visibility:hidden 隐藏标签 但是标签原来的位置还在
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 50px; height: 50px; background-color: red; border: 3px solid red; display: inline; /*将快儿级标签变成行内标签*/ } .c2 { width: 50px; height: 50px; background-color: green; border: 3px solid green; display: inline; /*将快儿级标签变成行内标签*/ } .c1 { border: 5px solid red; display: block; /*让行内标签 能够设置长宽 并且能够独占一行*/ height: 400px; width: 400px; } .c2 { border: 5px solid green; display: block; /*让行内标签 能够设置长宽 并且能够独占一行*/ } .c1 { display: inline-block; /*即可以设置长宽 也可以在一行展示*/ border: 3px solid red; width: 200px; height: 100px; } .c2{ display: inline-block; /*即可以设置长宽 也可以在一行展示*/ border: 3px solid green; width: 200px; height: 100px; } </style> </head> <body> <!--<div class="c1">dsadasdsad</div>--> <!--<div class="c2">sdasadsadsadsadsdad</div>--> <!--<span class="c1">span</span>--> <!--<span class="c2">span</span>--> <!--标签既可以设置长宽 也能够全部在一行展示(既有块儿级标签的特点也有行内标签的特点)--> <!--<span class="c1">span</span>--> <!--<span class="c2">span</span>--> <!--<div style="display: none">111</div>--> <!--<div>222</div>--> <div style="visibility:hidden">111</div> <div>222</div> </body> </html>
盒子模型
谷歌浏览器body默认有8px外边距
body {
margin:0px;
}
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离) 外边距(margin)
2.快递盒盒子的厚度(边框border) 边框(border)
3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离) 内边距(内填充) padding
4.物品的大小(文本大小) 内容content
margin:
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
/*margin: 15px; !*只写一个参数 上下左右全是*!*/
/*margin: 10px 20px; !*第一个控制的上下 第二个是左右*!*/
/*margin: 10px 20px 30px; !*第一个控制的上 第二个是左右 第三个是下*!*/
margin: 10px 20px 30px 40px; /*上 右 下 左*/
padding:
padding简写规律跟margin一样
#d1 {margin: 0 auto;} 只能左右居中 不能上下居中
浮动(*****)
float
在 CSS 中，任何元素都可以浮动。
.c1 {
width: 100px;
height: 100px;
background-color: red;
float: left;} 向左浮动，或者向右浮动
浮动的元素 是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容(******)
浮动带来的影响
会造成父标签塌陷(口袋瘪了)
如何解决父标签塌陷问题？？？
clear 清除浮动带来的影响
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block; 变成块级标签，独占一行
}
哪个父标签塌陷了 就给谁加clearfix这个类属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style> body { margin: 0; } .c1 { width: 100px; height: 100px; background-color: red; float: left; } .c2 { width: 100px; height: 100px; background-color: greenyellow; float: left; } .c3 { border: 3px solid black; } /*.c4 {*/ /*background-color: yellow;*/ /*height: 100px;*/ /*}*/ /*.c5 {*/ /*height: 100px;*/ /*}*/ /*公共样式*/ .clearfix:after { content: ''; clear: both; /*左右两边都不能有浮动的元素*/ display: block; } </style> </head> <body> <div class="c3 clearfix"> <div class="c1"></div> <div class="c2"></div> <!--<div class="c5"></div>--> <!--<div style="clear: left"></div>--> </div> <!--<div class="c4"></div>--> <!--<div class="c3" style="background-color: pink;width: 100px;height: 100px">div</div>--> </body> </html>
浮动场景的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } .c1 { float: left; width: 20%; height: 1000px; background-color: grey; } .c2 { background-color: green; height: 1000px; width: 80%; float: right; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html>
overflow溢出属性
div {
height: 50px;
width: 50px;
border: 3px solid black;
overflow: hidden; /*溢出的直接隐藏*/
overflow:scroll; 左右和上下滚动条
overflow: auto; 只有上下滚动条
}
原型头像
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: darkgray; } .c1 { height: 120px; width: 120px; border: 5px solid white; border-radius: 50%; overflow: hidden; } img { width: 100%; } </style> </head> <body> <div class="c1"> <img src="111.png" alt=""> </div> </body> </html>
定位
所有的标签默认都是静态的 无法改变位置
position: static; 默认静态
必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置 移动
绝对定位 absolute
相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位(******)
.c3 {
position: absolute;
height: 200px;
width: 800px;
top: -50px; 此时是相对于父标签来说的
left: 200px;
background-color: pink;
}
固定定位(回到顶部) fixed
相对于浏览器窗口 固定在某个位置不动
.c2 {
border: 5px solid black;
background-color: pink;
position: fixed;
bottom: 50px; 此时是相对与浏览器窗口来说的
right: 50px;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0; } .c1 { width: 100px; height: 100px; background-color: gold; position: relative; left: 100px; top: 100px; } .c2 { position: relative; /*将c2从一个不是定位标签变成已经定位过的标签*/ height: 100px; width: 200px; background-color: black; } .c3 { position: absolute; height: 200px; width: 800px; top: -50px; left: 200px; background-color: pink; } .c2 { border: 5px solid black; background-color: pink; position: fixed; bottom: 50px; right: 50px; } </style> </head> <body> <!--<div class="c1"></div>--> <!--<div class="c2">--> <!--<div class="c3"></div>--> <!--</div>--> <div style="height: 10000px;background-color: darkgray" class="c1"></div> <div style="height: 10000px;background-color: green" class="c1"></div> <div style="height: 10000px;background-color: red" class="c1"></div> <div class="c2">回到顶部</div> </body> </html>
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
z-index 控制Z轴
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cover { background-color: rgba(128,128,128,0.4); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; } .modal { background-color: white; z-index: 1000; position: fixed; height: 200px; width: 400px; top: 50%; left: 50%; margin-top: -100px; margin-left: -200px; } </style> </head> <body> <div>我是最底下的被压着那个</div> <div class="cover"></div> <div class="modal"> <form action=""> <p>username: <input type='text'> </p> <p>password: <input type='text'> </p> <input type="submit"> </form> </div> </body> </html>
opacity
既可以调颜色 也可以调字体
.c1 {
background-color: rgba(128,128,128,0.4); 只影响背景色
}
.c2 {
opacity: 0.2; 背景和文本都影响
background-color: red;
}