1.<!--内联样式 -->
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <title>Insert title here</title> 5 </head> 6 <body> 7 <p style="color:green"> 8 内联样式 9 </p> 10 </body> 11 </html>
2.<!-- 嵌入式样表 -->
1 <!-- 嵌入式样表 --> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 7 <style type="text/css"> 8 div{ 9 color:red; 10 } 11 </style> 12 </head> 13 <body> 14 <div> 15 欢迎使用嵌入式样表 16 </div> 17 </body> 18 </html>
3.<!-- 外部样式不需要style标签
<link rel="stylesheet" type="text/css" href="my.css" -->
1 <!-- 外部样式不需要style标签 2 <link rel="stylesheet" type="text/css" href="my.css" 3 --> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 <link rel="stylesheet" type="text/css" href="my.css"/> 9 </head> 10 <body> 11 <div> 12 欢迎使用元素选择器 13 </div> 14 <div id="jaky1"> 15 欢迎使用id选择器 16 </div> 17 <div class="jaky2"> 18 欢迎使用类选择器 19 </div> 20 </body> 21 </html>
4.外部样式my.css代码
1 div{ 2 color: red; 3 } 4 #jaky1{ 5 background-color: green; 6 font-size: 90px; 7 } 8 .jaky2{ 9 background-color: blue; 10 font-size: 90px; 11 }
