css样式就是把样式和元素分开了，相当于程序中的函数一样，复用性增强了。
计算器样式：
代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--被style夹着的都叫CSS样式，全部都是英文全拼写--><!--标签选择器，对所有的标签都是一样的样式--><!--ID选择器，对某一个制定样式，当前页面最好一个--><!--class选择器，对一个或多个制定样式--><!--组合选择器，利用元素的层次关系进行定位选择，div #id img表示对div标签下的id元素下面的img标签设置样式，表示为a b c或a>b>c--><!--伪类选择器，系统预先的定义--><style>/*CSS选择器，决定是影响那个元素*//*标签不用加*//*ID选择器前面必须用#*//*class选择器前面必须用.*//*ID或者class命名不能以数字开头必须以字母开头*/.inner{width: 120px;height: 80px;border: solid gray 2px;background: aqua;float: left;font-size: 30px;text-align: center;line-height: 80px;}/*实现鼠标浮动即变换样式*/.inner:hover{background-color: orangered;font-size: 40px;}.meun {width: 496px;height: 50px;margin: auto;background-color: gray;border: solid 2px gray;border-top-left-radius: 8px;border-top-right-radius: 8px;}.top {width: 492px;height: 60px;margin: auto;background-color: gray;border: solid 4px gray;}.top div:first-child {width: 486px;height: 55px;margin: auto;background-color: white;border: solid 4px red;}.max_outer{width: 496px;height: 420px;margin: auto;border: solid gray 2px;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;}</style></head><body><!--div样式很少，只能用css--><div class="meun"> <font size="6" color="red">●</font><font size="6" color="blue">●</font><font size="6" color="green">●</font></div><div class="top"><div></div></div><div class="max_outer"><div class="inner">AC</div><div class="inner">+/-</div><div class="inner">%</div><div class="inner">/</div><div class="inner">7</div><div class="inner">8</div><div class="inner">9</div><div class="inner">x</div><div class="inner">4</div><div class="inner">5</div><div class="inner">6</div><div class="inner">-</div><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div><div class="inner">+</div><div class="inner">0</div><div class="inner">保留</div><div class="inner">.</div><div class="inner">=</div></div></body></html>
