略谈userChrome.css（⾃⼰动⼿设置Firefox的外观）转
在Firefox的外观定义中，Mozilla使⽤了类似XML的XUL界⾯语⾔来实现，并且引⼊CSS定义各个元素的属性，即userChrome.CSS。由于每个⼈的系统设置不同，加之中⽂和西⽂的字体显⽰有些不同，所以我们在使⽤hills的主题之前，⼀般都会根据⾃⼰的需要对useChrome做适当的修改（⽐如修改字形字号）。so..为了便于以后修改，先简单讲⼀下在默认情况下涉及到的CSS属性吧。在userChrome中涉及的CSS属性主要有：
font-family (字体系列）
允许值 [[<；系列名>|<⼀般系列>],]*[<；系列名>|<⼀般系列>]
初始值 与⽤户代理有关
可否继承 是
适⽤于 所有元素
font-weight （字体加粗）
允许值 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值 normal
可否继承 是
适⽤于 所有元素
font-size （字体尺⼨）
允许值 可以定义成xx-small, large等值，但是这⾥⼀般使⽤pt(磅)作为单位
初识值 medium
可否继承 是
适⽤于 所有元素
padding（补⽩）
允许值 [<；长度> | <；百分⽐>]
margin （边界）
允许值 [<；长度> | <；百分⽐>]
!important (important rule，重要规则)
表⽰此规则⽆视其它规则的继承性
注意 由于中⽂字形很少有9pt（也就是12px）以下的点阵字体，所以如果你想要更好的现实效果，建议将所有8pt的字体尺⼨改为9pt。如果发现修改字形以后发⽣元素错位（⽐如偏⾼或偏低）可以利⽤修改该元素的padding属性来调整⾼度。
虽然只是CSS的冰⼭⼀⾓，但是有了以上的知识我们就可以根据⾃⼰的需要来修改userchrome啦..⽐如你知道，如果你想给书签栏换⼀个字体，就应该修改它的 font-family属性，如果你想让它⽤粗体显⽰呢，就要把font-weight从normal改为bold。如果你继续钻研⼀下CSS，还会有更多的修改⽅法。当然，最好不要改掉原userchrome中设置的!important标记。
以下是userChrome.CSS中各个部分的作⽤域，虽然⽤的是otherside⾃⼰的userChrome，但是结构和顺序与原userChrome相⽐没有变化。
/*
* Edit this file and copy it as userChrome.CSS into your
* profile-directory/chrome/
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the @namespace line -- it's required for correct functioning
*/
@namespace url("/keymaster/gatekeeper/ly.xul"; /* set default namespace to XUL */ }
/* ::::: fixed font settings ::::: */
声明名字空间及说明部分，请勿修改。
#urlbar {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
}
地址栏字体定义，定义了字体系列，字体加粗，字体尺⼨。
.textbox-input-box {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
margin-bottom: 1px !important;
}
⽂字输⼊框字体定义，定义了字体系列，字体加粗，字体尺⼨，下边距。
.searchbar-engine-image {
margin-bottom: -1px !important;
}
.searchbar-dropmarker-image {
margin-bottom: -1px !important;
}
搜索引擎栏图⽚定义，定义了下边距。
.
bookmark-item > .toolbarbutton-text {
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 3px !important;
}
书签栏字体定义，定义了字体系列，字体加粗，字体尺⼨，下边留⽩。
tab {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 8pt !important;
}
.tabbrowser-tabs .tab-text {
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 1px !important;
}
.tabbrowser-tabs *|tab[selected="true"] .tab-text {
padding-top: 1px !important;
}
.tabbrowser-tabs .tab-text2 {
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 1px !important;
}
标签栏字体定义，定义了字体系列，字体加粗，字体尺⼨，下边留⽩。
注意 如果你修改了.tabbrowser-tabs中其中⼀项的某⼀属性，其他项的属性应该与其保持⼀致。
fontweight属性bold.tabbrowser-tabs .tab-icon {
margin: 3px 1px 3px 0px !important;
}
.tabbrowser-tabs *|tab[selected="true"] .tab-icon {
margin: 3px 1px 3px 0px !important;
}
标签栏图标位置定义，定义了图表的下边距。
.autocomplete-treebody::-moz-tree-cell-text {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
}
⾃动填充完成列表的字体定义，定义了字体系列，字体加粗，字体尺⼨。
tree {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 9pt !important;
}
树形列表字体定义，定义了字体系列，字体加粗，字体尺⼨。
本部分定义对Sidebar部分的字体有效，⽐如书签纪录(Ctrl+b)和历史纪录(Ctrl+h)。
popup, menu, menuitem {
font-family: lucida grande, lucida grande !important;
font-size: 9pt !important;
text-align: left !important;
}
菜单字体的定义，定义了字体系列，字体尺⼨以及对齐⽅式。
menulist {
font-family: lucida grande, lucida grande !important;
font-size: 9pt !important;
}
菜单栏字体定义，定义了字体系列，字体尺⼨。
#status-bar,
#bookmark-window statusbar {
font-family: lucida grande, lucida grande !important;
font-weight: normal !important;
font-size: 8pt !important;
}
状态栏字体定义，定义了字体系列，字体加粗，字体尺⼨。
#FindToolbar {
font-family: lucida grande, lucida grande !important;
font-size: 9pt !important;
}
查栏(Ctrl+f)字体定义，定义了字体系列，字体尺⼨。
以下是⼀些修改⽅法的举例，你可以举⼀反三的派⽣出更多⽅法。
关于标签字体颜⾊。
如果你想修改标签字体颜⾊，可以修改以下字段
sample:
.tabbrowser-tabs .tab-text2 {
color: red !important;
font-family: lucida grande !important;
font-weight: bold !important;
font-size: 8pt !important;
padding-top: 1px !important;
}
给tabbrowser-tabs .tab-text2类加上color属性，值可以是标准16⾊或RGB颜⾊或16进制颜⾊(⽐如#FFFFFF是⽩⾊)。 如果你不知道想使⽤的颜⾊值，可以在photoshop或fireworks的调⾊板下查到16进制颜⾊值。
关于书签栏上⽅的分隔线。
如果你想去掉这条分隔线
在userChrome.CSS中加⼊
toolbar, menubar {
border-bottom: 2px solid !important;
-moz-border-bottom-colors: transparent transparent !important;
}
除了safari主题以外好像都有效..
如有疏漏之处还请⼤家指正
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论