如果您对 CSS 不了解，请先学习 CSS，详细请参阅置顶文章或使用搜索引擎帮助您吧！
学习制作风格之一 - 前期图片
https://discuz.dismall.com/viewthread.php?tid=166841
学习制作风格之二 - 新增风格和摸板
https://discuz.dismall.com/viewthread.php?tid=178259
学习制作风格之三 - 模板常见语句分析及知识技巧
https://discuz.dismall.com/viewthread.php?tid=207956
---------------- 承接教学三 ---------------
无点开头即 css 默认已有的样式名称， 有点开头即自定义样式名称。
有点开头的样式调用方法为 class="样式名字",
例如：
定义个样式名为 abc
.abc { font: 12px Verdana }
调用时写
<font class="abc">测试文字</font>
[box=#FFFFFF]
<style type="text/css"><!-- // CSS定义开始
a { text-decoration: none; color: {LINK} }
// a 代表，连接文字定义样式
// text-decoration: none 定义文本样式，none 即无;
// color: {LINK} 定义文字颜色，从风格配色方案中获取
a:hover { text-decoration: underline }
// a:hover 代表连接当鼠标指向时之样式
// text-decoration: underline 定义文本样式，underline 即下划线
body { scrollbar-base-color: {ALTBG1}; scrollbar-arrow-color: {BORDERCOLOR}; font-size: {FONTSIZE}; {BGCODE} }
// body 定义整个页面样式
// scrollbar-base-color: {ALTBG1} 定义滚动条颜色;
// scrollbar-arrow-color: {BORDERCOLOR} 定义滚动条的箭头颜色;
// font-size: {FONTSIZE} 定义文字大小;
// {BGCODE} 定义背景属性，如果您在配色方案中定义背景为颜色，那么就输出 background-color: 颜色代码，如果定位图片就输出 background-image: url(图片的相对路径)
table { font: {FONTSIZE} {FONT}; color: {TABLETEXT} }
// table 定义页面中表格样式
// font: {FONTSIZE} {FONT} 定义表格中字体大小和文字字体;
// color: {TABLETEXT} 定义表格中文字颜色
input,select,textarea { font: {SMFONTSIZE} {FONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
// input,select,textarea 定义这三种表单样式
// font: {SMFONTSIZE} {FONT} 定义表单中字体大小和文字字体;
// color: {TABLETEXT} 定义表单中字体颜色;
// font-weight: normal 定义表单中字体模式，normal 即标准;
// background-color: {ALTBG1} 定义表单的背景颜色
select { font: {SMFONTSIZE} {SMFONT}; color: {TABLETEXT}; font-weight: normal; background-color: {ALTBG1} }
// select 独立定义下拉表单样式
// font: {SMFONTSIZE} {SMFONT} 定义下拉表单字体大小和文字字体;
// color: {TABLETEXT} 定义下拉表单文字颜色;
// font-weight: normal 定义下拉表单中字体模式，normal 即标准;
// background-color: {ALTBG1} 定义表单的背景颜色
.nav { font: {FONTSIZE} {FONT}; color: {TEXT}; font-weight: {BOLD} }
// .nav ( .开头的为自定义css样式名称,名字可以自己任意定义 ) 这个在 Discuz!中为 导航栏的样式
// font: {FONTSIZE} {FONT} 导航栏的文字大小和文字字体;
// color: {TEXT} 导航栏的文字颜色;
// font-weight: {BOLD} 导航栏的文字模式,{BOLD}是从配色方案中获取，blod意思为粗体
.nav a { color: {TEXT} }
// .nav a 定义导航栏的连接样式
// color: {TEXT} 定义导航栏连接文字颜色
.header { font: {SMFONTSIZE} {FONT}; color: {HEADERTEXT}; font-weight: {BOLD}; {HEADERBGCODE} }
// .header 在Discuz! 中定义为 表头栏样式
// font: {SMFONTSIZE} {FONT} 表头栏文字大小和字体;
// color: {HEADERTEXT} 表头栏文字颜色;
// font-weight: {BOLD} 表头栏文字模式;
// {HEADERBGCODE} 表头栏背景样式，如果配色方案中设定是颜色则输出 background-color: 颜色代码,如果设定是图片则输出 background-image: url(图片相对路径)
.header a { color: {HEADERTEXT} }
// .header a 表头栏连接样式
// color: {HEADERTEXT} 表头栏连接颜色
.category { font: {SMFONTSIZE} {SMFONT}; color: {CATTEXT}; {CATBGCODE} }
// .category 在Discuz! 中定义为 栏目样式
// font: {SMFONTSIZE} {SMFONT} 栏目字体大小和字体;
// color: {CATTEXT} 栏目字体颜色;
// {CATBGCODE} 栏目背景样式，如果配色方案中设定是颜色则输出 background-color: 颜色代码,如果设定是图片则输出 background-image: url(图片相对路径)
.tableborder { background: {INNERBORDERCOLOR}; border: {BORDERWIDTH}px solid {BORDERCOLOR} }
// .tableborder 表格边线样式
// background: {INNERBORDERCOLOR} 表格边线背景颜色;
// border: {BORDERWIDTH}px solid {BORDERCOLOR} 表格边线的边线宽度({BORDERWIDTH}px)，边线样式(solid为直线，none 为没有边框，dotted为点线式，dashed为破折线式，double为双线式，groove为槽线式，ridge为脊线式，inset为内嵌效果，window-inset和inset效果相同，但比inset外面多加一个直线边框，
outset为突起效果)，边线颜色({BORDERCOLOR})
.singleborder { font-size: 0px; line-height: {BORDERWIDTH}px; padding: 0px; background-color: {ALTBG1} }
// .singleborder 单独边线样式
// font-size: 0px 定义文字大小;
// line-height: {BORDERWIDTH}px 定义行高;
// padding: 0px 定义边距;
// background-color: {ALTBG1} 背景颜色
.smalltxt { font: {SMFONTSIZE} {SMFONT} }
// .smalltxt 小字体样式
// font: {SMFONTSIZE} {SMFONT} 定义字体大小和字体
.outertxt { font: {FONTSIZE} {FONT}; color: {TEXT} }
// .outertxt 表格外字体样式
// font: {FONTSIZE} {FONT} 定义字体大小和字体;
// color: {TEXT} 定义字体颜色
.outertxt a { color: {TEXT} }
// .outertxt a 表格外字体连接样式
// color: {TEXT} 定义字体颜色
.bold { font-weight: {BOLD} }
// .bold 字体是否粗体样式
// font-weight: {BOLD} 定义字体模式
.altbg1 { background: {ALTBG1} }
// .altbg1 表格1样式，为颜色比较深的
// background: {ALTBG1} 定义背景
.altbg2 { background: {ALTBG2} }
// .altbg2 表格2样式，为颜色比较淡的
// background: {ALTBG2} 定义背景
--></style> // CSS 定义结束
[/box]
[ 本帖最后由 Tea 于 2006-2-3 14:44 编辑 ] |
