查看完整版本: {教材}PJBlog2 皮肤文件详解系列之 global.css[本区第一帖]

{教材}PJBlog2 皮肤文件详解系列之 global.css[本区第一帖]

{教材}PJBlog2 皮肤文件详解系列之 global.css

[b][color=red]Writer:TZH-Lordvoldemont; From: [url=http://www.tangzhehao.com.cn/]http://www.tangzhehao.com.cn/[/url]; CopyRight(c)2008 BBS.PJHOME.NET
版权所有·未经许可不得转载·PJBBS内部专供[/color][/b]

[color=blue]第一部分 参考内容及其解释；[/color]
『

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 : 两端对齐；--*/
}
[color=red]/*--———以—下—内—容—建—议—不—要—修—改———--*/[/color]
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的指导，可惜谁也没发现--*/

标准格式：[code]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}[/code]』

[color=blue]第二部分 P.S.：[/color]
[b]『
A. 此文件作用在参照了我的解释之后你肯定明白了，就是对PJ皮肤文件的整体进行设置。所以PuterJam叫它作[u][color=red]全局样式表[/color][/u]。

B. Margin 外补丁参数的详细解释：设置对象四边的外延边距。

以下内容引自苏昱的《样式表中文手册》关于内补丁参数的解释：
[quote]1. 如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
2. 如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。
3. 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。[/quote]

示例：
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) 绝对路径。正如其名，它是绝对的，通俗的来讲可以说它是“死”的、不变的，举个例子：[url=http://www.tangzhehao.com.cn/blog/default.asp]http://www.tangzhehao.com.cn/blog/default.asp[/url]，这就是一个绝对路径，它有一个缺点，也就是说，如果我的域名[url=http://www.tangzhehao.com.cn/]www.tangzhehao.com.cn[/url] 失效了，然后我使用别的域名，这时，这个绝对路径也会因此失效。
b) 相对路径。这比较难理解。也如其名，它是相对的，相对绝对路径来说它是“活”的，可变的，举个例子：大家都知道，PJBLOG目录下有skins皮肤文件夹，这样相对PJBLOG的首页文件default.asp（绝对路径为[url=http://www.tangzhehao.com.cn/blog/default.asp]http://www.tangzhehao.com.cn/blog/default.asp[/url]）来说，转向skins文件夹的相对路径就是“skins/”（不加双引号），相当于绝对路径的[url=http://www.tangzhehao.com.cn/blog/skins/]http://www.tangzhehao.com.cn/blog/skins/[/url]。假如skins文件夹下有一个t.html（绝对路径为[url=http://www.tangzhehao.com.cn/blog/skins/t.html]http://www.tangzhehao.com.cn/blog/skins/t.html[/url]），那么转向sinks文件夹的相对路径如果还写成“skins/”那它就会跳转到[url=http://www.tangzhehao.com.cn/blog/skins/skins/]http://www.tangzhehao.com.cn/blog/skins/skins/[/url]，而不是[url=http://www.tangzhehao.com.cn/blog/skins/]http://www.tangzhehao.com.cn/blog/skins/[/url]了。其中相对路径需要注意一下：就接着前面相对default.asp转向skins目录的例子来说，如果我把正确的转向相对写法“skins/”写成了“/skins/”，会发生什么？可以自己先试试看。告诉你，那就又会出错了！你可能会说，不会吧，只是前面多出了一个/就会又出错了？的确如此。多出一个/的"/skins/"就会转向到"http://www.tangzhehao.com.cn/skins/"而不是正确位置了。也就是说多出一个/的相对路径是相对域名（[url=http://www.tangzhehao.com.cn/]www.tangzhehao.com.cn[/url]）而言的，所以它跳转到了上面的地址。还有一种特殊形式：“.../skins/”这又是怎么一回事呢？用过windows系统的人都应该知道Windows里面在一个文件夹里可以使用“向上”按钮返回上一层文件夹目录，其实这里的“.../”（三个英文句号加一斜杠）就相当于windows系统的“向上”按钮，也就是说“.../skins/”的意思就是，返回上一级目录再跳转到skins文件夹，也就相当于绝对路径的"http://www.tangzhehao.com.cn/skins/"。
这三种相对路径的式样可能光听我纸上谈兵可能很难理解，所以我建议大家实践一下，这样会很快理解的，毕竟“实践是检验真理的唯一标准”。
参考资料：[url=http://www.blabla.cn/html_tutorials/022_html_path.html]http://www.blabla.cn/html_tutorials/022_html_path.html[/url]
』[/b]

[color=blue]第三部分 拓展代码：[/color]
『

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);/*--鼠标光标形状设置，可使用绝对路径或相对路径，此处相对路径相对博客根目录--*/
}

