ASP.NET界面设计(一)之使用CSS《ASP.NET2.0网站开发全程解析》

使用CSS最主要的好处是可以将维护样式的工作量减至最少，并且使很多页面有共同的视觉效果。除此之外，CSS还保证了HTML代码和整个网站的安全性。假设客户想改变网站的样式，如果将页面HTML元素中的样式进行硬编码(hard-coded)，那么需要在很多页面中对需要修改的地方进行查找定位，这很可能就会漏掉一些地方，或者是把某些地方改错了--这些都会破坏网站页面效果的统一性。然而，如果使用样式类把样式存放在CSS文件中，那么在需要改动时很容易就能定位到要改动的样式类，不需要对HTML代码做任何改动，这很安全。

另外，CSS文件还能使网站效率更高。浏览器只需要下载它一次然后将它缓存。页面只需要链接到该CSS文件在缓冲区中的实例就可以了，由于页面不再包含所有的样式代码，因此文件大小会减小很多，下载起来也更快。这样，用户的浏览器在加载页面时的速度会明显提高。

1 在HTML对象中通过class属性来使用样式类。

（1）定义样式，存放在名为style1.css的文件中：

注意，当声明样式时使用了前缀符号"."。对于自定义的样式类必须使用该前缀。

.mystyle
{
text-align:center;
color: red;/*字体颜色*/
background-color: yellow;/*背景颜色*/
font-size: 24px;/*字体大小*/
}

（2）在.aspx或.htm页面中，将CSS文件链接到HTML，代码如下所示：

（3）最后，在HTML的div标记中指定该CSS类，如下所示：

<body>
<div class = "mystyle">first</div>
</body>

2如果想定义一个样式，让它应用于所有页面的某个HTML对象中(例如，应用于所有段落的标记<p>，或者应用于所有页面的<body>标记)，在style1.css样式表文件中就可以这样进行定义：

body
{
color:Green;
background-color:Gray;
font-size: 48px;
}

在HTML的div标记中指定该CSS类，如下所示：

<body>
<div class = "mystyle">first</div>　　<div>I am in body</div>
</body>

但这样 first的样式仍然是.mystyle。I am in body是body样式。

2 在HTML对象中通过id属性来使用样式类。在style1.css样式表文件中，在定义类名时使用#前缀，如下所示：

#header
{
padding-top: 50px;/*字体顶部距离边框*/
padding-left: 50px;/*字体左边距离边框*/
margin-top: 100px;/*边框外边距*/
width: 100%;/*边框宽*/
height: 100px;/*边框高*/
color:White;
background-color:Black;
}

然后使用HTML标记中的id属性来链接到该CSS类。在HTML的div标记中指定该CSS类，如下所示：

4 最后，可以把不同的样式混合起来使用。设想要为使用.mystyle样式类的容器中的所有链接定义一种样式，可以使用如下方法。

.mystyle a
{
color:Black;/*字体颜色*/
}

这种方法相当于：

.mystyle3
{
color:Black;/*字体颜色*/text-align:center;
background-color: yellow;/*背景颜色*/
font-size: 24px;/*字体大小*/
}

最后的style1.css文件完整内容为：

.mystyle
{
text-align:center;
color: red;/*字体颜色*/
background-color: yellow;/*背景颜色*/
font-size: 24px;/*字体大小*/
}

/*.mystyle中的超链接样式*/
.mystyle a
{
color:Black;/*字体颜色*/
}

.mystyle3
{
color:Black;/*字体颜色*/text-align:center;
background-color: yellow;/*背景颜色*/
font-size: 24px;/*字体大小*/
}

.mystyle2
{
color:Blue;
background-color:Orange;
font-size: 36px;
}

body
{
color:Green;
background-color:Gray;
font-size: 48px;
}

#header
{
padding-top: 50px;/*字体顶部距离边框*/
padding-left: 50px;/*字体左边距离边框*/
margin-top: 100px;/*边框外边距*/
width: 100%;/*边框宽*/
height: 100px;/*边框高*/
color:White;
background-color:Black;
}

引用页面内容为：

<head runat="server">
<link href ="css/style1.css" type="text/css" rel=Stylesheet />
    <title>无标题页</title>
</head>
<body>
    <div class = "mystyle">first
    <a href ="#">I am a href</a></div>

    <a href ="#" class = "mystyle3">I am a href</a>

    <form id="form1" runat="server">
    <div class = "mystyle2">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        I am in form
    </div>
    </form>
    <div>I am in body</div>
    <div id="header">some text</div>
</body>

运行结果：

附：常用CSS属性

posted on 2009-05-29 20:57 HEYUTAO 阅读(408) 评论(0) 收藏举报