css样式

最近在做window8的小应用开发，在使用vs的时候很迷茫，在这里先复习一下css的样式

一：分开模板级的与页面级的

无论是DreamWeaver的template模板还是Microsoft Visual Studio200X系列的MasterPage，现在应该没有人不用模板建站了吧。不然网页的一致性与批量更新等问题足以让一个满怀热情的人烦死。

 

把通用的和模板才用到的所有样式放到一个模板级的样式表文件里面将是一个比较好的做法。模板级的样式表一个主题（Theme）只能有一个。我们不防先命名为template.css或者MasterPage.css。这里面放一些通用选择器和常用选择器。这些样式无论哪一个页面都会使用到。所以我们直接从模板文件里面引用。用<linkrel="stylesheet"type="text/css"href="css/MasterPage.css"media="screen"/>语句来引用。

MasterPage.css示例如下：

*{

margin:0px;

padding:0px;

font-size:9pt;

}

BODY {

color:black;

}

LEGEND

{

margin-left:5px;

padding-left:2px;

}

A:link {

COLOR:#003366;BORDER-BOTTOM:#0033660pxsolid;TEXT-DECORATION:none

}

A:visited {

COLOR:#003366;BORDER-BOTTOM:#0033660pxsolid;TEXT-DECORATION:none

}

A:hover {

COLOR:#003366;BORDER-BOTTOM:#0033660pxdotted;TEXT-DECORATION:none

}

A:active {

COLOR:#003366;BORDER-BOTTOM:#0033660pxsolid;TEXT-DECORATION:none

}

 

页面级的样式表单独放到一个页面级样式表中。页面级的样式表会可以允许有多个。几个相似页面共用一个页面级的样式表。只有在页面上才引用。引用方法如下：在head之间添加类似的如下代码。

<styletype="text/css">

<!--

@importurl(css/Page100X.css);

-->

</style>

 

页面级样式表示例如下：

.divBlock {

clear:both;

position:relative;

float:left;

}

.divBlockdiv{

position:relative;

float:left;

}

.btn2 {

width:6em;

}

#buttonarea{

float:right;

position:relative;

clear:left;

margin:-3px5px7px0;

padding-right:0px;

}

 

如果哪个页面甚至还有更特别而不通用的样式表，我们甚至可以为它单独建立一个样式表文件，只在那个页面上引用。引用方法页面级样式表。

<styletype="text/css">

<!--

@importurl(css/Page100X.css);

@importurl(css/special.css);

-->

</style>