非布局样式：
字体(多平台下的字体适配：fallback机制)、字重、颜色、大小、行高
字体适配：
/*多平台下的字体适配：fallback机制*/ .text { font-family: Menlo, Monaco, Consolas, "Courier New", monospace, Arial, "Microsoft YaHei", "黑体", "宋体", sans-serif; }
行高：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one{font-size: 10px;vertical-align: middle} .two{font-size: 20px;vertical-align: middle} .three{font-size: 30px;vertical-align: middle} img{vertical-align: bottom} </style> </head> <body> <div style="background:greenyellow"> <!--默认以文字的基线对齐 添加 vertical-align 可以改变文字的对齐方式--> <span class="one">第一段</span> <span class="two">第二段</span> <span class="three">第三段</span> <!--图片设置 vertical-align:bottom 可以消除图片的缝隙--> <img src="./img/5.png"> </div> </body> </html>
背景、边框
背景：纯色背景、渐变色背景、多背景叠加、图片背景（雪碧图）{雪碧图可以减少http请求优化性能}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变色背景</title> <style> .div1,.div2,.div3{ height: 200px; width: 200px; line-height: 50px; font-weight: bolder; float: left; margin: 20px; } .div1{ background: linear-gradient(to right,yellow,green);} .div2{ background: linear-gradient(45deg,green,yellow);} .div3{ background: linear-gradient(45deg,red 0, yellow 30% , green 70%);} </style> </head> <body> <div class="div1">背景色按方向渐变</div> <div class="div2">背景色按角度渐变</div> <div class="div3">背景色以某个角度开始多段颜色渐变</div> </body> </html>
边框：线型，大小，颜色 边框背景图 边框衔接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框的衔接和用边框做三角形e</title> <style> .div1{ width: 0px; border-bottom: 30px solid red; border-right: 30px solid blue; border-top: 30px solid green; border-left: 30px solid yellow; } .div2{ width: 0px; border-bottom: 30px solid red; border-right: 30px solid transparent; border-left: 30px solid transparent; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html>
滚动： visibel 当内容的体积超出容器时 内容直接溢出容器
hidden 当内容的体积超出容器时 超出部分隐藏
scroll 当内容的体积超出容器时 滚动条显示
auto 当内容的体积超出容器时 滚动条显示 内容体积小于容器时 滚动条隐藏
粗体：font-weight ( 可以以数字的形式规定字体的粗细 、bold 和 normal项目中比较常用 )
斜体 ：font-style: itatic
下划线：text-decoration ：underline
指针 : cursor : pointer (指针变手)
其它
图标引入方式：引入在网上下载图标的css包再使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"> </head> <body> <i class="iconfont icon-aixin"></i> </body> </html>