CSS3学习笔记(下)

一、元素的分类与标识（class和id）

1.      用class对元素进行分类

<script>

a.redwine {

               color:#800000;

        }

</script>

<p>制造红葡萄酒的葡萄：</p>

<ul>

<li><a href="cs.htm"class="redwine">卡百内索维农（Cabernet Sauvignon）</a></li>

<li><a href="me.htm"class="redwine">墨尔乐（Merlot）</a></li>

<li><a href="pn.htm"class="redwine">黑比诺（Pinot Noir）</a></li>

        </ul>

2.      利用id标识元素

    <script>

#c1-2 {

       color: red;

    }

</script>

<h1id="c1">第1章</h1>

...

<h2 id="c1-1">第1.1节</h2>

...

<h2id="c1-2">第1.2节</h2>

二、样式选择器

1.      元素选择器

p,th,td{border:1px solid blue}

          P em{background-color:green}

          P > em{background-color:green}  ——紧邻

          h1+p{background-color:green}   ——紧邻

2.      属性选择器

*[title]{color:red}

三、浮动元素float

1.float元素——（1）可以通过CSS属性float令元素向左或向右浮动。float属性的值可以是left、right或者none。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边。

#picture {

                   float:left;

                   width:100px;

         }

<div id="picture">

                   <imgsrc="bill.jpg" alt="Bill Gates">

         </div>

 

         <p>causasnaturales et antecedentes,

         idciroetiam nostrarum voluntatum...</p>

（2）浮动也可以用于实现在文档中分列

2.clear属性——用于控制浮动元素的后继元素的行为。缺省地，后继元素将向上移动，以填补由于前面元素的浮动而空出的可用空间。clear属性的值可以是left、right、both或none。

四、用z-index进行层次堆叠

                                     ——其原理是：数字较大的元素将叠加在数字较小的元素之上。

 

         #ten_of_diamonds{

                   position:absolute;

                   left:100px;

                   top:100px;

                   z-index:1;

         }

 

         #jack_of_diamonds{

                   position:absolute;

                   left:115px;

                   top:115px;

                   z-index:2;

         }

 

         #queen_of_diamonds{

                   position:absolute;

                   left:130px;

                   top:130px;

                   z-index:3;

         }

 

         #king_of_diamonds{

                   position:absolute;

                   left:145px;

                   top:145px;

                   z-index:4;

         }

 

         #ace_of_diamonds{

                   position:absolute;

                   left:160px;

                   top:160px;

                   z-index:5;

         }