{教材}PJBlog2 皮肤文件详解系列之 global.css
Writer:TZH-Lordvoldemont; From: http://www.tangzhehao.com.cn/; CopyRight(c)2008 BBS.PJHOME.NET
版权所有·未经许可不得转载·PJBBS内部专供
第一部分 参考内容及其解释；
『
body{
background:#841010 url('bg.gif') center repeat;/*--背景颜色，背景图片（相对路径相对于该皮肤目录内的global.css文件而言），背景图片对齐方式，可用参数：left : 左对齐；right : 右对齐；center : 居中；justify : 两端对齐；背景图片平铺方式，可用参数：repeat : 背景图像在纵向和横向上平铺；no-repeat : 背景图像不平铺；repeat-x : 背景图像在横向上平铺；repeat-y : 背景图像在纵向平铺；--*/
margin:0px;/*--外补丁参数，详细解释在P.S.中--*/
padding:0px;/*--内补丁参数，详细解释在P.S.中--*/
font-family: Verdana, PMingLiU;/*--默认字体，推荐使用系统内置的常用字体，如：宋体等，详细解释在P.S.中--*/
font-size: 12px;/*--字体大小，推荐12px--*/
color: #000;/*--内容字体颜色，不包括链接字体，可用颜色采集器，Photoshop，Dreamweaver或者苏昱的《样式表中文手册》附录中的颜色表等工具采集相对应的颜色代码；附加解释在P.S.中--*/
text-align: left;/*--文字对齐方式，不包括链接文字，可用参数：left : 左对齐；right : 右对齐；center : 居中；justify : 两端对齐；--*/
}
/*--———以—下—内—容—建—议—不—要—修—改———--*/
img {max-width: 100%;height: auto;}/*--图片缩放--*/
select{font-family: Verdana, Arial}/*--改变下拉菜单的字体，可用设置参数：font-site、font-family、background-color、color等等*感谢夜游人的准确解释--*/
th{background:#CEDAEA;border-bottom:1px solid #819FC7}/*--改变member.asp文件表格式样的设置*很小的一个小细节，感谢PuterJam的指导，可惜谁也没发现--*/
标准格式：
复制内容到剪贴板
代码:
body{
background:# url('') ;
margin:;
padding:px;
font-family:;
font-size:px;
color:#;
text-align:;
}
img {max-width: 100%;height: auto;}
select{font-family: Verdana, Arial}
th{background:#CEDAEA;border-bottom:1px solid #819FC7}』
第二部分 P.S.：
『
A. 此文件作用在参照了我的解释之后你肯定明白了，就是对PJ皮肤文件的整体进行设置。所以PuterJam叫它作全局样式表。
B. Margin 外补丁参数的详细解释：设置对象四边的外延边距。
以下内容引自苏昱的《样式表中文手册》关于内补丁参数的解释：引用:
1. 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
2. 如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。
3. 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
1. padding{1px 2px 3px 4px}
2. padding{1px}
3. padding{1px 3px 3px}
效果：
请参考苏昱的《样式表中文手册》，见附件；
C. Padding 内补丁参数的详细解释：设置对象四边的内延边距。其他解释及示例和效果与外补丁相同。
D. Font-family 字体名称参数的详细解释：按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起。
E. Color 颜色代码的附加解释：CSS中颜色代码的组成：
1. 一般形式为#××××××，其中，#为开头必备符号，然后后接由字母或者数字组成的六位数代码；
2. 特别形式分为两种，a) 缩写形式。如#000000（黑色），可以缩写成#000；再举一例：如#ffffff（白色），可以缩写成#fff。也就是说只要六位数代码均为相同的数字或字母组成，就可以把它缩写成三位，可以减少三位。b) 英文形式。如#000000（黑色），可以用英文写成black；再举一例：如#ffffff（白色），可以用英文写成white。也就是说，我们可以用英文名称代替#式代码，但是请注意，不推荐使用英文形式，因为很多它限定于W3C-十六色安全色盘（black,white,red,yellow,Lime,Aqua,Blue,Fuchsia,Gray,Silver,Maroon,Olive,Green,Teal,Navy,Purple,Transparent），而且可能会受到不同浏览器的限制。
F. 相对路径与绝对路径；
a) 绝对路径。正如其名，它是绝对的，通俗的来讲可以说它是“死”的、不变的，举个例子：http://www.tangzhehao.com.cn/blog/default.asp，这就是一个绝对路径，它有一个缺点，也就是说，如果我的域名www.tangzhehao.com.cn 失效了，然后我使用别的域名，这时，这个绝对路径也会因此失效。
b) 相对路径。这比较难理解。也如其名，它是相对的，相对绝对路径来说它是“活”的，可变的，举个例子：大家都知道，PJBLOG目录下有skins皮肤文件夹，这样相对PJBLOG的首页文件default.asp（绝对路径为http://www.tangzhehao.com.cn/blog/default.asp）来说，转向skins文件夹的相对路径就是“skins/”（不加双引号），相当于绝对路径的http://www.tangzhehao.com.cn/blog/skins/。假如skins文件夹下有一个t.html（绝对路径为http://www.tangzhehao.com.cn/blog/skins/t.html），那么转向sinks文件夹的相对路径如果还写成“skins/”那它就会跳转到http://www.tangzhehao.com.cn/blog/skins/skins/，而不是http://www.tangzhehao.com.cn/blog/skins/了。其中相对路径需要注意一下：就接着前面相对default.asp转向skins目录的例子来说，如果我把正确的转向相对写法“skins/”写成了“/skins/”，会发生什么？可以自己先试试看。告诉你，那就又会出错了！你可能会说，不会吧，只是前面多出了一个/就会又出错了？的确如此。多出一个/的"/skins/"就会转向到"http://www.tangzhehao.com.cn/skins/"而不是正确位置了。也就是说多出一个/的相对路径是相对域名（www.tangzhehao.com.cn）而言的，所以它跳转到了上面的地址。还有一种特殊形式：“.../skins/”这又是怎么一回事呢？用过windows系统的人都应该知道Windows里面在一个文件夹里可以使用“向上”按钮返回上一层文件夹目录，其实这里的“.../”（三个英文句号加一斜杠）就相当于windows系统的“向上”按钮，也就是说“.../skins/”的意思就是，返回上一级目录再跳转到skins文件夹，也就相当于绝对路径的"http://www.tangzhehao.com.cn/skins/"。
这三种相对路径的式样可能光听我纸上谈兵可能很难理解，所以我建议大家实践一下，这样会很快理解的，毕竟“实践是检验真理的唯一标准”。
参考资料：http://www.blabla.cn/html_tutorials/022_html_path.html
』
第三部分 拓展代码：
『
html{/*--滚动条设置代码开始--*/
SCROLLBAR-FACE-COLOR:#E2CE9E;/*--滚动条凸出部分的颜色--*/
SCROLLBAR-HIGHLIGHT-COLOR:#5D310C;/*--滚动条空白部分的颜色--*/
SCROLLBAR-SHADOW-COLOR:#5D310C;/*--立体滚动条阴影的颜色--*/
SCROLLBAR-3DLIGHT-COLOR:#5D310C;/*--滚动条亮边的颜色--*/
SCROLLBAR-ARROW-COLOR:#000000;/*--上下按钮上三角箭头的颜色--*/
SCROLLBAR-TRACK-COLOR:#5D310C;/*--滚动条的背景颜色--*/
SCROLLBAR-BASE-COLOR: #fcd800;/*--滚动条的基本颜色--*/
SCROLLBAR-DARKSHADOW-COLOR:#5D310C;/*--滚动条强阴影的颜色--*//*--滚动条设置代码结束--*/
cursor: url(skins/wand.cur);/*--鼠标光标形状设置，可使用绝对路径或相对路径，此处相对路径相对博客根目录--*/
}
标准格式：
复制内容到剪贴板
代码:
html{
SCROLLBAR-FACE-COLOR:#;
SCROLLBAR-HIGHLIGHT-COLOR:#;
SCROLLBAR-SHADOW-COLOR:#;
SCROLLBAR-3DLIGHT-COLOR:#;
SCROLLBAR-ARROW-COLOR:#;
SCROLLBAR-TRACK-COLOR:#;
SCROLLBAR-BASE-COLOR: #;
SCROLLBAR-DARKSHADOW-COLOR:#;
cursor: url();
}注意：
此代码应加在global.css文件中内容最前，即body{之前处。
』
第四部分 完整标准格式
『
复制内容到剪贴板
代码:
html{
SCROLLBAR-FACE-COLOR:#;
SCROLLBAR-HIGHLIGHT-COLOR:#;
SCROLLBAR-SHADOW-COLOR:#;
SCROLLBAR-3DLIGHT-COLOR:#;
SCROLLBAR-ARROW-COLOR:#;
SCROLLBAR-TRACK-COLOR:#;
SCROLLBAR-BASE-COLOR: #;
SCROLLBAR-DARKSHADOW-COLOR:#;
cursor: url();
}
body{
background:# url('') ;
margin:;
padding:px;
font-family:;
font-size:px;
color:#;
text-align:;
}
img {max-width: 100%;height: auto;}
select{font-family: Verdana, Arial}
th{background:#CEDAEA;border-bottom:1px solid #819FC7}完整格式文件下载见附件；
』
v2008030113411
更新记录：
v2008021416010
1. 增加相对路径与绝对路径的参考资料，方便新手理解；
2. 增加对附加代码滚动条部分的完整解释信息*，方便新手更改；此内容来自互联网；
v2008021419100
1. 增加版权信息；
2. 对代码解释采取新的符号/*-- --*/，使其如果直接被加入.css文件，不会影响文件的读取使用* 此内容引用自PuterJam-舜子在layout.css文件中的解释；
3. 增加标准格式，方便复制；
4. 增加完整标准格式，方便复制；
5. 增加版本号，便于了解更新；
v2008021502110
1. 修正第一部分中把repeat平铺方式当作对齐方式做解释的低级错误；
v2008021509211
1. 增加对此文件作用的解释，便于新人理解；
2. 增加感言；
3. 增加完整格式global.css文件的下载，便于新人参考；
4. 上传苏昱的《CSS样式表中文手册2.0》，防止链接失效；
5. 增加润色内容；
v2008021510311
1. 增加对select和th这两个位置参数的解释；
v2008030113411
1. 突然发现CSS样式表中文手册2.0不支持作用样式，所以上传了1.0版本的，新人如果想看功能演示就下载这个吧；
特别感谢：
PuterJam-舜子制造出PJBLOG2让我们能用到这么好这么优秀的BLOG系统，也让我们大家能聚在一起，关心PJBLOG，为PJBLOG贡献自己的一份力量，希望他能尽快推出PJBLOG3；
Anson管理员费心尽力尽责的管理好这个PJBBS，感谢他提拔我做版主，给我这么一个机会，感谢他教我们怎么做好版主，感谢论坛的光荣传统一直为我们提供这么好的福利，帮我那个不起眼的小站做了友谊链接；
还要感谢各位的支持，奋斗在各自版块上辛勤工作的各位版主，感谢默默无闻却一直在帮助新人的热心人，感谢一切关心PJBLOG、爱PJBLOG的人，感谢那些奋斗在破冰前线的电力工人，感谢CCTV，感谢MTV......
有点话多了.....
![[PJblog^2]技术支持论坛 - PJBLOG SUPPORT FORUM](images/phpwind/logo.gif){kind=logo}
