1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML中引入CSS样式的三种方式</title> 6 7 <style type="text/css"> 8 /* 9 这是CSS的注释 10 */ 11 /* 12 id选择器，#+id 13 */ 14 #usernameErrorMsg{ 15 color: red; 16 font-size: 12px; 17 } 18 /*标签选择器*/ 19 div{ 20 background-color: black; 21 border: 1px solid red; 22 width: 100px; 23 height: 100px; 24 } 25 /* 26 类选择器 27 .类名{} 28 */ 29 .myclass{ 30 border: 1px solid red; 31 width: 100px; 32 height: 30px; 33 } 34 35 </style> 36 /*第三种方式 引入css文件*/ 37 <link rel="stylesheet" type="text/css" href="1.css" /> 38 </head> 39 <body> 40 <!-- 41 第一种方式 42 width 宽 43 height 高 44 background-color背景色 45 display none隐藏，block标识显示 46 --> 47 <div id="101" style="width: 300px; height: 300px; background-color: aquamarine;display: block;border-color: crimson;border-width: 1px;border-style: dashed;"></div> 48 <br><br> 49 50 <div id="101" style="width: 300px; height: 300px; background-color: aquamarine;display: block;border: red 2px dashed;"></div> 51 <!-- 52 设置样式字体大小12px，颜色为红色 53 第二种方式 在header中统一设置 54 --> 55 <span id="usernameErrorMsg">对不起，用户名不能为空</span> 56 <div>123</div> 57 <div>234</div> 58 <div></div> 59 60 <!--类选择器--> 61 <input type="text" class="myclass"/> 62 <br><br><br> 63 <select class="myclass"> 64 <option value="zk">专科</option> 65 <option value ="bk">本科</option> 66 </select> <br> 67 <!-- 68 第三种方式，引入外部独立的css文件 69 要求把百度下划线去掉 70 --> 71 <a href="http://www.baidu.com">百度</a> 72 <span id="baiduspan">点击我连接到百度</span> 73 74 </body> 75 </html>
1 a { 2 text-decoration: none; 3 } 4 /* 5 cursor鼠标样式，pointer是小手，hand有浏览器兼容问题，建议使用pointer 6 */ 7 #baiduspan{ 8 text-decoration: underline; 9 cursor: pointer; 10 11 }