文章目录
CSS-属性、样式调节
选择器优先级
-
选择器相同，遵循就近原则；
-
选择器不同
行内–>id选择器–>类选择器–>标签选择器
除此之外还可以通过添加 !importrant方式来强制让样式生效,但并不推荐使用,因为使用过多会导致样式文件混乱不堪,不宜维护.
语法举例:.c1 { color: blue !important;}
宽和高
宽和高.只能给块儿级标签设置;行内标签是无法设置宽高的.
宽
heigth:高
字体属性
调节文本颜色两种方式
-
color: yellow;#颜色 color: #ffffff;#颜色 color: rgb(255,103,0);#颜色深浅 color: rgba(255,103,0,0.4);#颜色深浅 -
font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;#字体类型 font-size: 16px; #字体型号 font-weight: bold; #字体粗细 color: rgba(255,103,0,0.4); #颜色深浅
文字属性
p {
text-align: justify;#对其方式
text-decoration: underline;#下划线在文字下方
text-decoration: overline;#下划线在文字上方
text-decoration: line-through;#下划线穿过文字
font-size: 16px;#文字大小
text-indent: 32px;#首行缩进大小
}
a {
text-decoration: none;#控制下划线方式
color: yellow;#字体颜色
}
背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: black;#背景色
color: white;#标签的字体色
}
.c1 {
width: 400px;#宽
height: 400px;#高
/*background-color: gray;*/#背景色
/*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>-->
<!-- 大空间的凯撒件打开-->
<!--</div>-->
<div class="c1"></div>
</body>
</html>
背景图片和应用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
background-image:#背景图片 url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
background-attachment: fixed;#背景--固定
}
</style>
</head>
<body>
<div style="height: 500px;background-color: red"></div>
<div style="height: 500px;background-color: gray"></div>
<div style="height: 500px" id="d1"></div>
<div style="height: 500px;background-color: yellow"></div>
</body>
</html>
边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*border-style: dotted; !*样式*!*/
/*border-color: red; !*边框颜色*!*/
/*border-width: 10px; !*边框粗细*!*/
/*border-left: solid;*/
/*border-right: dashed;*/
/*border-top: dotted;*/
/*border-bottom: solid;*/
/*border-left-color: deeppink;*/
/*边框有四边 每一边都可以设置独有的样式 颜色 粗细*/
#上面P标签边框的简写
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>
看的撒科技大厦考虑到金卡圣诞节快乐撒娇
</p>
<div>sakljdkasd</div>
<span>hdsakljdklsad</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-color: red;#圆背景色
background-image: url("111.png");#图片
background-repeat: no-repeat;#不平铺
}
</style>
</head>
<body>
<div></div>
</body>
</html>
display属性
display:显示
inline:排队
inline-block:内联块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 50px; 50px;background-color: red;display: inline">哟哟哟
</div>
<div style="height: 50px; 50px;background-color: green;display: inline">啊啊啊
</div>
<span style="background-color: red;height: 100px; 100px;display: inline-block">span</span>
<span style="background-color: green;height: 100px; 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
快递盒
快递盒与快递盒之间的距离---标签与标签之间的距离---外边距(margin)
快递盒盒子的厚度---标签的边框---边框(border)
快递盒里面的物体到里面盒子的距离---标签内部文本内容到边框的距离---内边距/内填充(padding)
快递盒内容的物体大小---标签内部的文本内容
<!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;*/
/*margin-left: 100px;*/
/*margin: 20px; #上下左右
/*margin: 20px 40px; #第一个是上下 第二个是左右
/*margin: 20px 40px 60px; #上 左右 下
/*margin: 20px 40px 60px 80px; #上 右 下 左 顺时针
/*margin: 0 auto; #水平居中
}
.c2 {
margin-top: 20px;
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>–>-->
<!--</div>-->
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</body>
</html>
浮动
浮动的元素是脱离正常文档流的 自身多大就会占多大 不再有独占一行的概念(浮动多用于页面的前期布局(!!!))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;#取消外边框默认的8
}
.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>
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;
/*float: left;*/
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="d1" class="clearfix">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">
sadkjajsdasjd
</div>
</div>
</body>
</html>
解决方法:
清除浮动带来的影响,只需要记住一个结论 ,在写页面之前 先定义好清除浮动的css代码 ;结论:谁塌陷了 就给谁加上clearfix样式类
.clearfix:after {content: "";display: block;clear: both;}
#浏览器默认是优先展示文本内容的(即文本内容不被浮动在上方的页面所影响)
溢出
内容超过文本框,会出现下拉条,或者修改文本框大小
<!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;#溢出自动调节
}
</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: 100px;
width: 100px;
border-radius: 50%;#圆占比
border: 1px solid white;#圆边框大小和圆背景色
/*background-image: url("111.png");*/
/*background-repeat: no-repeat;*/
overflow: hidden;#溢出的元素自动隐藏
}
img {
max-width: 100%;#图片在园内占比大小
}
</style>
</head>
<body>
<div class="c1">
<img src="111.png" alt="">
</div>
</body>
</html>
定位(position)
所有的标签默认情况下都是静态的(static) 无法做位置的修改
如果你想要修改标签位置 你需要先将静态改为可以修改的状态
关键字语法:position:relative/absolute/fixed
相对定位 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: 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轴的距离(类似弹出的登录小框)
<!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;#Y轴小于下面的页面,所以显示在下面的页面下面
opacity: 0.4;
}
.form {
background-color: white;
height: 200px;
width: 100px;
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;#Y轴
margin-top: -100px;
margin-left: -50px;
}
</style>
</head>
<body>
<div>我是最底下的那个</div>
<div class="modal"></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,0.4);
}#只能改该颜色
.c2 {
background-color: rgb(128,128,128);#既可以改颜色也可以改文本颜色
opacity: 0.4;
}
</style>
</head>
<body>
<div class="c1">阿萨德撒大家都</div>
<div class="c2">阿萨德撒大家都</div>
</body>
</html>