查看完整版本: 学习制作风格之四 - Discuz! CSS 详解

学习制作风格之四 - Discuz! CSS 详解

---------------- 承接教学三 ---------------



无点开头即 css 默认已有的样式名称， 有点开头即自定义样式名称。
有点开头的样式调用方法为 class="样式名字",
例如：
定义个样式名为 abc
.abc        { font: 12px Verdana }
调用时写
<font class="abc">测试文字</font>


[box=#FFFFFF]
[color=purple]<style type="text/css"><!--        [color=green]// CSS定义开始[/color]
a                        { text-decoration: none; color: {LINK} }
[color=green]// a 代表，连接文字定义样式   
// text-decoration: none 定义文本样式，none 即无;
// color: {LINK} 定义文字颜色，从风格配色方案中获取[/color]

a:hover                        { text-decoration: underline }
[color=green]// a:hover 代表连接当鼠标指向时之样式
// text-decoration: underline 定义文本样式，underline 即下划线[/color]

body                        { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
[color=green]// body 定义整个页面样式   
// scrollbar-base-color: {ALTBG1} 定义滚动条颜色;
// scrollbar-arrow-color: {BORDERCOLOR} 定义滚动条的箭头颜色;
// font-size: {FONTSIZE} 定义文字大小;
// {BGCODE} 定义背景属性，如果您在配色方案中定义背景为颜色，那么就输出 background-color: 颜色代码，如果定位图片就输出 background-image: url(图片的相对路径)[/color]

table                        { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
[color=green]// table 定义页面中表格样式
// font: {FONTSIZE} {FONT} 定义表格中字体大小和文字字体;
// color: {TABLETEXT}  定义表格中文字颜色[/color]

input,select,textarea        { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
[color=green]// input,select,textarea 定义这三种表单样式
// font: {SMFONTSIZE} {FONT} 定义表单中字体大小和文字字体;
// color: {TABLETEXT} 定义表单中字体颜色;
// font-weight: normal 定义表单中字体模式，normal 即标准;
// background-color: {ALTBG1} 定义表单的背景颜色[/color]

select                        { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
[color=green]// select   独立定义下拉表单样式
// font: {SMFONTSIZE} {SMFONT} 定义下拉表单字体大小和文字字体;
// color: {TABLETEXT} 定义下拉表单文字颜色;
// font-weight: normal 定义下拉表单中字体模式，normal 即标准;
// background-color: {ALTBG1} 定义表单的背景颜色[/color]

[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0602/css_tech_04_emz1UFZAgKy7.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=32180&nothumb=yes][b]css_tech_04.gif[/b][/url] (719 Bytes)
2006-2-2 20:03


.nav                        { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
[color=green]// .nav ( .开头的为自定义css样式名称,名字可以自己任意定义 ) 这个在 Discuz!中为 导航栏的样式
// font: {FONTSIZE} {FONT} 导航栏的文字大小和文字字体;
// color: {TEXT} 导航栏的文字颜色;
// font-weight: {BOLD} 导航栏的文字模式,{BOLD}是从配色方案中获取，blod意思为粗体[/color]

.nav a                        { color: {TEXT} }
[color=green]// .nav a  定义导航栏的连接样式
// color: {TEXT} 定义导航栏连接文字颜色[/color]


[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0602/css_tech_01_a4uPuRM4AiZ3.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=32177&nothumb=yes][b]css_tech_01.gif[/b][/url] (1.36 KB)
2006-2-2 20:03


.header                        { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
[color=green]// .header  在Discuz! 中定义为 表头栏样式
// font: {SMFONTSIZE} {FONT} 表头栏文字大小和字体;
// color: {HEADERTEXT} 表头栏文字颜色;
// font-weight: {BOLD} 表头栏文字模式;
// {HEADERBGCODE} 表头栏背景样式，如果配色方案中设定是颜色则输出 background-color: 颜色代码,如果设定是图片则输出 background-image: url(图片相对路径)[/color]

.header a                { color: {HEADERTEXT} }
[color=green]// .header a 表头栏连接样式
// color: {HEADERTEXT} 表头栏连接颜色[/color]

.category                { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
[color=green]// .category 在Discuz! 中定义为 栏目样式
// font: {SMFONTSIZE} {SMFONT} 栏目字体大小和字体;
// color: {CATTEXT} 栏目字体颜色;
// {CATBGCODE} 栏目背景样式，如果配色方案中设定是颜色则输出 background-color: 颜色代码,如果设定是图片则输出 background-image: url(图片相对路径)[/color]


[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0602/css_tech_02_xomoDMI8gvTd.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=32178&nothumb=yes][b]css_tech_02.gif[/b][/url] (612 Bytes)
2006-2-2 20:03


.tableborder                { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
[color=green]// .tableborder 表格边线样式
// background: {INNERBORDERCOLOR} 表格边线背景颜色;
// border: {BORDERWIDTH}px solid {BORDERCOLOR}  表格边线的边线宽度({BORDERWIDTH}px)，边线样式(solid为直线，none 为没有边框，dotted为点线式，dashed为破折线式，double为双线式，groove为槽线式，ridge为脊线式，inset为内嵌效果，window-inset和inset效果相同，但比inset外面多加一个直线边框，
outset为突起效果)，边线颜色({BORDERCOLOR})[/color]

[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0602/css_tech_03_1GQeS7uWC4pn.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=32179&nothumb=yes][b]css_tech_03.gif[/b][/url] (1.62 KB)
2006-2-2 20:03


.singleborder                { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
[color=green]// .singleborder 单独边线样式
// font-size: 0px 定义文字大小;
// line-height: {BORDERWIDTH}px 定义行高;
// padding: 0px 定义边距;
// background-color: {ALTBG1} 背景颜色[/color]

.smalltxt                { font: {SMFONTSIZE} {SMFONT} }
[color=green]// .smalltxt   小字体样式
// font: {SMFONTSIZE} {SMFONT} 定义字体大小和字体[/color]

.outertxt                { font: {FONTSIZE} {FONT}; color: {TEXT} }
[color=green]// .outertxt 表格外字体样式
// font: {FONTSIZE} {FONT} 定义字体大小和字体;
// color: {TEXT} 定义字体颜色[/color]

.outertxt a                { color: {TEXT} }
[color=green]// .outertxt a 表格外字体连接样式
// color: {TEXT} 定义字体颜色[/color]

.bold                        { font-weight: {BOLD} }
[color=green]// .bold  字体是否粗体样式
// font-weight: {BOLD} 定义字体模式[/color]

[img]http://www.discuz.net/images/default/attachimg.gif[/img] [img]http://www.discuz.net/attachments/month_0602/css_tech_05_hNHVKkvJovcK.gif[/img] [img]http://www.discuz.net/images/attachicons/image.gif[/img] [url=http://www.discuz.net/attachment.php?aid=32181&nothumb=yes][b]css_tech_05.gif[/b][/url] (2.02 KB)
2006-2-2 20:03


.altbg1                        { background: {ALTBG1} }
[color=green]// .altbg1 表格1样式，为颜色比较深的
// background: {ALTBG1} 定义背景[/color]

.altbg2                        { background: {ALTBG2} }
[color=green]// .altbg2 表格2样式，为颜色比较淡的
// background: {ALTBG2} 定义背景[/color]

--></style> [color=green]// CSS 定义结束[/color][/color]
[/box]

偶啥时才能熬出头啊.现在金钱好少，好少，慢慢做吧。

我毫不犹豫地把楼主的这个帖子收藏了

是转的把 ，说得不错 再看一次

看完楼主的帖子，我的心情竟是久久不能平静。面对楼主的帖子，我震惊得几乎不能动弹了，楼主那种裂纸欲出的大手笔，竟使我忍不住一次次地翻开楼主的帖子，每看一次，赞赏之情就激长数分，我总在想，是否有神灵活在它灵秀的外表下，以至能使人三月不知肉味，使人有余音绕梁、三日不绝的感受。