文章关键字 ‘css’

css设置网页滚动条样式

2010年08月29日，星期日
热度:

严格来说html标准的发展,从html4.01发展到xhtml之后,DOCTYPE声明就起到了很大的作用.

在原来的html的时候，我们可以这样定义整个页面的滚动条
body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

但是同样的代码，我们应用在 xhtml下就不起作用了，我相信好多好朋友也遇到过同样的问题
那么怎么才能在xhtml下应用滚动条样式呢？看下列代码
html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

这段代码和上一段唯一的不同就是在css定义的元素上，一个是body一个是html。我们再测试一下，把html页面的
“body”修改成”html”测试一下，发现依然可以实现效果。那到底是为什么呢？

从字面上来看，xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面？其实最根本的原因就是要让html更加结构化标准化（因为html实在是太烂）。
我们在html里面定义的是body，因为html不是很标准所以这样可以生效，而在xhtml里面这样就不行了，
我看看那个图很明显，body标签本身不是根元素，只有html才是根元素，而页面的滚动条也是属于根元素的，所以这就是我们为什么定义body没有效果 的原因，因为我们定义的只是一个子原素。ok，我们知道了原理，来做一个试验如果把定义”body”或”xhtml”换成”*”，
*{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

在html和xhtml都通过，因为*就是定义页面上的任何标签当然也包括了“html”这个标签。

(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML 1.0 transitional doctype的区别，但是如果你把页面的XHTML 1.0 transitional doctype去掉的话，那么这个页面就没有doctype，默认的显示方式就是html4.01,不过你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的，虽然这个页面的标准是html 4.01)

标签：, ,
发布在 html js | 没有评论 » 浏览162 次

改变wordpress的wp_list_categories()返回样式

2010年08月16日，星期一
热度:

wordpress 的wp_list_categories()样式选择

用wp_list_categories()来调用分类的时候，我们没有办法在这里选择元素所使用的独立的css样式，那怎么办呢？举例如下：

<?php echo preg_replace('@<li([^>]*)><a([^>]*)>(.*?)</a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>

这里使用了preg_replace函数，在wp_list_categories用echo=0得到结果，交给preg_replace处理，而不是直 接显示出来。

这时我们就可以设置自己的css样式了！

标签：,
发布在 WordPress, html js, php mysql | 评论关闭 浏览32 次

CSS中背景background-position负值定位深入理解（转）

2010年07月26日，星期一
热度:

CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时间认真的思考了，把我的心得写出来．
下面是我要用到的一个背景图：

代码如下：

<!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” lang=”gb2312″>
<head>

<style type=”text/css” >
<!–
.style1,.style2,.style3{
float:left;
width:162px;
height:162px;
background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat;
border:1px dotted #999999;
color:red;
margin-right:10px;
}
.style2{
background-position:-50px -50px;
}
.style3{
background-position:100px 100px;
}
.blue{
color:blue;
}
–>
</style>
</head>
<body>
<div>
x:0,<span>y:0</span>
</div>
<div>
x:-50px,<span>y:-50px</span>
</div>
<div>
x:100px,<span>y:100px</span>
</div>
</body>
</body>
</html>
HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
在浏览器中看到的效果：

从上图可以看到：当为background-position:0 0;时图片的左上角与DIV的左上角是重合的，当我们定位于background-position:-50px -50px;时发现图片向左、上移动了，也就以DIV的左上角为中心，图向左移动了50PX，向上也移动了50PX．第三个示例采用的都是正值，可以解解释为图向右、向下移动的效果．这个应该是好理解的．
总结一下就是以上都是以DIV的0，0点为参考点图片移动，如果把DIV区解释为一个坐标轴图，向左，上都为负，向右，下为正值．

好象说这么多你也记不住，那我就告诉你，你应该记住什么吧！

在实践中多数情况是知道一个图的位置要如上图中那个黄色的点，我们应该在效果图上量出它的长度得出两个值都是150PX,那我们定义图的位置就要写background-position:-150px -150px;这样就定义好了,在图上的量法就看下图（这张图相当于你用的效果图或称设计图），记住这张图相信你一定能掌握背景图负值的方法了。

到此我们可能就明白了如何用background里的定位值来准确定位一个背景图片，返回去我们看一下开始的时候介绍的两个图片，我们就是可以用：背景定位和容器内才可见这两个性质来随意的调用整张图片的某一部分。

但是我们为了调用方便，在排列这些小图片的时候要讲究一点规则，比如：小图之间的距离通常是调用小图的容器的大小，或者距离更大一点，这样就可以避免在容器内显示出我们不愿意显示的图片！

补充一点，如果定位用的是百分比话，算法比较特殊。我举个例子：

代码：

background:#FFF url(image) no-repeat fixed 50% -30%;

这个时候图片应该在容器的什么位置呢,算法公式如下：

图片左顶点距容器左顶点的坐标位置为
x：（容器的宽度-图片的宽度）x50%
y：（容器的高度-图片的高度）x（-30%）
得到的结果应用坐标法则，差值如果为负数，百分比为正那么运算结果是负值。如果差值为负数，百分比也为负数，那么运算结果就是正数。总而言之就是这里的运算符合运算法则。把运算的结果带入坐标法则就能得到图片的位置。

比如：容器是width：600px；height：600px；而图片是width：200px；height：200px；
我们用上面的样式，可以得到图片位置为：
x：(600px-200px)*50%
y：(600px-200px)*(-30%)
如下图：

html/css教程:背景图片的定位问题详解_中国教程网

以左上角为坐标原点

加入你需要把图片上距左边40PX 距上边10PX的图片显示出来<DIV></div>

.m{ background:url(img/01.jpg) no-repeat;background-position:-40px -10px}

前面的总看得懂吧 解释下这句

background-position:-40px -10px

背景想左偏移40PX 向上偏移10PX

m有多大就显示多大的图片出来

标签：
发布在 html js | 评论关闭 浏览102 次

CSS样式常用按钮、文本框、表单等13例

2010年04月11日，星期日
热度:

1、按钮样式

01 .buttoncss {
02      font-family: "tahoma", "宋体"; 
03      font-size:9pt; color: #003399;
04      border: 1px #003399 solid;
05      color:#006699;
06      border-bottom: #93bee2 1px solid;
07      border-left: #93bee2 1px solid;
08      border-right: #93bee2 1px solid;
09      border-top: #93bee2 1px solid;
10      background-image:url(../images/bluebuttonbg.gif);
11      background-color: #e8f4ff;
12      cursor: hand;
13      font-style: normal ;
14      width:60px;
15      height:22px;
16 }

2、蓝色按钮

01 .bluebuttoncss {
02      font-family: "tahoma", "宋体"; 
03      font-size: 9pt; color: #003366;
04      border: 0px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;*/
09      background-image:url(../images/blue_button_bg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

3、红色按钮

01 .redbuttoncss {
02      font-family: "tahoma", "宋体";
03      font-size: 9pt; color: #0066cc;
04      border: 1px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;
09      background-image:url(../images/redbuttonbg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

4、选择按钮

01 .selectbuttoncss{
02      font-family: "tahoma", "宋体"; 
03      font-size: 9pt; color: #0066cc;
04      border: 1px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;
09      background-image:url(../images/blue_button_bg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

5、绿色按钮

01 .greenbuttoncss {
02      font-family: "tahoma", "宋体"; 
03      font-size: 9pt; color: #0066cc;
04      border: 1px #93bee2 solid;
05      border-bottom: #93bee2 1px solid;
06      border-left: #93bee2 1px solid;
07      border-right: #93bee2 1px solid;
08      border-top: #93bee2 1px solid;
09      background-image:url(../images/greenbuttonbg.gif);
10      background-color: #ffffff;
11      cursor: hand;
12      font-style: normal ;
13 }

6、图像按钮

1 .imagebutton{
2      cursor: hand;     /*改变鼠标形状 
3 }

7、页面正文

01 body {
02      scrollbar-face-color: #ededf3;
03      scrollbar-highlight-color: #ffffff;
04      scrollbar-shadow-color: #93949f;
05      scrollbar-3dlight-color: #ededf3;
06      scrollbar-arrow-color: #082468;
07      scrollbar-track-color: #f7f7f9;
08      scrollbar-darkshadow-color: #ededf3;
09      font-size: 9pt; 
10      color: #003366;
11      overflow:auto;
12 } 
13 td { font-size: 12px }
14 th {
15      font-size: 12px;
16 }

8、下拉选择框

1 select{
2      border-right: #000000 1px solid;
3      border-top: #ffffff 1px solid;
4      font-size: 12px; 
5      border-left: #ffffff 1px solid;
6      color:#003366;
7      border-bottom: #000000 1px solid;
8      background-color: #f4f4f4;
9 }

9、线条文本编辑框

01 .editbox{
02      background: #ffffff;
03      border: 1px solid #b7b7b7;
04      color: #003366;
05      cursor: text;
06      font-family: "arial";
07      font-size: 9pt;
08      height: 18px;
09      padding: 1px; 
10 }

10、多行文本框

01 .multieditbox{
02      background: #f8f8f8;
03      border-bottom: #b7b7b7 1px solid;
04      border-left: #b7b7b7 1px solid;
05      border-right: #b7b7b7 1px solid;
06      border-top: #b7b7b7 1px solid;
07      color: #000000;
08      cursor: text;
09      font-family: "arial";
10      font-size: 9pt;
11      padding: 1px; 
12 }

11、阴影风格的表单

1 .shadow {
2      position:absolute;
3      z-index:1000;
4      top:0px;
5      left:0px; 
6      background:gray;
7      background-color:#ffcc00;
8      filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);
9 }

12、只显一条横线的输入框

1 .logintxt{
2      border-right: #ffffff 0px solid;
3      border-top: #ffffff 0px solid;
4      font-size: 9pt; 
5      border-left: #ffffff 0px solid;
6      border-bottom: #c0c0c0 1px solid;
7      background-color: #ffffff
8 }

13、没有边框的输入框

1 .noneinput{
2      text-align:center;
3      width:99%;height:99%;
4      border-top-style: none;
5      border-right-style: none;
6      border-left-style: none;
7      background-color: #f6f6f6;
8      border-bottom-style: none;
9 }

转载：

http://bbs.phpchina.com/thread-178914-1-2.html

标签：
发布在 html js | 评论关闭 浏览24 次

走出误区 让你的CSS书写更加高效

2010年03月30日，星期二
热度:

根据一些CSS写作经验，如何提高渲染效率及所占用消耗的资源，我们来浅谈一下CSS的渲染效率，书写高效的CSS。

相关精彩文章

Windows 7旗舰版安装时实现多版本

教你正确设置Windows 7的虚拟内存 1、十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。

* 不赞成 – color:#f3a;

* 建议用 – color:#FF33AA;

2、display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。

* 不赞成 – visibility:hidden;

* 建议用 – display:none;

3、border:none;与border:0;的区别

和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。

* 不赞成 – border:0;

* 建议用 – border:none;

4、不宜过小的背景图片平铺

一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。

* 不赞成 – 宽高8px以下的平铺背景图片

* 建议用 – 衡量适中体积及尺寸的背景图片

5、IE的滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。

* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。

* 建议用，最好选择其它方法能避免使用滤镜。

6、*{ margin:0; padding:0;}避免浏览器样式差异

*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。

* 不赞成，使用*号通配符

* 不赞成，div span button b table等标签纳入通配符控制内外填充样式

* 建议用，有选择性地使用通配符控制内外填充样式。

7、不要添加额外的标签来描述class或id

如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。

* 不赞成 – button#backButton { }

* 不赞成 – .menu-left #newMenuIcon { }

* 建议用 – #backButton { }

* 建议用 – #newMenuIcon { }

8、尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。

* 不赞成 – treeitem[mailfolder=”true”] > treerow > treecell { }

* 建议用 – .treecell-mailfolder { }

9、避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。

* 不赞成 – treehead treerow treecell { }

* 好一点，但还是不行(参照下一条) – treehead > treerow > treecell { }

10、标签类中不要包含子选择符

不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下）

* 不赞成 – treehead > treerow > treecell { }

* 建议用 – .treecell-header { }

11、留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。

* 不赞成 – treeitem[IsImapServer=”true”] > treerow > .tree-folderpane-icon { }

请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

* 建议用 – .tree-folderpane-icon[IsImapServer=”true”] { }

标签：
发布在 软件技巧 | 评论关闭 浏览23 次

调试诊治CSS布局的10个有效方法

2010年03月30日，星期二
热度:

 1. 检查HTML元素是否有拼写错误、是否忘记结束标记

    即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

    2. 检查CSS是否正确

    检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

    3. 确定错误发生的位置

    如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

    4. 利用border属性确定出错元素的布局特性

    使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

    5. float元素的父元素不能指定clear属性

    MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。

    6. float元素务必指定width属性

    很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

    另外指定元素时尽量使用em而不是px做单位。

    7. float元素不能指定margin和padding等属性

    IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。也可以使用hack方法为IE指定特别的值。

    8. float元素的宽度之和要小于100%

    如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

    9. 是否重设了默认的样式？

    某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

    10. 是否忘记了写DTD？

    如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

标签：
发布在 html js | 评论关闭 浏览29 次