在标签上设置style属性：
background-color：#2459a2；
height：48px；
。。。
编写CSS样式：
如何注释：/* 或 */
一. 在标签的属性中编写
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="background-color: aqua;height:48px;">12fhjkhjjk44</div> 9 <div style="background-color: red;height:48px">ff1537ff</div> 10 <div style="background-color: pink;height: 48px">fhajhjak</div> 11 </body> 12 </html>
二. 写在head里面，style标签中写样式
1. id选择区
#i1{
background-color: #2459a2;
height: 48px;
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color: aqua;height:48px; 9 } 10 #i2{ 11 background-color: aqua;height:48px; 12 } 13 </style> 14 </head> 15 <body> 16 <div id="i1">12fhjkhjjk44</div> 17 <div id="i2">ff1537ff</div> 18 <div style="background-color: pink;height: 48px">fhajhjak</div> 19 </body> 20 </html>
2. class选择器
.名称{
...
}
<标签 class=‘名称’> </标签>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #i1{ 8 background-color: aqua;height:48px; 9 } 10 #i2{ 11 background-color: aqua;height:48px; 12 } 13 .c1{ 14 background-color: aqua;height:48px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="c1">12fhjkhjjk44</div> 20 <span class="c1">ff1537ff</span> 21 <div class="c1">fhajhjak</div> 22 </body> 23 </html>
3. 标签选择器
在head标签内的style标签中div{
......
}
所以div设置上此样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 .c1{ 9 background-color: aqua;height:48px; 10 } 11 div{ 12 background-color: red;color:black 13 } 14 </style> 15 </head> 16 <body> 17 <div>12fhjkhjjk44</div> 18 <span class="c1">ff1537ff</span> 19 <div>fhajhjak</div> 20 </body> 21 </html>
4. 层级选择器
.c1 .c2 div{
......
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 .c1{ 9 background-color: aqua;height:48px; 10 } 11 span div{ 12 background-color: red;color:black 13 } 14 </style> 15 </head> 16 <body> 17 <div>12fhjkhjjk44</div> 18 <span class="c1">ff1537ff 19 <div>shjhjhjjhk</div> 20 </span> 21 <div>fhajhjak</div> 22 </body> 23 </html>
5. 组合选择器（逗号）
6. 属性选择器
对选择到的标签再通过属性再进行一次筛选
.c1 [n='alex'] { 100px; height: 200px;}
PS:
优先级，标签上style优先，编写顺序，就近原则
css样式也可以写在单独文件中
三 注释
/* */