标准格式：[code]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();
}[/code][color=red]注意：
此代码应加在global.css文件中内容最前，即body{之前处。[/color]
』

[color=blue]第四部分 完整标准格式[/color]
『[code]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}[/code]完整格式文件下载见附件；
』

[align=right][size=1]v2008030113411[/size][/align]

更新记录：
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......
有点话多了.....

先占位，
这个教材系列之一的教程是今天（2008/2/14）12点至14点完成的，参考借鉴的主要是自己的经验和前人的经验。
特别感谢苏昱，他的《样式表中文手册》等系列教程，我认为新手和新接触CSS的人都务必人手一册。
因为时间用的不多，今年也没有再做皮肤，都是靠自己的记忆完成，错误在所难免，望各位大侠指正，小弟虚心学习！

第一部分的解释已完整；

苏昱的手册给我传一份,放到论坛的目录做一个备份,以免链接失效.教程写的通俗易懂,非常不错,如果能有对照的图片说明那就更棒了,不知能否补充.另外排版还可以润色一下,把重点内容突出出来

这个解释错了，被屏蔽。

select{font-family: Verdana, Arial}

该项[color=red][b]select[/b][/color]的意思是:

[b][color=red]改变下拉菜单的字体.
[/color][/b]
与之相关的设置参数还有：font-site、font-family、background-color、color等等...

楼上的select的解释非常准确、正确，得到了PuterJam的认可，但是th解释错了，所以小弟把帖子屏蔽了，避免误导新人。谁也没想到th改变的是member.asp文件式样的设置，很小的一个小细节，感谢PuterJam的指导，可惜谁也没发现。。

辛苦了:handshake

首先感谢[color=blue]tangzhehao[/color]版主与[color=blue]PuterJam[/color]老大对我所发表的意见给予肯定与认可,本人实感荣幸!
在此先向PuterJam与tangzhehao道谢!谢谢!

不过,对于th的解释,我相信我没解释错误,只不过是不够全面而已.

th与td基本相同使用.但,与之区别就是:
在th所在的单元格内容是粗体,
而在td单元格的内容只为默认而已.

如例子中:
th{background:#CEDAEA;border-bottom:1px solid #819FC7}

这里就是定义th单元格里的 背景色,底边框属性设置.但,这里无论你怎么样设置,[color=red]在th单元格里的内容还是粗体显示出来.[/color]

我想,这样应该更清楚吧!:) :D :handshake

[[i] 本帖最后由 HvTB4 于 2008-2-16 01:24 编辑 [/i]]

楼上理解错我的意思了，，你的解释是th解释是对的，它是定义单元格的，但方向性错了，，因为毕竟这个参数不能定义包括日志中单元格在内所有单元格，他只是用于member.asp的会员信息单元格，其他单元格全不受他控制，所以方向错了，这个解答也错了。。我起初解释的太草率了。。

整理的很不错，学习学习~

:handshake :handshake :handshake :handshake :handshake

介绍的不错 对我这样的小菜 有帮助

是哟 是哟

:handshake

正在学习,希望以后能做出更好的skins分享给大家.

好教程 学习中！

学习一下，稍微懂点，这下懂的更多点了。

没有下文了啊.还不够啊~~~:mad: