CSS
1,添加CSS样式有三种方式：
1 <body> 2 <div style="background-color:chartreuse;width: 100px;height: 100px" >div1</div> 3 <!-- 第一种CSS样式，直接把style属性加在标签上-->
4 </body>
1 <div id="i2">div2</div> 2 <!-- 第二种CSS样式，用id属性标识标签，然后在head标签中写style标签，在style标签中通过id选择器来选中标签-->
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 <style> 5 #i2{ 6 background-color: #1d9d74; 7 width: 50px; 8 height: 50px; 9 } 10 </style> 11 <!-- 在head标签中写style标签，在style标签中通过id选择器来选中标签，再添加样式-->
12 <head>
1 <head> 2 <link rel="stylesheet" href="demo.css"> 3 <!-- 第三种CSS样式，在head中写link标签，rel=样式表，href=css的文件名，引入css文件--> 4 </head>
css中格式：
1 #i3{ 2 background-color:sandybrown; 3 width: 100px; 4 height: 100px; 5 }
2，CSS三种样式的优先级：
以标签为基础，由标签内部由近及远
3，选择器、块和行内标签、内外边距
1，id属性选择器
1 <head> 2 <style> 3 #i1{ 4 background-color: #8A9B0F; 5 } 6 </style> 7 </head> 8 <body> 9 <div id="i1">div1</div> 10 </body>
2,class属性选择器
1 <head> 2 <style> 3 .c1{ 4 background-color: #0d8ddb; 5 } 6 .c2{ 7 width: 100px; 8 } 9 10 </style> 11 </head>
1 <body> 2 <div class="c1 c2">div2</div> 3 <!-- class属性选择器，可以在同一个标签上添加多个样式表，class中的值通过空格分隔--> 4 </body>
3,标签选择器
1 <head> 2 <style> 3 div{ 4 background-color: aquamarine; 5 } 6 </style> 7 8 </head>
1 <body> 2 <div>div</div> 3 </body>
4,层级选择器
1 <head> 2 <style> 3 div span{ 4 background-color: palevioletred; 5 } 6 </style> 7 8 </head>
1 <body> 2 <div> 3 <span>span</span> 4 </div> 5 </body>
5,属性选择器
1 <body> 2 <div lml="beauty">div4</div> 3 </body>
1 <head> 2 <style> 3 div[lml="beauty"]{ 4 background-color: lavenderblush; 5 } 6 </style> 7 8 </head>
6,宽高
1 <div style="width: 50%">div5</div> 2 <!-- 宽度可以使用百分比，而高度不可以使用百分比-->
7，块儿标签、行内标签
1 <span style="background-color: #0d8ddb">span</span> 2 <!-- 行内标签必须自己有内容，否则无法使用背景色，外边距等-->
1 <div style="background-color: tomato; height: 100px"></div> 2 <!-- div标签不写内容时，必须有高度-->
1 <div style="display: inline">123</div> 2 <!-- display:inline 由块儿变成行内-->
1 <span style="display: block;background-color: hotpink;height: 100px"></span> 2 <span style="display: block;background-color: hotpink;">行变块</span> 3 <!-- display:block 行内转块儿-->
行内和块儿 inline-block
1 <span style="display: inline-block;background-color: gold;height: 100px;width:100px"></span> 2 <!-- inline-block和div,span的区别：对于span没有内容也可以使用宽高颜色等，对与div没有内容时不能只写高度了，宽高都要写--> 3 <span style="display: inline-block;background-color: skyblue;height: 100px;">111</span> 4 <!-- 有内容时inline-block与div,span的区别：对于span有内容时自己写的高宽也起作用，对于div有内容时只写高度的话宽度也只有内容的宽度-->
1 <div style="display: none"></div> 2 <!--不显示-->
8,外边距，内边距
1 <style> 2 .c2{ 3 background-color: blue; 4 width: 100%; 5 height: 50px; 6 margin-top: 0; 7 /*外边距*/ 8 padding-top: 0; 9 /*内边距*/ 10 } 11 </style>
