1、HTML中引入CSS样式的第一种方式：内联定义方式

  1. <!--
  2. width 宽度样式
  3. height 高度样式
  4. background-color 背景色样式
  5. display 布局样式（none表示隐藏，block表示显示）
  6. -->
  7. <div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
  8.             border-color : red;border-width : 1px;border-style : solid;"></div>
  10. <br><br>
  12. <!--
  13. 样式还能这样写：
  14. border : 1px solid black;
  15. -->
  16. <div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
  17. border : 1px solid black;"></div>

2、HTML中引入CSS样式的第二种方式：样式块

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <title>HTML中引入CSS样式的第二种方式：样式块</title>
  6.     <style type="text/css">
  7.       /*
  8.       这是CSS的注释。
  9.       */
  11.       /*
  12.       id选择器
  13.       语法格式：
  14.       #id{
  15.       样式名 : 样式值;
  16.       样式名 : 样式值;
  17.       样式名 : 样式值;
  18.       ....
  19.       }
  20.       */
  21.       #usernameErrorMsg {
  22.         color : red;
  23.         font-size : 12px;
  24.       }
  26.       /*
  27.       标签选择器
  28.       语法格式：
  29.       标签名 {
  30.       样式名 : 样式值;
  31.       样式名 : 样式值;
  32.       样式名 : 样式值;
  33.       ....
  34.       }
  35.       标签选择器作用的范围比id选择器广。
  36.       */
  37.       div {
  38.         background-color : black;
  39.         border : 1px solid red;
  40.         width : 100px;
  41.         height : 100px;
  42.       }
  44.       /*
  45.       类选择器
  46.       语法格式：
  47.       .类名{
  48.       样式名 : 样式值;
  49.       样式名 : 样式值;
  50.       样式名 : 样式值;
  51.       ....
  52.       }
  53.       */
  54.       .student {
  55.         border : 1px solid red;
  56.         width : 400px;
  57.         height : 30px;
  58.       }
  60.     </style>
  61.   </head>
  62.   <body>
  64.     <!--
  65. 设置样式字体大小12px，颜色为红色！
  66. -->
  67.     <span id="usernameErrorMsg">对不起，用户名不能为空！</span>
  69.     <div></div>
  70.     <div></div>
  71.     <div></div>
  73.     <!--class相同的标签可以认为是同一类标签。-->
  74.     <br><br><br>
  75.     <input type="text" class="student"/>
  77.     <br><br><br>
  79.     <select class="student">
  80.       <option>专科</option>
  81.       <option>本科</option>
  82.     </select>
  84.   </body>
  85. </html>

3、在HTML中引入CSS样式的第三种方式：引入外部独立的css文件

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>在HTML中使用CSS样式的第三种方式：引入外部独立的css文件</title>
  7.     <!--引入css-->
  8.     <link rel="stylesheet" type="text/css" href="css/1.css" />
  10.   </head>
  11.   <body>
  13.     <a href="http://www.baidu.com">百度</a>
  15.     <span id="baiduSpan">点击我链接到百度哦！</span>
  16.   </body>
  17. </html>

4、列表样式

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>列表样式</title>
  7.     <style type="text/css">
  8.       ul{
  9.         /*list-style-type: none;*/
  10.         /*list-style-type: circle ;*/
  11.         list-style-type: square ;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <ul>
  17.       <li>中国
  18.         <ul>
  19.           <li>北京</li>
  20.           <li>上海</li>
  21.           <li>重庆</li>
  22.         </ul>
  23.       </li>
  24.       <li>美国</li>
  25.       <li>俄国</li>
  26.     </ul>
  27.   </body>
  28. </html>

5、CSS样式的绝对定位

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>CSS样式的绝对定位</title>
  6.         <style type="text/css">
  7.             #div1{
  8.                 background-color: red;
  9.                 border: 1px black solid;
  10.                 width: 300px;
  11.                 height: 300px;
  12.                 position : absolute; /*绝对定位*/
  13.                 left: 100px;
  14.                 top: 100px;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  20.         <div id="div1"></div>
  22.     </body>
  23. </html>

6、css样式

  1. a {
  2.   text-decoration : none;
  3. }
  5. /*
  6. cursor : 鼠标样式，pointer是小手，hand也是，但是hand有浏览器兼容问题。建议使用pointer
  7. */
  8. #baiduSpan {
  9.   text-decoration: underline;
  10.   cursor: pointer;
  11. }