1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 </head> 7 <body> 8 <!--第一种增加css样式的方法，在标签中增加style属性--> 9 <div style="background-color: blue; width: 100px; height: 100px">我是第一块</div><br>10 <div style="background-color: red; width: 100px; height: 100px">我是第二块</div><br>11 </body>12 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<style> 7 ????????.c1{ 8 ????????????background-color: red; 9 ????????????width: 100px;10 ????????????height:100px;11 ????????}12 ????</style>13 </head>14 <body>15 <!--第二种增加css样式的方法，增加class属性-->16 <div class="c1">我是红色</div><br>17 </body>18 </html>1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<!--第三种增加css样式的方法，使用css文件--> 7 ????<link rel="stylesheet" href="c1.css"> 8 </head> 9 <body>10 <div class="c1">我是粉色</div><br>11 </body>12 </html>
c1.css文件为
1 .c1{2 ????????????background-color: pink;3 ????????????width: 100px;4 ????????????height:100px;5 ????????}HTML标签_增加css样式
原文地址：https://www.cnblogs.com/testfan/p/8947255.html