css学习总结

一 关于css的id选择符

每个html的元素都包含一个id属性，该属性是唯一的，可以唯一标示一个元素，我们就可以选择更具体的元素。is属性由井号加id组成。

p#bulletinContent
{
color:Yellow ;
background-color:Maroon ;
}

html界面如下：

<p id = "bulletinContent" >我的blog</p>

二 class选择符

html中包含class属性，与id属性不同，class属性不要求唯一性，多个元素可以拥有相同的calss属性。

h2.titleLevel2
{
color:Gray ;
}

html 页面代码:

<h2 class="titleLevel2">测试class的属性</h2>

三 多重class

由上节的内容可知，class属性和id属性的不同之处，id属性是唯一的，而同一个属性可以赋给多个元素。

一个html元素可以属于多个class。

<h2 class="class1 class2">测试class的属性</h2>

css文件如下:

a.class1
{
font-size:12px;

}

a.class2
{
color:red;
}

四 嵌套div标签

div.box
{
border:1px solid #E2DFD0 ;
margin-bottom:1em;
}

div.box div.title
{
padding:0.3em ;
padding-left:0.6em;
background:#F2F0DD;
font-size:0.9em ;
font-weight:bold;

}

div.box div.content
{
margin:0.3em;

}

div.box div.content *
{
margin:0;

}

div.box h3
{
font-weight: bold;
font-size:0.9em;
padding:0.5em;
color:#0033CC;

}

div.box p
{
font-size:0.9em;
padding:0.5em;

}

div.content + div.content
{

border-top:1px dotted #E2DFD0 ;

}

对应的html代码

<div class="box">

<div class="title">产品列表</div>

<div class="content">
<h3>web professional</h3>
<p>测试css代码</p>
</div>

<div class="content">
<h3>web express</h3>
<p>web express</p>
</div>

</div>

五 与元素关系相关的选择符

1 后代描述符

下面的html代码中有两个div元素，每个有唯一的ID标示且包含一个P元素，P分别是两个div的子元素，当然也是后代元素。

div#weatherinfo p
{

color:Orange ;
background-color:Blue ;
}

div#datetime p
{
color:White ;
background-color:Black;

}

html 页面为 ：

<div id="weatherinfo">
<p>今日天气</p>
</div>

<div id="datetime">
<p>晴</p>
</div>