个性化修改的样式表(Style Sheet)设定项目!

══════════════════════════════════════
■ 播放器的进阶设定法:修改样式表设定项目
══════════════════════════════════════
除了播放程序的基本设定和播放清单内容以外,在播放程序的原始码里面还「隐藏」了
不少可供个性化修改的样式表(Style Sheet)设定项目!您可以凭自己对CSS样式表语法
的认识,加入其它更具创意的设定值。
以下有一些预设可供修改样式的地方,让您参考:
(请注意这些地方可能会因为不同面板而有大小差异)

▽ a)播放面板的基本样式表设定 (exobud.css)
└──────────────────────
在 exobud.css 这个 CSS 样式表档案里面,您可以找到基本样式表的设定内容。
▼以下是其中几个样式项目的设定:
body { margin-top: 0px; margin-right: 0px; ← 不保留边界的设定
margin-bottom: 0px; margin-left: 0px;
cursor: crosshair; ← 鼠标光标呈十字形
overflow: hidden; } ← 不显示窗口卷动轴
body,td { font-family: ‘Tahoma’,’Verdana’,’Arial’; ← 字形名称
font-size: 9pt; } ← 字形大小
/* 显示媒体标题的样式表设定 */ (此乃 精简版 播放器的设定)
.title { border-width: 1px; ← 框线粗幼度(像素)
border-style: solid; ← 框线形式
border-color: silver; ← 框线颜色
background-color: white; ← 背景颜色
color: black; ← 文字(前景)颜色
font-family: ‘Tahoma’,’Verdana’,’Arial’; ← 字形名称
font-size: 9pt; } ← 字形大小
/* 显示时间长度的样式表设定 */ (此乃 精简版 播放器的设定)
.time { border-width: 1px; ← 框线粗幼度(像素)
border-style: solid; ← 框线形式
border-color: silver; ← 框线颜色
background-color: white; ← 背景颜色
color: black; ← 文字(前景)颜色
font-family: ‘Tahoma’,’Verdana’,’Arial’; ← 字形名称
font-size: 9pt; } ← 字形大小
(注:箭嘴 “←” 所示的地方是为了方便说明才加上去的,实际编辑时请不要加入)
※ 您可以在 body 样式里面加入 background 属性来设定背景颜色或图档,例如:
background-color: aliceblue; 或 background-image: url(./bg.gif);
※ .title 和 .time 两个样式,分别是显示媒体标题和时间长度的样式设定项目。
您可以根据自己的个人喜好来修改字形名称/大小/颜色、框线粗幼度/颜色/模式
等的设定值。

▽ b)字幕框的样式设定 (exobud.htm)
└──────────────────
▼在 exobud.htm 这个 HTML 档案,接近最底部的地方, 可以找到这段 DIV 语法:
(这里定义了一个区块,其 ID 应为 “capText”)
<div id=”capText” style=”width:100%;height:60;color:white;
background-color:#555555;display:none”>ExoBUD MP(II) Captioning(SMI)</div>
※ 您可以将字幕框放在播放面板上的任何位置,宽度(width)和高度(height)都
可以修改的。同样地,您也可以根据自己的喜好 修改/增删 其它样式属性的
设定,例如您可以加入 font-size 的属性来设定字幕框文字的大小。
※ 字幕框的部份,通常会以特别的颜色来显示,用以突出其与播放器其它部份的
分别;预设的面板就是以深色的底色作背景颜色、以白色作文字(前景)颜色。
※ 无论您是否使用字幕功能,也必须保留这段 DIV 语法,否则会导致播放程序
无法正常运作。(区块的 ID 是不能更改的)
※ 只有在 “blnUseSmi” 设定值为 true 的情况下(使用字幕功能),字幕框才会
显示出来。

▽ c)播放清单上的 body 样式设定 (exobudpl.css)
└────────────────────────
在另一个用来设定播放清单 CSS 样式表的 exobudpl.css 档案里面,您亦可以
找到基本样式表的设定内容。
▼以下是 body 样式项目的设定:
body { margin-top: 0px; margin-right: 0px; ← 不保留边界的设定
margin-bottom: 0px; margin-left: 0px;
background-color: #8498A3; ← 背景颜色
background-image: url(./img/pl_skin.jpg); ← 背景图档(*)
background-repeat: no-repeat; ← 背景图是不重复的(*)
background-attachment: fixed; ← 背景图是固定位置(*)
background-position: bottom right; ← 背景图放底部靠右(*)
cursor: crosshair; } ← 鼠标光标呈十字形
(*) 这些属性是为了方便让大家参考才加上去的。
※ 如果面板所使用的播放清单,有需要显示卷动轴的话,body样式里面可能已经
加入了关于卷动轴的属性设定。
※ 以上所示 body 的样式设定仅供参考,因为每款面板所显示的播放清单,也会
使用不同的样式设定。如果您想更进一步了解 body 的样式设定法,请在网上
搜寻有关资料。

▽ d)播放清单上的连结样式设定 (exobudpl.css)
└───────────────────────
同样在 exobudpl.css 这个「播放清单样式表」档案里面,您还可以设定不同
类型的连结的颜色。
▼以下是包含 anchor (即 “A” 语法) 样式项目的设定:
a,a:link { color: #334455; text-decoration: none; }
a:visited { color: #223344; text-decoration: none; }
a:active { color: #334455; text-decoration: none; }
a:hover { color: gold; text-decoration: none; }
浏览器是如何决定什么类型的连结,以什么样式来显示?
a,a:link : 在指定时间之内,未曾到访过的连结
a:visited : 在指定时间之内,已经到访过的连结
a:active : 您正在到访的连结
a:hover : 您将鼠标移到其上的连结(实时变色)
※ 通常我们都会以连结的文字颜色(color)来区分不同类型的连结的。但也会同时
辅以底线 (text-decoration: underline;) 来加以区别。

▽ e)播放清单上的文字样式设定 (exobudpl.css)
└───────────────────────
播放清单上的文字,包括媒体标题及项目编号等,您都可以自行设定喜爱的样式。
▼以下是基本样式表中,关于文字样式的设定:
body,td { font-family: ‘Tahoma’,’Verdana’,’Arial’; ← 字形名称
font-size: 9pt; color: #B0C0D0; } ← 字形大小及颜色
※ 因为播放清单上所显示的媒体标题,本身都是页面上的连结,所以您在这里
设定的文字颜色,只会对项目编号有效,而不会适用于媒体标题。

══════════════════════════════════════

Leave a Reply