网面设计中的CSS（层叠样式表）

CSS即样式表，是用来美化界面的，可以对页面元素进行更详细的设置如字体颜色，背景边框等。

CSS有三种使用方式：内联式、页面嵌入、外部引用三种。

  • 内联式：直接将样式写入到元素的style属性中,如下：    
<input type="text" style="background-color:Menu;border-color:Yellow; /">

只能对单一的内容进行样式设置

  • 页面嵌入：在header块中加入，可以对这个页面中相同类型的内容的样式进行设置，即具有统一的外表属性，如下代码
    <head runat="server">
    <title></title>
    <style type="text/css">
        input {background-color:Blue;
               border-color:Red;
              }
        label
        {   font-size:xx-large;
            color:Olive;           
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <input type="text" />
       <br />
       <label>dafdaf</label>
    </div>    
    </form>
</body>
</html>

    header中的style表示此页面中所有的input和label类型用到以下的样式，{号前面字符的表示用到的类型，{}内的表示用到的属性。此种类型只能使用于此页面的内容。

  • 外部引用：我们常用的一种，即建立一个单独的css文件，然后在要引用的页面的header中引用此css文件即可。

        如我们建立一个my.css 的样式文件，内容如下 ：

         

input 
{
    background-color:Blue;
    font-style:italic;
    border-color:Red;
}

label
{
    font-style:oblique;
    font-size:x-large;
}

然后在要引用此文件的页面的header中加入以下语句即可：

<link type="text/css" rel="Stylesheet" href="my.css" />

此时此页面中所有用到input和label类型的内容都用于此样式。

 

posted on 2013-05-04 16:41  天上星  阅读(427)  评论(0)  编辑  收藏  举报

导航