css
class选择器
.名称{
...
}
<标签 class = "名称"> </标签>
备注：这里的注释是使用 /* 。。。 */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: #2459a2; height: 48px } .c1{ background-color: #2459a2; height: 10px } </style> </head> <body> <!-- 编写css样式 1.标签的style属性 2.id选择器（head里面写style样式以#开头） 3.以.开头的css样式，标签里用class对应 --> <div style="background-color: #2459a2;height: 48px">1</div> <div id = "i1">2</div> <div class="c1">3</div> <span class="c1">ddssdsfsfsafsdf</span> </body> </html>
标签选择器
/* 找到所有的div，让其背景变成黑色，字体颜色变成白色 这个叫标签选择器*/
div {
background: black;
color: white;
}
层级选择器
/*层级选择器
下面是sapn下的div才使用该样式
*/
span div{
background: green;
color: black;
}
/*
class为c2的时候，嵌入了div的才使用该样式
*/
.c2 div{
background: red;
color: green;
}
组合选择器
#i1,#i2,#i3{
height: 48px
}
.c1,.c3,.c4{
background-color: #2459a2;
height: 10px
}
属性选择器
/*属性选择器*/
input[type="text"]{width:100px;height:200px;}
input[n="alex"]{width:100px;height:200px;}
.c1[n="jack"]{width:100px;height:200px;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 这个是id选择器 #i1{ background-color: #2459a2; height: 48px } 组合选择器 #i1,#i2,#i3{ background-color: #2459a2; height: 48px } */ .c1{ background-color: #2459a2; height: 10px } .c1,.c3,.c4{ background-color: #2459a2; height: 10px } /* 找到所有的div，让其背景变成黑色，字体颜色变成白色 这个叫标签选择器*/ div { background: black; color: white; } /*层级选择器 下面是sapn下的div才使用该样式 */ span div{ background: green; color: black; } /* class为c2的时候，嵌入了div的才使用该样式 */ .c2 div{ background: red; color: green; } /*属性选择器*/ input[type="text"]{width:100px;height:200px;} input[n="alex"]{width:100px;height:200px;} .c1[n="jack"]{width:100px;height:200px;} </style> </head> <body> <!-- 编写css样式 1.标签的style属性 2.id选择器（head里面写style样式以#开头） 3.以.开头的css样式，标签里用class对应 --> <div style="background-color: #2459a2;height: 48px">1</div> <div id = "i1">2</div> <div class="c1">3</div> <!--层级选择器 span div --> <span class="c1">11111111 <div>22222222222222222222</div> </span> <div>88888888888888888888888888888888</div> <!--层级选择器 .c2 div --> <span class="c2">333333333333 <div>4444444444444</div> </span> <!-- 属性选择器,因为上述就描述了type="text"的属性选择器，所以密码框那个没有使用样式- input[type="text"]{width:100px;height:200px;} -> <input type="text"/> <input type="password"/> <!-- 上面自定义了一个属性选择器，所以这里会有样式 input[n="alex"]{width:100px;height:200px;} --> <input n = "alex"/> <!-- .c1[n="jack"]{width:100px;height:200px;}--> <input class="c1" n="jack"/> </body> </html>
css优先级
优先级：标签上的style有限，编写顺序，就近原则，越下方，越靠近
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background: red; color: white; } .c2{ font-size:30px; } .c3{ font-size:30px; color:black; } </style> </head> <body> <!-- 两种样式的内容不重叠的情况下，会将所有的样式应用--> <div class="c1 c2">两种样式的内容不重叠的情况下，会将所有的样式应用</div> <div>88888888888888</div> <div class="c1 c3" style="color:pink">css样式三种情况下，写在这里的style优先级最高，其次到上面样式中的越下方的顺序，优先级越高</div> <div>88888888888888</div> <div class="c1 c3">两种css样式情况下，上面排序下方的，优先级较高</div> </body> </html>
css的存在形式
独立一个文件存放css样式，然后其他HTML文件引用
<link rel="stylesheet" href="commons.css">
.c1 { background: red; color: white; } .c2 { font-size: 30px; } .c3 { font-size: 30px; color: black; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="commons.css"> </head> <body> <div class="c1 c2">两种样式的内容不重叠的情况下，会将所有的样式应用</div> </body> </html>
边框以及常用属性
宽度，样式，颜色 （border: 4px dotted red;）
<div style="border: 1px solid red;">div标签，边框大小为1，红色边框</div>
<div style="height:48px;width: 80%; border: 1px solid red;">div标签，边框大小为1，红色边框,高度为48，宽度占用80%（高度不要占用百分比，除非外面有限制高度的另外标签</div>
border: 1px solid red;边框大小以及颜色
font-size: 16px; 字体大小
text-align: center; 水平居中
line-height: 48px; 根据标签高度居中，一般标签多高，这里写多高，就是正中间
font-weight:bold; 字体加粗
height,高度
width，宽度，可以写像素，也可以写百分比
float：让标签浪起来，块级标签也可以堆叠
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 20%;background-color: red;float: left">使用float左占用同一行20%</div> <!-- <div style="width: 30%;background-color: black;float: left;color: white">使用float占用同一行30%</div> --> <div style="width: 50%;background-color: blue;float: right;color: white">使用float右占用同一行50%</div> </body> </html>
可以将块级的转换为内联，内联标签也可以转换为块级的
<div style="display: inline;">asdf</div>
<span style="display: block;">asdf</span>
display :inline-block;
具有inline，默认自己有多少占多少，也具有block，可以设置无法设置高度，宽度，padding，margin
display : None;让标签消失（这个就可以做到显示或者隐藏某些东西）
注意：
行内标签：无法设置高度，宽度，padding，margin
块级标签：可以设置高度，宽度，padding，margin
padding（内边距），margin(外边距）
margin-top
HTML默认是有边距的，所以去掉边距就加上style="margin:0"
回顾以及补充
CSS样式代码减少
自适应和改变大小变形
需要使用左右滚动条
宽度使用百分比
页面的最外层设置一个像素的宽度
自适应：media
图片默认是有边框的，IE会显示出来，这个要注意将边框改为0
css补充
position：
fixed =》固定在某个位置，这个是相对位置
<!-- position: fixed;固定位置 bottom:20px;离底部20像素 right: 20px;离右边20像素 --> <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;"> asdfasdf </div> <script> function GoTop(){ document.body.scrollTop = 0; } </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* position: fixed; top:0;离上方0像素 right: 0;离右边0像素 left: 0;离左边0像素 */ .pg-header{ height: 48px; background-color: black; color: #dddddd; position: fixed; top:0; right: 0; left: 0; } /* margin-top: 50px;与上标签间隔50像素，这样就不会被上面覆盖 */ .pg-body{ background-color: #dddddd; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
relative+absolute;绝对位置，固定了就不会变化（单独relative是没有效果的）
只有absolute的时候，第一次会定位，可以在指定位置，滚轮滚动时，不在了
<!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>
opcity:0.5 透明度
z-index：层级顺序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- display:none; 默认隐藏起来了 <div style="display:none;z-index:10; --> <div style="z-index:10; position: fixed; top: 50%; left:50%; margin-left: -250px; margin-top: -200px; background-color:white; height: 400px; width:500px; "> <input type="text" /> <input type="text" /> <input type="text" /> </div> <!-- <div style="display:none;z-index:9; position: fixed;background-color: black; --> <div style="z-index:9; position: fixed;background-color: black; top:0; bottom: 0; right: 0; left: 0; opacity: 0.5; "></div> <div style="height: 5000px;background-color: green;"> asdfasdf </div> </body> </html>
overflow
overflow: auto超过范围就出现滚动条
overflow: hidden 超过范围就隐藏起来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- overflow: auto超过范围就出现滚动条 --> <div style="height: 200px;width: 300px;overflow: auto"> <img src="1.jpg"> </div> <!-- overflow: hidden 超过范围就隐藏起来 --> <div style="height: 200px;width: 300px;overflow: hidden"> <img src="1.jpg"> </div> </body> </html>
hover：当鼠标移动到当前标签上时，才会生效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 0; left: 0; top: 0; height: 48px; background-color: #2459a2; line-height: 48px; } /* margin-top: 50px;往下走50像素，防止被上面的覆盖 */ .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } /* padding: 上 右 下 左 */ .pg-header .menu{ display: inline-block; padding: 0 10px 0 10px; color: white; } /*当鼠标移动到当前标签上时，以下css属性才生效*/ .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w">a</div> </div> </body> </html>
.pg-header .menu:hover{
background-color: blue;
}
background
<div style="background-image: url(icon_18_118.png)"></div>
默认div足够大的时候，图片会重复放（这样可以用很小的图片做出渐变颜色）
backgroud-repeat：no-repeat这样就能让图片不同行堆叠
backgroud-repeat：repeat-x 横向堆叠
backgroud-repeat：repeat-y 竖向堆叠
backgroud-position ；0px 0px
backgroud-position-x:0px 默认为0，
backgroud-position-y:0px 默认为0
当然，可以直接backgroud后面直接加值的简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 400px;" /> <!-- span是内联标签，默认高度宽度没用，所以加上display: inline-block;将其变成拥有块级标签的属性 然后利用外层的position: relative + 内层的position:absolute实现内标签相对于外标签的位置 --> <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;"></span> </div> </body> </html>
补充：页面布局
主站
后台管理布局：
左侧菜单跟随滚动条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理页面</title> <style> /* margin: 0;去掉边框间距 */ body{ margin: 0; } /* 设定公共样式，需要的时候，加上样式即可，不需要重复写 */ .left{ float: left; } .right{ float: right; } /* 头部菜单样式 */ .pg-header{ height: 48px; background-color: #2459a2; color: white; } /* 中间页面样式 position: absolute;固定标签，与position：relative配合使用 top: 48px; left:0; bottom: 0; width: 200px; background-color: #dddddd; */ .pg-content .menu{ position: absolute; top: 48px; left:0; bottom: 0; width: 200px; background-color: #dddddd; } /* 中间页面样式 overflow: auto;增加滚动条 */ .pg-content .content{ position: absolute; top: 48px; right:0; bottom:0; left: 200px; /*overflow: auto;*/ } </style> </head> <body> <!-- 头页面--> <div class="pg-header"></div> <!-- 中间页面--> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <div style="position: fixed;bottom: 0;right: 0;width: 50px;height: 50px;">返回顶部</div> <div style="margin: 0;background-color: purple"> <p style="margin: 0">ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> </div> </div> </div> <!-- 底部页面--> <div class="pg-footer"></div> </body> </html>
左侧以及上不动（这个布局用的较多）布局二比布局一多了overflow: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理页面</title> <style> /* margin: 0;去掉边框间距 */ body{ margin: 0; } /* 设定公共样式，需要的时候，加上样式即可，不需要重复写 */ .left{ float: left; } .right{ float: right; } /* 头部菜单样式 */ .pg-header{ height: 48px; background-color: #2459a2; color: white; } /* 中间页面样式 position: absolute;固定标签，与position：relative配合使用 top: 48px; left:0; bottom: 0; width: 200px; background-color: #dddddd; */ .pg-content .menu{ position: absolute; top: 48px; left:0; bottom: 0; width: 200px; background-color: #dddddd; } /* 中间页面样式 overflow: auto;增加滚动条 */ .pg-content .content{ position: absolute; top: 48px; right:0; bottom:0; left: 200px; overflow: auto; } </style> </head> <body> <!-- 头页面--> <div class="pg-header"></div> <!-- 中间页面--> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <div style="position: fixed;bottom: 0;right: 0;width: 50px;height: 50px;">返回顶部</div> <div style="margin: 0;background-color: purple"> <p style="margin: 0">ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> <p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p><p>ddd</p> </div> </div> </div> <!-- 底部页面--> <div class="pg-footer"></div> </body> </html>
