文章目录

CSS-属性、样式调节
- 选择器优先级
- 宽和高
- 字体属性
- 文字属性
- 背景属性
- 背景图片和应用案例
- 边框
- 画圆
- display属性
- 盒子模型
- 浮动
- - 浮动的缺陷
  - 解决方法:
- 溢出
- - 圆形头像示例
- 定位(position)
- - 相对定位 relative
  - 绝对定位 absolute
  - 固定定位 fixed
- 是否脱离文档流
- - 哪些状态是脱离正常文档流的
  - 不脱离
  - 脱离
- z-index模拟
- 透明度

CSS-属性、样式调节

选择器优先级

选择器相同，遵循就近原则；
选择器不同

行内–>id选择器–>类选择器–>标签选择器

除此之外还可以通过添加 !importrant方式来强制让样式生效,但并不推荐使用,因为使用过多会导致样式文件混乱不堪,不宜维护.

语法举例:.c1 { color: blue !important;}

宽和高

宽和高.只能给块儿级标签设置;行内标签是无法设置宽高的.

width:宽

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;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

快递盒
快递盒与快递盒之间的距离---标签与标签之间的距离---外边距(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>-->
<!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
<!--</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>