| 怡然网上 |
2007-07-30 14:29 |
PW WIND风格 CSS控制说明和一些基本知识
先了解一些最基本的知识
{} 成对出现：表示一段语句
; 分隔
.xxx 定义 class=xxx 调用
#xxx 定义 id=xxx 调用
现在我们开始看wind风格的css(在header.htm中)
我们一句句来看，先看第一句
body {font-family: Verdana;FONT-SIZE: 12px;MARGIN: 0;color: #000000;background: #ffffff;}
body{} 这里面是论坛整体设置
font-family: Verdana; 是字体样式
FONT-SIZE: 12px; 是字体大小，一般是12个象素大小
MARGIN: 0; 外补丁
color: #000000; 是字体的颜色
background: #ffffff; 是背景颜色
相关知识
也可以用图片做背景，
background-image: url(图片地址); 添加背景图片
background-attachment:fixed; 背景图片固定
background-position: center; 背景图片居中
text-align: center; 所有字体都居中
也可以在body中定义滚动条的样式，
SCROLLBAR-FACE-COLOR: rgb(10,236,209); //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: rgb(23,255,155); //滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: rgb(255,116,23); //立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: rgb(66,93,127); //滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: rgb(93,232,255); //上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: rgb(255,70,130); //滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: rgb(10,0,209); //滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: rgb(66,93,128)； //滚动条的基本颜色
Scroll = no 去掉网页中最右边滚动条
第二句了，以后我就不说是第几句了：)了
td {FONT-SIZE: 12px;}
表格内的控制，包括背景，字体，字体颜色，这个不用修改
textarea,input,select{
font-family: Verdana;
font-size: 12px;
background-color: #ffffff;
}
文本框，选择项，按钮的控制
这里可以diy文本框，选择项，按钮的样式
可以补充
color: #cccccc; 是字体的颜色
border:1px solid $tablecolor;边宽设置，1px是大小，solid是实线，$tablecolor是引用论坛边框的颜色
这里textarea,input,select是放在一起设置的，也可以分开设置，如
textarea{}
input,select{}
form{margin:0px; display:inline}
这个不用修改，不用离它
div.quote{
margin:5px 5px;
border:1px dashed $tablecolor;
padding:5px;
background:$forumcolorone;
line-height:normal;
}
你风格中的引用框的样式
margin:5px 5px; 检索或设置对象四边的外补丁，横距和竖距，可以根据自己喜好调整
border:1px dashed $tablecolor; 是边框属性，1px是大小，dashed是虚线，$tablecolor是引用论坛边框的颜色
solid是实线 none是无 dotted是点线 dashed是虚线 double是双线 groove是立体线
ridge是立体线 inset是凹线 outset是凸线
padding:5px;是内补丁属性，margin:5px;是外补丁属性
padding和margin可以做更具体的设置，如
padding-top:0px;padding-bottom:0px;padding-left:5px;padding-right:10px;
a { TEXT-DECORATION: none;}
连接文字的控制，现在是没下划线的
a:hover{ text-decoration: underline;}
鼠标移上连接文字时的效果控制，现在是带有下划线的，也可以加其他效果
img {border:0;}
带有连接图片的边框控制，现在没边框，这个不要修改
.banner{background: #84AACE;}
控制 论坛头部
.head {color: #FFFFFF;background: #84AACE;padding: 5px;font-weight:bold;}
.head a{color: #FFFFFF;}
控制 论坛分类啊、-=>论坛相关
font-weight:bold; 是表示字体加粗，其他的应该都知道什么意思了吧：)
normal : 默认值。正常的字体。相当于 400 。如果是normal的话就不用写了
bold : 粗体。相当于 700 。也相当于 b 对象的作用
bolder : 比 normal >粗
lighter : 比 normal >细
.f_one {background: $forumcolorone;}
.f_two {background: $forumcolortwo;}
.t_one {background: $threadcolorone;}
.t_two {background: $threadcolortwo;}
.r_one {background: $readcolorone;}
.r_two {background: $readcolortwo;}
分别是指：
版块列表颜色一、版块列表颜色二
文章列表颜色一、文章列表颜色二
阅读主题颜色一、阅读主题颜色二
变量在核心文件中设置
.hr {border-top: 1px solid $tablecolor; border-bottom: 0; border-left: 0; border-right: 0; }
分割线的控制，在线用户那里
.cbg { color:#000000;background: #E5E8EA;}
.cbg a{ color:#000000;}
表格栏目说明的控制，就是首页的（论坛 主题 文章 最后发表 版主）那里
.smalltxt {font-family: Tahoma, Verdana; font-size: 12px;}
.tinytxt {font-family: Tahoma, Verdana; font-size: 11px;}
字体的设置，smalltxt好象是右上角的多少贴子，多少会员那里的控制，tinytxt 好象横排后帖子数字体的控制， 这两个一般不用修改
.cfont { color:#FFFFFF; }
分类名称颜色的控制
.fnamecolor { color:#003366;}
板块名称颜色的控制
.index_font{color: #3A4F6C;background-color:#EBEBEB; font-weight:bold;padding: 5px;}
“我的信息”“生曰会员”“友情连接”“在线会员”那几一行的控制
.tpc_title { font-size: 12px;font-weight:bold;}
阅读贴子时，标题的文字、粗体、大小的控制
.tpc_content { font-size: 13px;}
阅读贴子时，内容文字大小的控制
.i_table {BORDER: $tablecolor 1px solid;background:#D6E3EF;}
风格核心文件中 $yeyestyle ，如果设置的是 no 的话，就不用离它了，
如果设置的是 yes 的话，<table> 中的 $i_table 就调用它了
.tool {color:#84AACE;}
不知道在哪里有调用它，这个不用离它
.menu{position:absolute;}5楼 PW WIND风格 CSS控制说明和一些基本知识
先了解一些最基本的知识
{} 成对出现：表示一段语句
; 分隔
.xxx 定义 class=xxx 调用
#xxx 定义 id=xxx 调用
现在我们开始看wind风格的css(在header.htm中)
我们一句句来看，先看第一句
body {font-family: Verdana;FONT-SIZE: 12px;MARGIN: 0;color: #000000;background: #ffffff;}
body{} 这里面是论坛整体设置
font-family: Verdana; 是字体样式
FONT-SIZE: 12px; 是字体大小，一般是12个象素大小
MARGIN: 0; 外补丁
color: #000000; 是字体的颜色
background: #ffffff; 是背景颜色
相关知识
也可以用图片做背景，
background-image: url(图片地址); 添加背景图片
background-attachment:fixed; 背景图片固定
background-position: center; 背景图片居中
text-align: center; 所有字体都居中
也可以在body中定义滚动条的样式，
SCROLLBAR-FACE-COLOR: rgb(10,236,209); //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: rgb(23,255,155); //滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: rgb(255,116,23); //立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: rgb(66,93,127); //滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: rgb(93,232,255); //上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: rgb(255,70,130); //滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: rgb(10,0,209); //滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: rgb(66,93,128)； //滚动条的基本颜色
Scroll = no 去掉网页中最右边滚动条
第二句了，以后我就不说是第几句了：)了
td {FONT-SIZE: 12px;}
表格内的控制，包括背景，字体，字体颜色，这个不用修改
textarea,input,select{
font-family: Verdana;
font-size: 12px;
background-color: #ffffff;
}
文本框，选择项，按钮的控制
这里可以diy文本框，选择项，按钮的样式
可以补充
color: #cccccc; 是字体的颜色
border:1px solid $tablecolor;边宽设置，1px是大小，solid是实线，$tablecolor是引用论坛边框的颜色
这里textarea,input,select是放在一起设置的，也可以分开设置，如
textarea{}
input,select{}
form{margin:0px; display:inline}
这个不用修改，不用离它
div.quote{
margin:5px 5px;
border:1px dashed $tablecolor;
padding:5px;
background:$forumcolorone;
line-height:normal;
}
你风格中的引用框的样式
margin:5px 5px; 检索或设置对象四边的外补丁，横距和竖距，可以根据自己喜好调整
border:1px dashed $tablecolor; 是边框属性，1px是大小，dashed是虚线，$tablecolor是引用论坛边框的颜色
solid是实线 none是无 dotted是点线 dashed是虚线 double是双线 groove是立体线
ridge是立体线 inset是凹线 outset是凸线
padding:5px;是内补丁属性，margin:5px;是外补丁属性
padding和margin可以做更具体的设置，如
padding-top:0px;padding-bottom:0px;padding-left:5px;padding-right:10px;
a { TEXT-DECORATION: none;}
连接文字的控制，现在是没下划线的
a:hover{ text-decoration: underline;}
鼠标移上连接文字时的效果控制，现在是带有下划线的，也可以加其他效果
img {border:0;}
带有连接图片的边框控制，现在没边框，这个不要修改
.banner{background: #84AACE;}
控制 论坛头部
.head {color: #FFFFFF;background: #84AACE;padding: 5px;font-weight:bold;}
.head a{color: #FFFFFF;}
控制 论坛分类啊、-=>论坛相关
font-weight:bold; 是表示字体加粗，其他的应该都知道什么意思了吧：)
normal : 默认值。正常的字体。相当于 400 。如果是normal的话就不用写了
bold : 粗体。相当于 700 。也相当于 b 对象的作用
bolder : 比 normal >粗
lighter : 比 normal >细
.f_one {background: $forumcolorone;}
.f_two {background: $forumcolortwo;}
.t_one {background: $threadcolorone;}
.t_two {background: $threadcolortwo;}
.r_one {background: $readcolorone;}
.r_two {background: $readcolortwo;}
分别是指：
版块列表颜色一、版块列表颜色二
文章列表颜色一、文章列表颜色二
阅读主题颜色一、阅读主题颜色二
变量在核心文件中设置
.hr {border-top: 1px solid $tablecolor; border-bottom: 0; border-left: 0; border-right: 0; }
分割线的控制，在线用户那里
.cbg { color:#000000;background: #E5E8EA;}
.cbg a{ color:#000000;}
表格栏目说明的控制，就是首页的（论坛 主题 文章 最后发表 版主）那里
.smalltxt {font-family: Tahoma, Verdana; font-size: 12px;}
.tinytxt {font-family: Tahoma, Verdana; font-size: 11px;}
字体的设置，smalltxt好象是右上角的多少贴子，多少会员那里的控制，tinytxt 好象横排后帖子数字体的控制， 这两个一般不用修改
.cfont { color:#FFFFFF; }
分类名称颜色的控制
.fnamecolor { color:#003366;}
板块名称颜色的控制
.index_font{color: #3A4F6C;background-color:#EBEBEB; font-weight:bold;padding: 5px;}
“我的信息”“生曰会员”“友情连接”“在线会员”那几一行的控制
.tpc_title { font-size: 12px;font-weight:bold;}
阅读贴子时，标题的文字、粗体、大小的控制
.tpc_content { font-size: 13px;}
阅读贴子时，内容文字大小的控制
.i_table {BORDER: $tablecolor 1px solid;background:#D6E3EF;}
风格核心文件中 $yeyestyle ，如果设置的是 no 的话，就不用离它了，
如果设置的是 yes 的话，<table> 中的 $i_table 就调用它了
.tool {color:#84AACE;}
不知道在哪里有调用它，这个不用离它
.menu{position:absolute;}
下拉菜单的位置，这个不要修改它
<body vlink="#666666" link="#666666">
连接文字颜色
下拉菜单的位置，这个不要修改它
<body vlink="#666666" link="#666666">
连接文字颜色
|
|