CSS二之调节样式
CSS二之调节样式
一、补充
- 选择器优先级补充
1.选择器相同 就近原则
2.选择器不同
行内 > id选择器 > 类选择器 > 标签选择器
除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!important会使样式文件混乱不易维护。
万不得已可以使用!important
- mycss1.css
/*p {*/
/* color: green;*/
/*}*/
#d1 {
color: red;
}
- 选择器优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <style>-->
<!-- p {-->
<!-- color: red;-->
<!-- }-->
<!-- </style>-->
<!-- <link rel="stylesheet" href="mycss1.css">-->
<style>
/*.c1 {*/
/* color: blue;*/
/*}*/
/*p {*/
/* color: deeppink;*/
/*}*/
#d1 {
color: red;
}
</style>
</head>
<body>
<!--<p style="color: aqua">今天周五啦 马上要放假啦 好开心啊</p>-->
<p id="d1" class="c1" style="color: yellow">今天周五啦 马上要放假啦 好开心啊</p>
<!--1、选择器相同 引入方式不同 就近原则-->
<!--2、选择器不同 引入方式相同-->
</body>
</html>
二、CSS调解样式
- 宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 400px;
}
span {
width: 200px;
height: 400px;
}
</style>
</head>
<body>
<div style="color: deeppink">
效率第一
</div>
<span style="color: darkorange">
坚持就是胜利
</span>
</body>
</html>
- 字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family: "Microsoft New Tai Lue", monospace;
font-size: 48px;
font-weight: lighter;/字重/
/*color: yellow;*/
/*color: #ffffff;*/
/*color: rgb(255,103,0);*/
color: rgba(255,100,0,0.4);/*多了个透明度*/
}
</style>
</head>
<body>
<p>床上明月光...地上鞋俩双...啊床受不了</p>
</body>
</html>
- 文字属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*text-align: justify; !*两端对齐*!*/
/*text-decoration: underline; !*文本装饰下划线*!*/
/*text-decoration: line-through; !*定义穿过文本下的一条线。*!*/
text-decoration: overline;/*定义文本上的一条线。*/
font-size: 16px; /*字体大小*/
text-indent: 32px; /*首行缩进2个字符*/
}
a {
text-decoration: none;/*默认。定义标准的文本*/
color: yellow;
}
</style>
</head>
<body>
<p>加油 努力 奋斗</p>
<a href="http://www.mzitu.com">点我哦有你好看</a>
</body>
</html>
- 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/* background-color: black;*/
/* color: white;*/
/*}*/
.c1 {
width: 1000px;
height: 1000px;
/*background-color: red;*/
/*background-image: url("111.png");*/
/*!*background-repeat: no-repeat;!*不填充整个页面*!*!*/
/*!*background-repeat: repeat-x;!*只填充x轴*!*!*/
/*background-repeat: repeat-y;!*只填充y轴*!*/
/*background-position: 100px 10px;!*第一个调节左右 第二个调节上下*!*/
/*支持简写*/
background: center center url("111.png") yellow no-repeat;
}
</style>
</head>
<body>
<div style="font-size: 32px" class="c1">啊亚峰真的好帅啊</div>
</body>
</html>
- 图片背景应用案列之图片背景固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-image: url("111.png");
background-attachment: fixed;/*将图片固定在背景中*/
}
</style>
</head>
<body>
<div style="height: 800px;background-color: red"></div>
<div style="height: 800px;background-color: grey"></div>
<div style="height: 800px" id="d1"></div>
<div style="height: 800px;background-color: yellow"></div>
</body>
</html>
- 边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*border: dotted;!*点的造型*!*/
/*border-color: red;!*边框颜色*!*!*/
/*border-width: 10px;!*边框粗细*!*/
/*border-left: solid;!*实的*!*/
/*border-right: dashed;!*矩形虚线边框*!*/
/*border-top: dotted;*/
/*border-bottom: solid;*/
/*border-left-color: deeppink;*/
/*!*边框有四边 每一边都可以设置独有的样式 颜色 粗细*!*/
/*简写*/
border: solid 3px red;/*只要把参数写进去就可以 不需要考虑顺序*/
}
div {
height: 500px;
width: 500px;
border: 3px solid red;
}
span {
height: 200px;
width: 200px;
border: 5px solid green;
}
</style>
</head>
<body>
<p style="font-size: 32px; color: orange">
啊今天出太阳了啊，好开心啊
</p>
<div style="font-size: 32px; color: green">加油啊，坚持坚持再坚持</div>
<span style="font-size: 32px; color: blue">每天都要被自己帅醒好烦啊</span>
</body>
</html>
- 画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 200px;
width: 200px;
border-radius: 50%;/*画圆*/
background-image: url("111.png");
background-repeat: no-repeat;
background-position: 100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
- display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 50px;width: 50px;background-color: red;display: inline">
啊大家好啊
</div>
<div style="height: 50px;width: 50px;background-color: green;display: inline">
我爱家人，我爱祖国
</div>
<span style="background-color: red;height: 100px;width: 100px;display: inline-block">我是span</span>
<span style="background-color: green;height: 100px;width: 100px;display: inline-block">我是span</span>
<!--inline-block能够让一个标签即有快二级标签可以设置长宽的特点 又有行内标签在一行展示的特点-->
<div>div1</div>
<!-- <div style="display: none">div2</div>-->
<div style="visibility: hidden">div2</div>
<div>div3</div>
<!--display: none隐藏标签 并且标签所占的位置也要让出来-->
</body>
</html>
- 盒子模型
- 理论知识
盒子模型
快递盒
快递盒与快递盒之间的距离 标签与标签之间的距离 外边距(margin)
快递盒盒子的厚度 标签的边框 边框(border)
快递盒里面的物体到里面盒子的距离 标签内部文本内容到边框的距离 内边距/内填充(padding)
快递盒内容的物体大小 标签内部的文本内容 内容(content)
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0; /*取消body标签自带的8px的外边距*/
}
/*div {*/
/* border: 5px solid red;*/
/*}*/
.c1 {
height: 100px;
width: 100px;
background-color: red;
/*margin-bottom: 50px;!*距离下面50,若俩个都有以大的为主*!*/
/*margin-left: 100px;*/
/*margin: 20px; !*上下左右*!*/
/*margin: 20px 40px; !*第一个是上下 第二个是左右*!*/
/*margin: 20px 40px 60px; !*上 左右 下*!*/
margin: 20px 40px 60px 80px; /*上 右 下 左 顺时针*/
/*margin: 0 auto; !*水平居中*!*/
}
.c2 {
margin-top: 20px;/*距离上面20*/
height: 100px;
width: 100px;
background-color: green;
}
.c3 {
border: 3px solid black;
height: 400px;
width: 400px;
/*padding-top: 20px;*/
/*padding-left: 40px;*/
/*padding: 20px;*/
padding: 20px 40px;
/*padding: 20px;*/
/*padding: 20px;*/
/*padding跟margin简写规律一致*/
}
p {
margin: 0;
}
ul {
padding-left: 0;
}
</style>
</head>
<body>
<div>祖国万岁</div>
<div class="c3">
<div class="c1" id="d1"></div>
<div class="c2" id="d2"></div>
<p>中国我爱你</p>
<p>中国我爱你</p>
<p>中国我爱你</p>
<p>中国我爱你</p>
<p>中国我爱你</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
</body>
</html>
- 浮动理论知识
浮动的元素是脱离正常文档流的 自身多大就会占多大 不再有独占一行的概念
浮动多用于页面的前期布局(!!!!!!!)
浮动的缺陷
浮动会造成父标签塌陷的问题
clear属性
专门用来清除浮动所带来的负面影响 父标签塌陷的问题
清除浮动带来的影响 你只需要记住一个结论
在写页面之前 先定义好清除浮动的css代码
.clearfix:after {
content: "";
display: block;
clear: both;
}
结论:谁塌陷了 就给谁加上clearfix样式类
浏览器默认是优先展示文本内容的
- 演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
height: 100px;
width: 100px;
background-color: red;
float: left;/*向左浮动*/
}
.c2 {
height: 100px;
width: 100px;
background-color: green;
float: right;/*向右浮动*/
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>
- 浮动的简单应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.left-menu {
background-color: #4e4e4e;
width: 20%;
height: 1000px;
float: left;
}
.right-menu {
background-color: wheat;
width: 80%;
height: 2000px;
float: right;
}
</style>
</head>
<body>
<div class="left-menu"></div>
<div class="right-menu"></div>
</body>
</html>
- 浮点带来的影响以及解决方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
#d1 {
border: 3px solid black;
}
.c1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.c2 {
height: 100px;
width: 100px;
background-color: green;
float: left;
}
.c3 {
height: 150px;
width: 100px;
background-color: orange;
}
.clearfix:after {
content: '';
display: block;
clear: both;/*解决浮点带来的影响*/
}
</style>
</head>
<body>
<div id="d1" class="clearfix">/*想解决哪里浮点带来的影响就在后面加上class="clearfix"*/
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">希望香港早日恢复秩序</div>
</div>
</body>
</html>
- 溢出属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 50px;
width: 50px;
border: 1px solid black;
/*overflow: auto; !*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*!*/
overflow: scroll; /*如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。*/
/*overflow: hidden; !*内容会被修剪，并且其余内容是不可见的。*!*/
/*overflow: visible ; !*默认值。内容不会被修剪，会呈现在元素框之外*!*/
}
</style>
</head>
<body>
<div class="c1">
每天都要元气满满哟
每天都要元气满满哟
每天都要元气满满哟
每天都要元气满满哟
每天都要元气满满哟
</div>
</body>
</html>
- 圆形图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
background-color: antiquewhite;
}
.c1 {
height: 300px;
width: 300px;
border-radius: 50%;
border: 5px solid white;
overflow: hidden;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="111.png" alt="">
</div>
</body>
</html>
- 定位理论知识
所有的标签默认情况下都是静态的(static) 无法做位置的修改
如果你想要修改标签位置 你需要先将静态改为可以修改的状态
相对定位 relative
相当于标签原有的位置做偏移
了解即可
绝对定位 absolute
相当于已经定位过的(static>>>relative)父标签做偏移
eg:
小米购物车
固定定位 fixed
相当于浏览器窗口固定在某个位置始终不变
eg:
回到顶部
- 定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
height: 100px;
width: 100px;
background-color: red;
/*position: static; !*默认是静态值*!*/
position: relative; /*相对定位*/
left: 100px;
top: 100px;
}
.c2 {
height: 50px;
width: 100px;
background-color: green;
position: relative; /*相对定位*/
}
.c3 {
position: absolute; /*绝对定位*/
height: 200px;
width: 200px;
background-color: orange;
left: 100px;
top: 50px;
}
.cc {
height: 50px;
width: 100px;
background-color: #4e4e4e;
color: white;
position: fixed; /*固定定位*/
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
<div class="c3">空空的 什么都没有...</div>
</div>
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: orange"></div>
<div class="cc">回到顶部</div>
</body>
</html>
- 验证那些事脱离文档流
验证这个标签原来所占用的位置还在不在
浮动
定位
不脱离
相对定位
脱离
脱离文档流
绝对定位
固定定位
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
background-color: red;
height: 50px;
width: 50px;
/*position: relative;*/
}
.c2 {
background-color: green;
height: 50px;
width: 50px;
/*position: absolute;*/
position: fixed;
bottom: 20px;
right: 20px;
}
.c3 {
background-color: orange;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
- z-index
z-index
控制z轴的距离
透明度
optacity既可以该颜色也可以改文本
rgba只能该颜色
- 演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.modal {
background-color: #808080;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 999;
opacity: 0.4;/*透明度*/
}
.form {
background-color: white;
height: 200px;
width: 100px;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
margin-top: -100px;
margin-left: -50px;
}
</style>
</head>
<body>
<div>我是最底下的那个</div>
<div class="model"></div>
<div class="form"></div>
</body>
</html>
- 透明度
optacity既可以该颜色也可以改文本
rgba只能该颜色
- 演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
background-color: rgba(128,128,128);
}
.c2 {
background-color: rgb(128,128,128);
opacity: 0.4;
}
</style>
</head>
<body>
<div class="c1">哇塞透明了啊</div>
<div class="c2">哇塞透明了啊</div>
</body>
</html>
Only you can control your future
You're not alone. You still have family,peopel who care for you and want to save you.
