首先编写一段简单的css脚本
然后呢,在asp:BulletedList中通过 CssClass ="style1"将样式作用到控件上。看看运行效果
注意到上下边框的颜色分别是红色和橙色,右边框是绿色。在这里出现边框,并没有针对div来设置border,而是针对控件asp:BulletedList设置的。右边框的样式是针对li来设置的,网站文本的颜色以及下划线是针对a来设置的。那么问题就来了,在代码中并没有<li/> 和<a/>这样的标记,为什么样式表里面的.style1 li会起作用呢。这是因为asp.net将设计代码在运行的时候编译成html代码了,而样式文本也被植入了网页源代码中。现在看看网页的源代码:
在下面的源代码中可以看到,css脚本和项目中的代码完全一样,但是项目中的asp:BulletedList控件代码却没有出现在源代码中,取而代之的是ul。这就是sap.net通过编译后产生的。
在源代码中,css样式style1是作用在ul上的,而li和a都是包含在ul中的,因此样式.style1 li 和.style1 a就分别控制在ul中的li和a。.style1 a:hover是控制当鼠标移到网站链接上的时候,鼠标变为手型且文字颜色变为红色。a:hover是一个css伪元素,于向某些选择器设置特殊效果。伪元素还有很多,这里暂不说了。在.style1 li 中添加display :inline-block;,就可以使得链接横向排列了,但是display :inline-block;并不是针对所有浏览器都有效的,我使用的是360急速浏览器,这个可以有效,但其他哪些浏览器无效或有效暂时就不知道了。
在控件asp:BulletedList 的属性中似乎没有设置背景图片的属性,这可以通过css来设置,在 .style1 li中添加background-image:url(img/1.png);来设置背景图片。url中是图片的路径。
将css脚本移到外部样式表中,然后在通过引用外部样式表,但是在运行的时候发现背景图片没有显示,这时需要将background-image:url(img/1.png);改为background-image:url(/img/1.png);这样就可以了。