选择器
1.标签上直接设置style属性
<p style="color: red">直接标签里面写</p>
2.id选择器
<style> #i1{ color: green; } </style> </head> <body> <p id="i1">以#开头命名</p> </body>
3.class选择器
<style> .c1{ color: green; } </style> </head> <body> <p class="c1">以点开头命名</p>
</body>
4.标签选择器
<style> p{ background-color: red; } </style> </head> <body> <p >以标签命名</p> </body>
5.关联选择器（层级选择器）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*中间用空格隔开*/ span div{ background-color: red; } </style> </head> <body> <div>第一层</div> <span> <div>span里面的div添加样式</div> </span> <div>第二层</div> </body> </html>
6.组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*中间用逗号隔开*/ h1,h2,h3{ background-color: #dddddd; } </style> </head> <body> <h1>第一个</h1> <h2>第二个</h2> <h3>第三个</h3> </body> </html>
7.属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[name="derek"]{ width: 20px; height: 20px; } </style> </head> <body> <input type="text" name="derek"> <input type="password" name="pwd"> </body> </html>
根据属性进行筛选匹配，只有name="derek"的input标签才匹配上对应的样式
引用方法
1.样式优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; color: white; } .c2{ background-color:black; } </style> </head> <body> <div class="c2 c1" style="color:palegreen" >第一层</div> </body> </html>
style优先级最大，其它的按编写顺序，越靠近越优先
2.外部样式引用方法
<link rel="stylesheet" href="common.css">
边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 48px; #边框高度 width: 80%; border: 1px dotted black; #边框宽度 样式 颜色 font-size: 30px; #字体大小 line-height: 48px; #设置跟边框高度值一样，里面的字会垂直居中 text-align: center; #水平居中 } </style> </head> <body> <div style="border: 1px solid red">第一个边框</div> <div class="c1">第二个边框</div> </body> </html>
浮动（float）
默认块级标签会独占一行，用float可以让块级标签浮动在一起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 20%; background-color: red; float: left; } .c2{ width:60%; background-color: black; float: right; } </style> </head> <body> <div class="c1">左边</div> <div class="c2">右边</div> </body> </html>
float实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ height: 38px; background-color: #dddddd; line-height: 38px; } .c2{ width: 98px; height: 30px; border: 1px solid green; float: left; } </style> </head> <body style="margin: 0 auto"> <div class="pg-header"> <div>收藏本站</div> <div> <a>登陆</a> <a>注册</a> </div> </div> <div style=" 300px;border: 1px solid red;"> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div class="c2"></div> <div style="clear:both"></div> </div> </body> </html>
注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线
display
<body> <!--改成行内标签--> <div style="display: inline;background-color: red">1</div> <!--改成块级标签--> <span style="display: block;background-color: red">2</span> <!--inline-block具有inline，默认自己有多少占多少--> <!--具有block,可以设置高度，宽度，padding,margin--> <span style="display: inline-block;background-color: blue">3</span> <!--默认不显示--> <div style="display: none">不显示</div> </body>
边距
1.外边距margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 1px solid red; height: 70px; } .c2{ background-color: green; height: 50px; /*margin-top: 25px;*/ } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> </body> </html>
注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px
2.内边距padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border: 1px solid red; height: 70px; } .c2{ background-color: green; height: 50px; padding-top: 10px; } </style> </head> <body> <div class="c1"> <div class="c2"></div> </div> </body> </html>
注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px
position
1.position:fixed
-->固定在页面的某个位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 50px; height: 50px; background-color: black; color: white; position: fixed; bottom: 20px; right: 20px; } .c2{ height: 5000px; background-color: #eee; } </style> </head> <body> <div class="c1">返回顶部</div> <div class="c2"></div> </body> </html>
2.让头部标题栏固定不动
<!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: 0px; left: 0px; right: 0px; } .pg-body{ height: 5000px; margin-top: 50px; background-color: #eee; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
3.实现三层
z-index -->层级顺序
opticy -->透明度（0~1）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ z-index: 10; position: fixed; /*让最外面一层的div居中*/ top: 50%; left: 50%; height: 400px; width: 500px; margin-left: -25px; margin-top: -20px; background-color: black; } .c2{ z-index: 9; position: fixed; background-color: black; top: 0; bottom: 0; right: 0; left: 0; opacity: 0.5; } .c3{ height: 5000px;background-color: red; } </style> </head> <body style="margin: 0 auto"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </body> </html>
overflow
1.over:auto
-->超出范围则出现滚动条
<div style="height: 200px; 140px;overflow: auto;"> <img src="fanye.jpg" /> </div>
2.over:hidden
-->超出范围则隐藏
<div style="height: 200px; 140px;overflow: hidden;"> <img src="fanye.jpg" /> </div>
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; } .pg-body{ margin-top: 50px; } .u{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding:0 10px; color: white; } /*鼠标移动到当前标签上面时，以下css属性才生效*/ .pg-header .menu:hover{ background-color: blue; } </style> </head> <body> <div class="pg-header"> <a class="logo">logo</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> </div> <div class="pg-body"> <div class="u">正文</div> </div> </body> </html>
background-image
background-repeat有四个属性repeat（默认，重复占满）,no-repeat（不重复）,repeat-x（只横着重复放）,repeat-y（只竖着重复放）
background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-image: url('fanye.jpg'); height: 700px; width: 700px; border:1px solid red; background-repeat: no-repeat; background-position-x:100px; background-position-y:100px; } </style> </head> <body> <div class="c1"></div> </body> </html>
上面的可css简写成
<div style="background:url('fanye.jpg') 100px 100px no-repeat;height: 700px;700px;border:1px solid red;"></div>