CSS - 虚室

Posts tagged with "CSS"

新模版的源代码

Monday, 7. May 2007, 06:27:02

12 Comments

CSS 教程

Wednesday, 20. September 2006, 11:03:13

CSS, share

很不错的教程,适合初学者.正好自己也可以学习参考.

下载：css2.0中文手册

5 Comments

五.补充内容

Thursday, 7. September 2006, 10:31:20

blog, Opera, CSS

如何移动模版中的相关元素?
关键词 float

模版中某些容器位置是可以移动的,如果代码中有float这个项.
比如menu栏的位置就可以自定义,见如下代码

#menu li {
float:left;
line-height:26px;
height:27px;
overflow:hidden;
font-size:13px;
list-style:none;
width:12%;
margin:1px 0 0 0;
padding:0;
}

可以改成float:right;,那么菜单栏将会在右边显示.
其他相关请自行查找.

如何改变元素显示宽度?
关键词 max-width
　　　mini-width
　　　width

以下代码
#wrap1 {
margin:0 auto;
max-width:882px;
background:#acaea7 url(/community/graphics/users/4/wrap1.gif) top left repeat-y;
}

改变max-width数值,就会影响blog页面修饰条wrap1的可见宽度.不过此处在IE中似乎不起作用,可以用width定义.
其他相关也请自行查找.

如何移动侧栏的位置?
关键词 #mainwrap
　　　#main
#sidewrap

#mainwrap {
width:100%;
margin-right:-210px;
padding-bottom:12px;
float:left;
}
把float:left;改成float:right;即可把侧边栏的项目移到左边,这里的left和right恰恰与现实中的"左右"相反.改了位置之后还需要改下面这段代码,不然会影响页面美观.因为,移动之后,侧栏会与日志的文章紧靠在一起,见下面代码.

#main {
min-height:400px;
margin-right:210px;
padding-bottom:15px;
}
把margin-right改成margin-left,数值根据自己的需要而定.

#sidewrap {
width:190px;
float:right;
font-size:11px;
overflow:hidden;
}

还需要把#sidewrap位置改成float:left;

如何改变已发布日志的背景?
关键词 .post

.post {
padding:16px 0 10px 0;
margin-bottom:10px;
width:100%;
overflow:hidden;
border-top:1px dashed #93425F;
background:#fff url(图片地址);
}
如果没有background:#fff url(图片地址);,请自行加入.

如何修改日志中链接默认的相关颜色?
关键词a:link, a:active
　　　a:visited
　　　a:hover

代码如下,与链接默认显示、悬停时,动作后的颜色有关.
a:link, a:active {
color:#1757b1;
text-decoration:underline;
}

a:visited {
color:#0049aa;
text-decoration:underline;
}

a:hover {
text-decoration:none;
color:#1488fd;
}

同时也影响日志中相关的链接选项,如"edit post".对于日志中重新定义过的链接颜色,不受影响.

如何修改侧栏链接框单独的背景?
关键词#content li

虽然侧栏的容器的背景可以全局定义,但这段代码影响第二层背景,不仅限于侧栏自定义链接框和TAGS栏且包括其他项目,如Trackbacks的背景,见代码.

#content li {
margin:0;
list-style-position:inside;
background:#FEFEFE url(背景地址);
}

list-style-position还以通过none来定义,显示效果略有不同.background元素可以自行加入.

如何用背景图替代日志间的分割线?
关键词.post
　　　#firstpost
　　　#lastpost

前面已经讲过修改日志的单独背景,这里的修改正是这种方法的进一步运用.见修改后的效果图.

.post {
padding:16px 0 10px 0;
margin-bottom:10px;
width:100%;
overflow:hidden;
border-top:1px dashed #93425F;
}
日志之间分割线本来受上面代码中border-top:1px dashed #93425F;控制,相关表示的是像素,显示模式和颜色.其中dashed表示虚线,如果用solid则是实线(其他相关的Boder也可以这样改).

现在进行具体的修改,见下面修改过的代码.

.post {
background: #fff url(http://my.opera.com/community/graphics/smilies/pleased.gif) bottom center no-repeat;
border:none;
width:100%;
overflow:hidden;
padding-bottom:60px;
}
在background中别的不细说,只是要注意一下背景图片的显示位置,这里显示方式为底部居中不平铺(bottom center no-repeat).
border:none;表示没有边框,也可以仅仅修改border-top为0PX,效果是一样的.padding-bottom:80px;影响背景图片的高度,效果体现为两篇日志间的间隔距离,不过对最后一篇日志来说,就是底部留空多少.

还有两段影响顶部日志和底部日志的代码要修改,方法一样,不再解说.见下面两段修改过的代码.
#firstpost {
padding-top:0;
border:none;
background: #fff url(http://my.opera.com/community/graphics/smilies/pleased.gif) bottom center no-repeat;
padding-bottom:60px;
}

#lastpost {
background: #fff url(http://my.opera.com/community/graphics/smilies/pleased.gif) bottom center no-repeat;
padding-bottom:80px;
border:none;
}

如何使日志中文章的首字大写?
关键词.content:first-letter

这段代码窃自某人的模版,直接加入模版源码中即可
.content:first-letter {
color: #000;
background:#F5D3CB;
padding: 5px 6px;
margin: 4px 4px 0 0;
font-size: 20px;
font-weight:bold;
font-family: arial,sans-serif;
display: block;
float:left;
}

影响首字的颜色、背景颜色、字体及大小等属性,效果见图.

下在的代码能影响每篇评论的首字属性

div:first-letter {
color: #000;
font-size:18px;
}

0 Comments

四.自定义BLOG模版 - 侧边栏部分

Thursday, 7. September 2006, 10:28:32

blog, Opera, CSS

如更变侧边栏的修饰物及相关背景?
关键词 #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 为内容搜索.
可改动的地方也不多,从略.

0 Comments

三.自定义BLOG模版- 内容部分

Thursday, 7. September 2006, 10:26:13

blog, Opera, CSS

如何更改整个页面的背景及文字属性?
关键词 body

body {
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;}

如图

8 Comments

二.自定义BLOG模版 - 顶部部分

Thursday, 7. September 2006, 10:12:26

blog, Opera, CSS

如何自定义首栏?
首栏包括三个部分,主体部分,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影响标题栏背景图片的容器的高度,数值越大,显示的高度越多.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;}
这段代码影响菜单点击后和悬停时的文字状态,建议只对颜色更改.

12 Comments

1 2 Next »

Showing posts 1 - 6 of 8.