css样式操作
给标签设置长宽
只有块级标签才可以设置长宽，行内标签设置了没有任何作用（仅仅只取决于内部文本值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 400px;
}
span {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>
div
</div>
<span>span</span>
</body>
</html>
字体属性
font-family: 字体类型
font-size: 字体大小
font-weight: 字体粗细
值|描述
:-:|:-:
normal|默认值，标准粗细
bold|粗体
bolder|更粗
lighter|更细（***************）
100~900|设置具体粗细，400等同于normal，而700等同于bold
inherit|继承父元素字体的粗细值
color: 字体颜色
颜色英文 red
06a0de 直接用python提供的取色器即可
rgb(1,1,1) 可以利用截图软件获取三基色数字
rgba(128,128,128,0.6) 最后一个数字，只能用来调节颜色的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif ;
font-size: 24px;
font-weight: lighter;
color: lime;
}
</style>
</head>
<body>
<p>写教案就发你能否的男女我我佛</p>
</body>
</html>
文字属性
a {
text-decoration:none;取消a标签默认的下划线
}
text-align: 文本内容对齐方式
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |
text-decoration 给文字添加特殊效果
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本 |
| underline | 定义文本下的一条线 |
| overline | 定义文本上的一条线 |
| line-through | 定义穿过文本下的一条线 |
| inherit | 继承父元素的text-decoration属性的值 |
text-indent： 首行缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align: center;
text-decoration: underline;
font-size: 24px;
text-indent: 48px;/*是字体大小的双倍*/
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p>书里说 生命中许多事情 沉重婉转至不可说 </p>
<a href="#">书里说 生命中许多事情 沉重婉转至不可说 </a>
</body>
</html>
背景属性
背景图片，默认是铺满整个区域的
通常一个页面上的一个个的小图标并不是单独的，而是一张非常大的图片，该图片上有网址所能用到的所有小图标，通过控制背景图片的位置来显示不同的图标样式
background-color: 背景颜色
background-image: 背景图片
background-repeat: 平铺
| 值 | 描述 |
|---|---|
| repeat | 默认值，背景图片平铺满整个区域 |
| no-repeat | 不平铺 |
| repeat-x | 只在x轴平铺 |
| repeat-y | 只在y轴平铺 |
background-position: 图片位置，两个参数，第一个x轴，第二个y轴
支持简写 background
background-attachment:fixed; 背景固定不动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width:400px ;
height: 400px;
/*background-color: lime;*/
/*background-image:url("111.png");*/
/*background-repeat:no-repeat;*/
/*background-position: center center;*/
/*支持简写*/
background: lime url("111.png") no-repeat center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
边框
border-width: 粗细
border-style: 样式
| 值 | 描述 |
|---|---|
| none | 无边框 |
| dotted | 点状虚线边框 |
| dashed | 矩形虚线无边框 |
| solid | 实线边框 |
border-color: 颜色
可简写：border：solid red px;
可单独设置某一边的样式
border-top: 上边
border-left: 左边
border-right：右边
border-bottom：下面
border-radius: 画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
border: 2px red solid;
/*border-top:2px red solid ;*/
/*border: 2px dot-dash;*/
}
</style>
</head>
<body>
<p>书里说 生命中许多事情 沉重婉转至不可说</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid red;
background-color: red;
height:400px ;
width: 400px;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
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: red;
border: 5px solid lime;
display: inline;
}
.c2 {
border: 5px solid red;
display: block;
height: 400px;
width: 400px;
}
.c3 {
display: inline-block;
border: 5px solid greenyellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="c1">书里说 生命中许多事情 沉重婉转至不可说</div>
<span class="c2">书里说 生命中许多事情 沉重婉转至不可说</span>
<span class="c3"></span>
<span class="c3"></span>
<div style="visibility: hidden">111</div>
222
</body>
</html>
盒子模型
谷歌浏览器body默认有8px外边距
body {
margin:0px;
}
以快递盒为例
1.两个快递盒之间的距离（标签与标签之间的距离） 外边距（margin)
2.快递盒盒子的厚度（边框border) 边框（border）
3.快递盒的物品距离内边框的距离（内部文本与内边框之间的距离） 内边距（内填充）padding
4.物品的大小（文本大小） 内容（content)
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; 顺时针 margin:0 auto;只能左右居中 不能上下居中 padding简写规律与margin一样 padding-top: 10px; padding-left: 20px; padding-bottom: 50px; padding-right: 100px; padding: 40px; padding: 40px 80px; padding: 40px 80px 120px; padding: 40px 80px 120px 10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body {*/
/*margin: 0px;*/
/*}*/
.c1 {
border: 5px solid red;
/*height: 100px;*/
/*width: 100px;*/
padding: 55px;
}
</style>
</head>
<body>
<div class="c1">
<div id="d1" style="border: 3px solid red;background-color: green;width: 50px;height:50px ;margin: 0 auto"></div>
</div>
</body>
</html>
浮动 float
在css中，任何元素都可以浮动
浮动的元素是脱离正常文档交流的（原来的位置会让出）
浏览器会优先展示文本内容
float:
left 左浮动
right 右浮动
none 默认值，不浮动
浮动带来的影响：
会造成父标签塌陷
clear 可以清楚浮动带来的影响
left 左边不允许浮动元素
right 右边
none 允许浮动元素出现在两侧
.ckearfix:after {
content:'';
clear:both;左右两边都不能有浮动的元素
display:block;
}那个父标签塌陷了，就给谁加clearfix这个类属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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;
}
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
</style>
</head>
<body>
<div class="c3 clearfix">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
溢出overflow
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 50px;
width: 50px;
border: 3px solid red;
/*overflow: hidden;*/
overflow: scroll;
}
</style>
</head>
<body>
<div>asdfghjklsdfghjklasdfghjklsdfghjkdfghjklsdfghjksdfghjk</div>
</body>
</html>
圆形头像
<!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="222.jpg" alt="">
</div>
</body>
</html>
定位
所有的标签默认都是静态的 无法改变位置
position:static
必须将静态的状态修改成定位之后
相对定位（了解） relative
相对于标签原来的位置移动
绝对定位（小米的购物车）absolute
相对于已经对位过（只要不是static都可以 relative）的父标签 再定位
固定定位 fixed
相对于浏览器窗口 固定在某个位置不动
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.c2 {*/
/*border: 5px solid black;*/
/*background-color: pink;*/
/*position: fixed;*/
/*bottom: 50px;*/
/*right: 50px;*/
/*}*/
.c1 {
width: 100px;
height: 100px;
background-color: gold;
position: relative;
left: 200px;
top: 200px;
}
.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;*/
/*}*/
</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>
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;
height: 2000px;
width: 2000px;
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 既可以调颜色也可以调字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
background-color: rgba(128,128,128,0.4);
opacity: 0.2;
}
.c2 {
opacity: 0.2;
background-color: red;
}
</style>
</head>
<body>
<p class="c1">111</p>
<p class="c2">222</p>
</body>
</html>