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;

}