css就是在style中编写样式，有三种写法：
1、在body中的标签中设置style属性，再在style中设置样式
<div style="background-color: #0e84b5;height: 48px">自强不息</div> #设置块级标签div背景色和高度
2、在head中写上style标签，并在其中设置样式
（1）id选择器，#id值{ 样式 } 或 #id值1，#id值2，#id值3{ 样式 } #少用
（2）class选择器，可重复，.class值{ 样式 }
（3）标签选择器，如div{ 样式 } 设置所有的div标签样式
（4）层级选择器，如div span{ 样式 } #设置最底层标签的样式
（5）组合选择器，使用 ，即逗号分割选择器 #各选择器都设置样式
（6）属性选择器，选择器[ 属性=属性值 ]{ 样式 } #属性也可自定义
注意：class可以设置多个属性，用空格隔开；样式优先级，变迁上的style第一，越靠近标签越优先
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1,#i2,#i3{ background-color: red; height: 40px; } .aaa{ background-color: green; height:40px; } div span{ background-color: #0000aa; } input[type='text']{height: 20px;width: 20px;} </style> </head> <body> <div style="background-color: black;height: 40px;">样式在标签中</div> <div id="i1" >选择id设置样式</div> <div id="i2" >2</div> <h2 id="i3" >3</h2> <div class="aaa">选择class设置样式</div> #class中可以写多个如class=“aa bb” <div class="aaa">2 <span>层级选择器</span> 3</div> <h2 class="aaa">3</h2> <input type="text" name="eee"> </body> </html>
3、创建css文件，在html文件中引入
ys.css 注意：不用写style了
#i1,#i2,#i3{ background-color: red; height: 40px; } .aaa{ background-color: green; height:40px; } div span{ background-color: #0000aa; } input[type='text']{height: 20px;width: 20px;}
html文件
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="ys.css"> #引入 </head>
常用样式：
边框border、高、宽、字体、居中
<div style="border: 1px solid red">border是边框，边框线宽1像素，实体，红色</div>
<div style="height: 40px; 100%; border: 1px dotted blue; font-size: 20px; text-align: center; line-height: 40px; font-weight: 300"> 高度40px，此时高度无限不用%；宽200px或80%，占总宽80%；边框虚线；字体大小；水平居中; 竖直居中；字体加粗程度或写bold加粗 </div>