css样式的作用-使用css控制GridView控件的样式

一 : 使用css控制GridView控件的样式

二 : 完全使用css样式制作弹出菜单

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>弹出菜单</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

</style>
<!--[if lte IE 6]>
<style type="text/css">
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

</style>
<![endif]-->
</head>

<body>

<ul>
<li><a class="hide" href="../menu/index.html">DEMOS</a>

    <ul>
    <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
    <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
    <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
    <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

        <ul>
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

</li>

    <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
    <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
    <li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
    <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
    <li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
    </ul>

</li>

<li><a class="hide" href="index.html">MENUS</a>

    <ul>
    <li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
    <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
    <li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
    <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
    <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
    <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
    <li><a href="circles.html" title="circular links">circular links</a></li>
    </ul>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

    <ul>
    <li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
    <li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
    <li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
    <li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>
    <li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
    </ul>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<ul>
    <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
    <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
    <li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
    <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
    <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
    <li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
    <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
    <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
    <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
    </ul>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

    <ul>
    <li><a href="../ie/exampleone.html" title="Example one">example one</a></li>
    <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
    <li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>
    </ul>

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

    <ul>
    <li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>
    <li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>
    <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
    <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
    <li><a class="hide" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a>

        <ul class="left">
            <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
            <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>
            <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
        </ul>

</li>
    </ul>

</li>
</ul>

</div>
</body>
</html>

三 : span设CSS样式总是不起作用的解决方法

span 设CSS样式不起作用的情况，应该有很多的朋友都有见到过吧，小编今天也有遇到过，经搜索整理出来的经验就是先让span成块级元素显示，CSS样式才会起作用

复制代码代码如下:
<span id='span_slide_container' style='display:block; overflow-y: auto; overflow-x: auto; height: 500px;'>

此处 display:block; 一定要加上，否则，span不起作用

如果要定义span居中，必须先让span成块级元素显示，也就是说，要先定义span的display:block;属性，然后再给span添加边距属性 margin:0px auto;这样就能达到你想要的效果了。span的属性很多，几乎所有标签的属性都可以定义在span上，只是很多属性都必须在span成块级元素时菜其作用，span本身只是为了补充a标签的作用，是一个辅助标签，一般只能识别对文字的样式的你故意，所以如果想给span标签定义更多的其他样式属性，你就必须先给span加上块级属性，也就说添加display:block;属性，这样以后你的样式就可以起作用了

四 : 添加css样式的三种方法

一，行内式样式（Inline Style）

即使用style属性，将CSS直接写在HTML标签中。
例如：<p style="color:red">这行段落将显示为红色。</p>
注意：style属性可以用在<body>内的所有（X）HTML标签上，但不能应用与<body>以外的标签，如<title><head>等标签。
二，嵌入式样式表（Embedded Style Sheets）
嵌入式样式表使用“<style></style>”标签嵌入到（X）HTML文件的头部中，代码如下：
<head>
<style type="text/css">
　
</style>
</head>
注意：对于一些不能识别<style>标签的浏览器，使用（X）HTML的注释标签把样式包含进来。这样，不支持<style>标签的的浏览器会忽略样式内容，而支持<style>标签的浏览器会解读样式表。
三，外部样式表（Link Style Sheets）
在<head>标签内使用<link>标签将样式表文件连接到（X）HTML文件中。
代码如下：
<head>
<link style="stylesheet" href="myclass.css" type="text/css" />
</head>

五 : CSS样式颜色属性的使用

css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。

red红色
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00

有17个预先确定的颜色，它们是：

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,

olive, orange, purple, red, silver, teal, white, and yellow.

transparent 也是一个正确的值。

rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。

我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。

十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，第三个蓝色。但六位数给于更多的颜色控制。

color和background-color

颜色可以使用color和background-color，是美国英语中"color"不是"colour"。

蓝色背景，黄色文字：

h1 {
color: yellow;
background-color: blue;
}

这些颜色可能比较粗糙，你可以使用另外的色度：

body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}

你可以看到h1已经变成黄色和蓝色。

color和background-color可以使用在绝大部分html元素，包括body。