您的位置:首页 > Web前端 > CSS

网面设计中的CSS(层叠样式表)

2013-05-04 16:41 141 查看
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类型的内容都用于此样式。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: