Monday, 7. August 2006, 10:45:32
条目
一.基础知识什么是CSS语言?
CSS语言的基本语法怎么表达?
Blog自定义界面怎么进入？
如何获取官方模版的源代码?
如何使用自己定义的代码？
自定义时常用的字符含义
二.自定义BLOG模版- 顶部部分如何自定义首栏?
如何定义标题文字以及背景图片?
如何设定标题文字的位置及背景图片的显示高度?
如何定义副标题属性?
如何定义菜单栏文字属性和背景?
三、自定义BLOG模版- 内容部分如何更改整个页面的背景及文字属性?
如何改变Blog页面的背景颜色和文字对齐方式?
如何更改Blog页面修饰用的侧边条属性?
如何改变已发布文章的标题大小和颜色?
如何改变已发布文章标题下的日期字体大小及颜色和标签的颜色?
如何修改置顶主题标识的相关属性?
如何改变页面底部RSS按钮的相关颜色?
四.自定义BLOG模版- 侧边栏部分如何定义侧边栏的修饰物及相关背景?
如何设定侧边文字链接的颜色和字体大小?
如何更改侧边栏标题的属性?
如何更改侧边栏容器的背景?
怎么样改变日历的相关属性?
如何修改ALBUM SLIDESHOW相关属性?
如何定义侧边栏的个人头像相关内容?
五.日志发布的相关技巧如何在日志中插入音乐?
如何在日志中插入FLASH?
一.基础知识什么是CSS语言?CSS是Cascading Style Sheets（层叠样式表单）的简称.一般把它称作样式表,是一种设计网页样式的工具.
CSS语言的基本语法怎么表达?CSS的定义是由三个部分构成：选择符(selector),属性(properties)和属性的取值(value).基本格式：selector(property:value} (选择符 {属性:值})例如 body {color: #ffffff} 选择符body是指页面主体部分，color是控制文字颜色的属性，#ffffff是颜色的值,此例的效果是使页面中的文字为白色.如果我是改成黑色,代码则是这样 body {color: #000000}
注:所有代码请在英文状态下输入.Blog自定义界面怎么进入？登陆后点击上方的
Preferences 进入
Web page layout 选择一个官方模版,然后再点击
custom style sheet 就可以进入自定义对话框.
如何获取官方模版的源代码?官方共有13个模版,大致五种风格. 第一个模版本的源代码地址为
http://my.opera.com/community/css/users/1/main.css 知道了第一个,后面的就不难推出,按照模版排列的顺序(从左往右,从上往下),数字递进就可以.比如,我用的是第9个模版,那么源码网址为
http://my.opera.com/community/css/users/9/main.css如何使用自己定义的代码？在对话框输入代码后,可以有三种方式可选,第一种是和原来的代码一起使用(
推荐),第二种仅使用自己的代码(不推荐,除非精通CSS语言),第三种不使用自定义代码. 选好后,点击SAVE.
自定义时常用的字符含义1.Color 通常定义文字的颜色 2. backcolor 定义背景颜色 3.background 定义背景图片和颜色 4.margin 指空白部分 5.overflow 可定义超出容器的部分隐藏或者显示 6.pading 文字离容器边框的距离,可定义上下左右四个方向 7.width 宽度 8. height 高度 9. font-size 字体大小 10. font-family 字体选择 11. align 对齐方式 12. position 定位,比如可以用repeat(平铺方式)来定位,分为X轴,Y轴和取消平铺三种形式.
如果不明白源代码中对象元素具体的含义,请存档后再更改,以防不测.更多相关知识内容请 浏览这里以下都以第九个模版为例说明,只对部份源码作简要说明.源码仅为举例而用,并非对应相关图片效果及相关模版,更改时请以自已所选模版源码为准.自定义时最好能够加上和源码一样的注释,方便以后查找修改,如/* :: SIDEBAR :: */ 是指定义有关侧边栏的源码.二.自定义BLOG模版- 顶部部分如何自定义首栏?首栏包括三个部分,主体部分,OC部分和文字链接部分
定义主体只要找到 #topbar 与之相关的部分. #topbar {
margin:0 -10px;
max-width:867px;
min-width:758px;
height:27px;
line-height:27px;
background:#222 url(/community/graphics/users/9/topbar.gif);
overflow:hidden;
font-family:arial,helvetica,sans-serif;color:#555;}这段代码中
background可以设定背景颜色和背景图片. 我的topbar背景为黑色,且无背景图片,见图
如上图,文字颜色为青白色,只要找到
#topbar a {
color:#fff;
text-decoration:none;} 把
color对应的颜色值改成你喜欢的就可以.
文字链接部分的代码,可改Link文字背景和排版.#topbar a.toplink {
background:#000;
padding:1px 4px;}这部分的背景和主体部分是分开的,所以要单独定义
OC部份还需单独定义,找到#oc 与之相关的部分.#oc span {
display:block;height:27px;
background:transparenturl(/community/graphics/users/9/globe_black.gif) center left no-repeat;
padding-left:22px;}这段代码可定义OC的图标,及背景色. transparent 是指透明. 如果要更改图标. 只要找到每个图标的地址,代替
URL 中地址.
地址可以在官方13个源文件中找到,就在上面所提代码中.
如何定义标题文字以及背景图片?关键词
#top #top {
font-size:11px;
max-width:867px;
min-width:758px;
margin:0 -10px;
text-align:left;
background:#e5bd0d url(/community/graphics/users/9/top.jpg)bottom right no-repeat;
height:183px;
color:#782200;}把
url 中的图片地址更换成设计好的图片,就可以改变标题栏的背景. 如果不清楚背景图片大小怎么样设定,可以把官方图片保存后,设计成与其一样大小即可.这个模版的官方图片地址为
http://my.opera.com/community/graphics/users/9/top.jpg 官方都会把
http://my.opera.com 省略.
bottom right no-repeat指背景图片以底部居右的方式放置,不平铺.
注:一般默认超出容器的部份不会显示,但可以通过overflow 来定义.主标题文字的颜色只要把
color中的颜色代码替换自己喜欢的就可以.见我的TOP栏,主标题为白色文字.
定义标题的大小和上边距,源码如下#top h1 {
font-family:impact,'trebuchet ms',arial,sans-serif !important;
margin:0;
width:100%;
line-height:normal;
overflow:hidden;
font-size:40px;
padding-top:40px;}代码中
font-Size 可设定标题的大小,
padding-top 设定标题文字与顶部距离的远近,单位都为PX. 设定的数值越大,字体就越大,顶部留空也就越多.
如何设定标题文字的位置及背景图片的显示高度?关键词
#top2#top2 {
height:163px;
padding-left:40px;}这段代码中
height影响标题栏背景图片的高度,如果数值变小,Menu栏(菜单栏)会下沉.
padding-left的数值越大,标题文字左边留空就越多,也就是说标题文字会向中心偏移.
如何定义副标题属性?关键词
#subtitle#subtitle {
margin:0;
font-size:12px;
font-weight:bold;
width:100%;
verflow:hidden;
color:#ffbf00;}如果源码中没有
color的属性,自已加进去就可以,这里就是我自己加的.然后照自己喜欢的修改.副标题的位置会随着主标题一起移动.见我的副标题截图
如何定义菜单栏文字属性和背景?关键词
#menu a
我的菜单栏.
#menu a {
display:block;
color:#fff;
text-decoration:none;
background:transparent url(/community/graphics/users/9/menutabs.gif) top left no-repeat;
text-align:center;
position:relative;
z-index:10;
line-height:19px;
width:100px;
overflow:hidden;}这段代码影响菜单条没有动作时的状态,这个模版不建议更改背景图片,如果有精力的话可以自己做一个. 这是此模版的Menu条
http://my.opera.com/community/graphics/users/9/menutabs.gif#menu a:hover, #menu a#selected {background-position:100% -19px;
z-index:800;color:#222;}这段代码影响菜单点击后和悬停时的文字状态,建议只对颜色更改.
三.自定义BLOG模版- 内容部分如何更改整个页面的背景及文字属性?关键词
bodybody {
background:#292929 url(/community/graphics/users/9/bg.gif);
margin:0;
padding:0;
font-family:'lucida grande','lucida sans unicode','bitstream vera sans'trebuchet ms',arial,sans-serif;
font-size:12px;
text-align:center;
color:#222;}上面代码里的
background并不对文字所在页面起作用,只是关系到底层的背景.
font-size和
color可以设定已发布文章的字体大小和文字颜色. 这里的属性只影响宏观环境,如果对某个元素单独设置过,以单独的设置为准.
如何改变Blog页面的背景颜色和文字对齐方式?关键词
#content #footer 其他相关内容请自行查找.
#content, #footer {
clear:both;position:relative;
background:#e4e4eb ;
min-width:739px;max-width:812px;
text-align:left;
margin:0 auto;}替换
backgoround选择符中的颜色代码,就可以改变背景色,在颜代码后面加上
url(图片地址),可以设定Blog页面的背景图片.如果这段代码中没有
backgoround元素,请自行添加.
text-align请自行选择对齐方式,默认是左对齐.
如何更改Blog页面修饰用的侧边条属性?关键词
#wrap 我不清楚还有个mainwarp 起什么作用.
翻译不太准确.总共有四个wrap,如果要使整个自定义页风格统一,修改是必需的.
#wrap1 {
margin:0 auto;
max-width:897px;
min-width:778px;
background:#232323 url(/community/graphics/users/9/wrap1.gif) top left repeat-y;}
#wrap2 {
background:transparent url(/community/graphics/users/9/wrap2.gif) top right repeat-y;}
#wrap3 {background:#fff;
margin:0 auto;
max-width:867px;
min-width:778px;}
.twocol #wrap3 {
background:#fff url(/community/graphics/users/9/side.gif) top right repeat-y;}
#wrap4 {
padding:0 10px;
max-width:847px;
min-width:758px;}
.onecol #wrap4 {
background:transparent url(/community/graphics/users/9/wrap4a.gif) 100% 210px no-repeat;}
.twocol #wrap4 {
background:transparent url(/community/graphics/users/9/wrap4b.gif) 100% 210px no-repeat;}请自行参照修改,不多说了,修改后就会知道具体是指哪几个部份.
如何改变已发布文章的标题大小和颜色?关键词
.post .title.post .title {
margin:0;font-size:18px;
color:#111;}这里的属性对应每篇文章单独页面的标题,更改
font-size的值就可以改变标题字体的大小;
color值可以变更颜色.
链接标题颜色的代码
.title a:link, .title a:visited, .title a:active {
color:#2a3faa;
text-decoration:none;}对应整个BLOG页面里的文章.
下面的代码是悬停时的颜色
.post .title a:hover {
color:#c53800;}如何改变已发布文章标题下的日期字体大小及颜色和标签的颜色?.postdate, .post .tags {
margin:0 0 2px 0;
font-size:11px;
color:#fff;}
#content .tags a:link {
color:#fff;}两段代码请参照修改,如果相关代码没有
color元素,请自行添加.
如何修改置顶主题标识的相关属性?关键词
.post .sticky 当你把一个主题置顶以后,这个主题旁边会出现一个
STICKY POST的标识,以下代码可以修改相关属性.
.post .sticky {
float:right;
margin:0;
font-size:10px;
color:#999;
background:#fff url(/community/graphics/users/8/sticky.gif) top right no-repeat;
padding:0 25px 0 4px;
height:26px;
line-height:20px;}如何改变页面底部RSS按钮的相关颜色?#meta a:link, #meta a:visited, #meta a:active {
color:#fff;}
如图
四.自定义BLOG模版- 侧边栏部分如更变侧边栏的修饰物及相关背景?关键词
#sidewrap#sidewrap {
width:190px;
float:right;
font-size:11px;
overflow:hidden;
color:#fff;
background:#161616 url(/community/graphics/users/9/speaker.jpg) bottom right no-repeat;
padding-bottom:185px;}这里的
color元素影响到这一部分,见图中每个链接前的那个小点.
background则影响整个侧边栏底层背景,可以设定背景的图片的放置方式,但不影响上面图中的容器背景.
width能影响侧边栏的宽度,不建议更改.
这是官方的修饰用背景图
http://my.opera.com/community/graphics/users/9/speaker.jpg如何设定侧边文字链接的颜色和字体大小?#side a:link, #side a:visited, #side a:active {
color:#fff;}此代码代码影响侧边TAGS和LINK的文字颜色.
#side li {
font-size:11px;
list-style-type:square;
padding:2px 0;}此代码影响自定义链接的文字大小,并对TAGS有一定的影响.
如何更改侧边栏标题的属性?关键词
#side caption#side h2, #side caption {
background:#161616 url(/community/graphics/users/9/sideh2.gif) top left no-repeat;
font-size:11px;
font-weight:bold;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
text-align:left;
color:#ffde00;}看看我的标题栏,请自行修改.
还有下面一段代码,改改背景色,如果够细心的话能够发现标题哪里起了变化.
.sidebox {
width:190px;
background:#121212;
border-bottom:1px solid #000;
margin-bottom:15px;}如何更改侧边栏容器的背景?关键词
.sidebox .pad 对应着改.
.sidebox .pad {
background:#121212 url(/community/graphics/users/9/sidebox.gif) top left repeat-x;;
padding:5px;}怎么样改变日历的相关属性?关键词
#calendar#calendar {
border-spacing:1px;
clear:both;
margin-bottom:15px;
width:190px;
background:#121212 url(/community/graphics/users/9/sidebox.gif) top left repeat-x;
border-bottom:1px solid #000;}影响整个日历的背景和宽度.相关属性请自行修改.
#calendar th {
font-size:10px;
line-height:18px;
height:18px;
text-align:center;
color:#999;}这段代码影响日历的星期标识,见图
可设定颜色,字体大小,对齐方式等相关.
#calendar td {
line-height:16px;
border-top:1px solid #222;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #222;
padding:1px 3px;
text-align:center;
font-size:10px;
color:#555;}这段代码影响没有发布日志的
日历日期的颜色及边框的相关属性.
#calendar td.l {
background:#dfdfff;}这段代码影响已发布日志的
日历日期的背景色.
如何修改ALBUM SLIDESHOW相关属性?请以关键词
ALBUM SLIDESHOW 为内容进行搜索
#albumslides p {
margin:0 0 1px 0;
color:#444;}这段代码对播放按钮起作用
#control_left, #control_right {
color:#fff;}这段代码对前进后退按钮起作用.
如何定义侧边栏的个人头像相关内容?请以关键词
QUICK PROFILE 为内容搜索.
可改动的地方也不多,从略.
本人能力有限,其他内容请以相关英文单词进行搜索,不作解释了.模版源码中如果没有相关属性,都可以自行添加,如COLOR,FRONT SIZE等.相关英文链接请点击五.日志发布的相关技巧如何在日志中插入音乐?<OBJECT align="left"classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="MediaPlayer0"
<object type="application/x-mplayer2" width="400" height="60"><param name="fileName" value="音乐网址" />
<param name="autostart" value="0" /><param name="ShowStatusBar" value="1" /></object>
这段代码会影响排版,但可以显示音乐联接状况.
<embed name="fileName" width="350" height="65" src="音乐网址"
type="application/x-mplayer2" autostart="1" loop="1" controls="ControlPanel" >
这段代码对排版没有影响,但不会显示音乐联接状态.
上面两段代码中"1"代表允许,"0"代表禁止,把 width 和 height 改成 0 就可以实现隐藏播放界面,loop代表循环.有个问题我不知道怎么解决,就是无法实现多次播放或循环播放.只对MP3和WMA有效,别的格式没有测试过.
如何在日志中插入FLASH?完整代码
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"WIDTH="480" HEIGHT="360"><PARAM NAME=quality VALUE=high><PARAM NAME="SRC" VALUE="Flash网址"><EMBED QUALITY=high PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"TYPE="application/x-shockwave-flash"WIDTH="480" HEIGHT="360" SRC="Flash网址"> </EMBED></OBJECT>
简化代码
<EMBED QUALITY=high PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" TYPE="application/x-shockwave-flash"WIDTH="500"HEIGHT="200" SRC="Flash地址"> </EMBED></OBJECT>
WIDTH 和 HEIGHT 可以设定FLASH的界面大小.
以上代码如果无法使用,请去掉其间的空白处;如影响排版,请用 <p>内容</p>
WIDGETIZE