1. <div> 中可以嵌套任何标签

2. <div> 中可以嵌套 <p> 标签，但反之，
不应该在 <p> 标签中 嵌套 <div> 标签，
因为结果是不确定的。

3. 层叠样式表（Cascading Style Sheet）

4. 样式表的分类有 4 种

内联式样式表
嵌入式样式表
外部样式表
输入样式表

内联式样式表 的例子： 

<p style="font-size:3cm; color:rend; background-color:green">aaaaaa</p>




嵌入式样式表 的例子： 


<html>
       <title></title>
       <style type="text/css">
       <!--
           p { font-size:3cm;
               color:red;
               background-color:green;
               text-decoration:underline
           }
       //-->
       </style>
   <html>




外部样式表 的例子： 


<html>
  <head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="style/test.css">
  </head>
  <body>
     <p>aaaaaaaaaaaaaa</p>
     <p>bbbbbbbbbbbbbb</p>
     <p>cccccccccccccc</p>
  </body>
  </html>




假定在 style 文件夹下有 test.css 和 demo.css 文件,


输入样式表的 例子(一)：


则 test.css 的内容 类似于下面： 


p { font-size:3cm;
             color:red;
             background-color:green;
             text-decoration:underline
        }

        @import url(demo.css);




输入样式表的 例子(二)： 


<html>
   <head>
       <title></title>
   <style>
   <!--
        @import url(style/test.css);
   //-->
   </style>
   </head>
   </html>




5. 样式规则的 选择器



html selector　　　　　　


class selector


id selector


关联 选择器


组合 选择器


伪元素 选择器



html selector 的例子 


p {font-size:15px; color:yellow}




class selector 的例子 


.aaa {font-size:15px; color:yellow}



或 


p.aaa {font-size:15px; color:yellow}




id selector 的例子 


#aaa {font-size:15px; color:yellow}




关联选择器的 例子 


p em {font-size:15px; color:yellow}




组合选择器 的例子 


p, div, .aaa, #bbb {font-size:15px; color:yellow}




伪元素选择器 的例子 


a:link {font-size:1cm; color:red}
                        a:hover {font-size:5cm; color:green}
                        a:visited {font-size:2cm; color:yellow}




稍作变化 


a.one:link {font-size:1cm; color:red}
                        a.two:hover {font-size:5cm; color:green}
                        a.three:visited {font-size:2cm; color:yellow}