CSS关键点
写的位置：
<head> <meta charset="UTF-8"> <title>Title</title> <style> css样式所在 </style> </head>
注释：
/* 注释内容 */
id选择器：标签id对应样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1 { background-color: red; height: 48px; } </style> </head> <body> <div id="i1"></div> </body> </html>
class选择器：.样式名称
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 48px; } </style> </head> <body> <div class="c1"></div> </body> </html>
标签选择器：所有标签对应的应用样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: red; height: 48px; } </style> </head> <body> <div class="c1"></div> </body> </html>
层级选择器（关联选择器）:空格分隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span div{ background-color: red; height: 48px; } </style> </head> <body> <span> <div></div> </span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 div{ background-color: red; height: 48px; } </style> </head> <body> <span class="c1"> <div></div> </span> </body> </html>
组合选择器，逗号分隔
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1,.c2,.c3 div{ background-color: red; height: 48px; } </style> </head> <body> <span class="c1"></span> <div class="c2"></div> <div class="c3"></div> </body> </html>
属性选择器:对选择到的标签再通过属性进行一次筛选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type='text']{ width: 100px; height: 200px; } </style> </head> <body> <input type="text" /> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[n='alex']{ width: 100px; height: 200px; } </style> </head> <body> <input type="text" n="alex"/> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1[n='alex']{ width: 100px; height: 200px; } </style> </head> <body> <input class="c1" type="text" n="alex"/> </body> </html>
css优先级：标签上style优先，编写顺序，就近原则
标签上的style优先级最高，优先显示这个，stype标签里面的，越往下，优先级越高，这里c2在c1下方，所以c1相同样式不使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; color: white; } .c2{ font-size: 58px; color: black; } </style> </head> <body> <div class="c1 c2" style="color: #2b542c"></div> </body> </html>
css样式引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </head> <body> </body> </html>
css属性
边框：border，可以分上下左右
<!-- 边框大小为1，实线，红色 --> <div style="border: 1px solid red;"></div>
width 宽度
height:48px; 标签高度48px
font-size:16px; 字体大小
text-align:center; 水平居中
line-height:48px; 根据高度填写数值，这里会垂直居中
font-weight:blod 字体加粗
float 让标签浪起来，块级标签页可以堆叠
<!-- 将两个div标签放到同一行--> <div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 80%;background-color: black;float: left">2</div>
管不住子标签的时候，可以用下面的语句将标签弄出来
<div style="clear: both;"></div>
display
display:inline; 变成行内标签
display:block; 变成块级标签
display:none; 让标签消失
display:inline-block;
1.具有inline，默认自己又多少占多少
2.具有block，可以设置高度，宽度
<div style="background-color: red;display: inline">变成行内标签</div> <span style="background-color: red;display: block">变成块级标签</span>
position
position:fixed 固定页面某个位置（相对位置）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {#位置固定，相对路径，bottom离底部20px，right离右侧20px#} <div onclick="GoTop()" style="width: 50px;height: 50px;background-color: black;color: white; position: fixed; bottom: 20px; right: 20px; ">返回顶部</div> <div style="height: :5000px;background-color: #DDDDDD"></div> <script> function GoTop() { document.body.scrollTop = 0; } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 48px; background-color: black; color: #DDDDDD; position: fixed;/* 固定位置，下方三个组合，成为顶部菜单*/ top: 0; left: 0; right: 0; } .pg-body{ background-color: #DDDDDD; height: 5000px; margin-top: 48px;/* 离开头部48px*/ } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
position:absolute 固定页面某个位置（绝对位置）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 绝对位置的固定--> <div style="width: 50px;height: 50px;background-color: black;position: absolute;bottom: 0;right: 0">头部</div> <div style="height: 5000px;background-color: #DDDDDD">内容</div> </body> </html>
一般是relative + absolute使用（单独relative 没作用）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div> </div> <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px;background-color: black"></div> </div> </body> </html>
opacity: 0.5; 透明度，0为没有，1是完全遮盖
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="position: fixed;background-color: black;top: 0;left: 0;right: 0;bottom: 0; opacity: 0.5;"></div> <div style="height: 5000px;background-color: #DDDDDD"></div> </body> </html>
z-index:10 层级顺序 哪个值大，就在上面显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="z-index: 10; position: fixed;background-color:white;width: 400px;height: 500px; top: 50%;left: 50%;margin-left: -250px;margin-top: 200px /*组合成为居中*/ "></div> <div style="z-index: 9; position: fixed;background-color: black;top: 0;left: 0;right: 0;bottom: 0; opacity: 0.5;"></div> <div style="height: 5000px;background-color: #DDDDDD"></div> </body> </html>
overflow:hidden 图片或者其他超出div大小则隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: hidden"> <img src="1.jpg" /> </div> </body> </html>
overflow:auto 图片或者其他超出div大小则出现滚动条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 200px;width: 300px;overflow: auto"> <img src="1.jpg" /> </div> </body> </html>
padding:10px; 标签上下左右均为10px
padding:0 10px; 上下为0，左右为10px;
padding:0 10px 0 10px; 上右下左
hower:鼠标移动到这里，css样式生效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu:hover{ background-color: blue; } </style> </head> <body> <div style="height: 200px;width: 300px;overflow: auto;"> <a class="menu">鼠标移动到这里背景颜色变更</a> </div> </body> </html>
background-image:url('image/1.jpg'); # 默
认，div大，图片会重复访问，无论是水平还是垂
直（这个可以小图片，制作出页面的渐变色）
background-repeat(no-repeat) # 无叠加
background-repeat(repeat-x) # 只水平叠加
background-repeat(repeat-y) # 只垂直叠加
一张图片有多个图标使用的情况
background-position 10px 10px；
background-position-x 图片显示左右移动
background-position-y 图片显示上下移动
background:url('image/1.jpg' 10px; 20px; no-repeat)
# 相当于：
background-image:url('image/1.jpg');
background-position-x 10px；
background-position-y 20px
background-position-y
bxslider插件，可以做到循环播放
