目录
CSS样式操作
标签长和宽
-
width, height
-
只有块级标签设置长和宽才有效
-
给行内标签设置长和宽没有任何作用, 行内标签的长宽只和其中的文本有关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>给标签设置长和宽</title>
<style>
.c1 {
height: 200px;
200px;
}
.c2 {
height: 400px;
400px;
}
</style>
</head>
<body>
<div class="c1">这是一个div块级标签</div>
<span class="c2">这是一个span行内标签</span>
</body>
</html>
字体样式
font-family字体font-size大小font-weight粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置字体</title>
<style>
.c1 {
font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 24px;
font-weight: lighter;
}
</style>
</head>
<body>
<p class="c1">这是一个p标签</p>
</body>
</html>
字体颜色
- color
- 英文单词
red - 十六进制颜色码, 直接用Pycharm自带的颜色提起器获取
#FF0000 - rgb(255, 0 ,0)
- rgba(255, 0, 0, 0.5) a代表颜色透明度
- 英文单词
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体颜色</title>
<style>
.c1 {
color: red;
}
.c2 {
color: #FF0000;
}
.c3 {
color: rgb(255, 0, 0);
}
.c4 {
color: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<p class="c1">这是一个p标签1</p>
<p class="c2">这是一个p标签2</p>
<p class="c3">这是一个p标签3</p>
<p class="c4">这是一个p标签3</p>
</body>
</html>
文字布局
text-align对齐left左对齐right右对齐center居中对齐justify
text-decorationunderline下划线overline上划线line-through中线none取消a标签默认的下划线 (通用)
text-indent缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字布局</title>
<style>
p {
text-align: left;
text-decoration: line-through;
text-indent: 48px;
font-size: 24px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div>
<p>sometime I rock sometime I roll, sometime it's not me in control.</p>
<p>sometime I rock sometime I roll, sometime it's not me in control.</p>
<p>sometime I rock sometime I roll, sometime it's not me in control.</p>
<a href="https://www.baidu.com">click me to search</a>
</div>
</body>
</html>
背景background
-
background-color背景颜色 -
background-img: url()背景图片, 默认铺满整区域 -
background-repeat: no-repeat;不平铺 -
background-repeat: repeat-x; -
background-repeat: repeat-y; -
background-position: 10px 50px;图片位置 -
background-attachment: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style>
div {
100%;
height: 400px;
background-color: black;
background-image: url("test.jpg");
background-repeat: no-repeat;
background-position: 10px 20px;
/*background: url("test.jpg") red no-repeat 10px 20px;*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
边框border
border- width 宽度
- color 颜色
- style 样式
border-radius: 50%;可以用来画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
div {
height: 200px;
border: red 2px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
display属性
display: inline;使块级标签具备行内标签属性display: block;使行内标签具备块级标签属性display: inline-block;既具备行内标签属性, 又具备块级标签属性sdisplay: none;隐藏标签, 且不占位置visibility: hidden;隐藏标签 但还占位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style>
div {
50px;
height: 50px;
background-color: red;
border: red 1px solid;
/*display: inline;*/
}
span {
50px;
height: 50px;
border: green 1px solid;
background-color: green;
/*display: block;*/
}
</style>
</head>
<body>
<div>这是一个div标签</div>
<span>这是一个span标签</span>
</body>
</html>
盒子模型
margin外边距, 标签与标签之间的距离margin: 0 auto
padding内边距, 内容与边框之间的距离padding: 0 auto;
border边框content内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.c1 {
50px;
height: 50px;
background-color: red;
/*margin-top: 20px;*/
/*margin-right: 20px;*/
/*margin-bottom: 20px;*/
/*margin-left: 20px;*/
/*margin: 10px;*/
/*margin: 10px 20px;*/ /*上下10, 左右20*/
margin: 10px 20px 30px; /*上10, 左右20, 下30*/
}
.c2 {
50px;
height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
浮动float
-
在CSS中, 任何元素都可以浮动
-
浮动的元素会脱离正常的文档流, 让出原来的位置
-
浮动会造成父标签塌陷
-
clear可以清除浮动带来的影响
/*添加一行空白的行将塌陷的标签撑起来*/
.clearfix: after {
content:"";
clear: both; /*表示左右两边都不能有浮动元素*/
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
body {
margin: 0;
}
.c1 {
100px;
height: 100px;
background-color: red;
float: left;
}
.c2 {
100px;
height: 100px;
background-color: green;
float: left;
}
/*浮动会造成父标签塌陷*/
.c3 {
border: 10px black solid;
}
.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
- 标签内的内容大于标签的大小
overflow: hidden;将溢出的直接隐藏overflow: scroll;左右上下滑动overflow: auto;上下滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style>
p {
height: 50px;
50px;
border: 1px black solid;
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
</style>
</head>
<body>
<p>same bed but feel just a little bit bigger now </p>
</body>
</html>
定位position
-
所有标签的位置默认都是静态的, 无法移动
position: static -
relative相对定位, 相较于标签原来的位置移动 -
absolute绝对定位, 相较于已经定位过的标签 (position不是static) 的父标签移动 -
fixed固定定位, 相对于浏览器窗口移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style>
.c1 {
100px;
height: 100px;
background-color: red;
position: relative;
top: 100px;
left: 100px;
}
.c2 {
100px;
height: 100px;
background-color: green;
position: absolute;
bottom: 100px;
right: 100px;
}
.c3 {
80px;
height: 20px;
border: 1px black solid;
position: fixed;
right: 100px;
bottom: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
<div class="c3">回到顶部</div>
</body>
</html>
是否脱离文档流
-
脱离 (会让出位置)
- 浮动
- 绝对定位
- 固定定位
-
不脱离
- 相对定位
Z-index
- Z-index表示标签的层叠关系, 值越大, 标签就在最上层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.cover {
background-color: rgba(128, 128, 128, 0.5);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.model {
background-color: white;
position: fixed;
400px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
z-index: 1000;
}
</style>
</head>
<body>
<div>bottom page</div>
<div class="cover"></div>
<div class="model">
<form action="">
<p>username:
<input type="text">
</p>
<p>password:
<input type="password">
</p>
<p>
login<input type="submit">
</p>
</form>
</div>
</body>
</html>
不透明opacity
- 既可以调颜色也可以调字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>opacity</title>
<style>
.c1 {
background-color: rgba(255, 0, 0 , 0.5);
opacity: 0.2;
}
.c2 {
background-color: green;
opacity: 0.2;
}
</style>
</head>
<body>
<p class="c1">rgba和opacity结合使用</p>
<p class="c2">opacity调整的是全局不透明度</p>
</body>
</html>