DIV+CSS(一) 4种样式表和 6种样式规则选择器

kanglecjr

浏览: 522351 次
性别:
来自: 北京

最近访客更多访客>>

briefyf

-tl-

malinhuan123

mygod_cx

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DIV+CSS

CSS 嵌入式 HTML

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}

分享到：