【存】关于BLOG模板。
hongyy吧
全部回复
仅看楼主
level 7
博客模板颜色代码大全 近来有很多博友问到了关于修改博客背景颜色的方法,我觉得这也的确是一个制作博客的重要环节。很多个性的博客都是配色很好的缘故。所以今天又来放点水,是高手的也不要笑我。 不说废话了,转入正题。一般我们要修改博客模板的颜色,除开动力列表的内容外,都需要进入CSS编辑器里修改模板的CSS内容。举一个例子来说明,大家看看以下的代码:/*=======Blog介绍=======*/div#blogContent{ width:520px;<这段是描述BLOG介绍的宽度,PX是一个单位-1PX代表1像素> text-align: left; background-color:#000000;<这段就是描述BLOG介绍的背景颜色> 大家再看看这段里面的蓝色部分就是描述颜色的代码,绿色为我的注释部分,以#字开头后面六个数字或字母就是颜色代码。一般前面加了background-color:或color:这段代码都表示用来描述颜色的。如果需要的话,也可以自己添加进去。另外我再罗嗦几句,博客背景颜色的修改将涉及到你整个博客的风格样貌,所以我提倡配色不要太乱,一般只用1---3种配色就好。配色太多只会起反作用!看到这里相信大家因该明白了,赶快试试吧!打造你的个性博客!下面这份表格就是大部分的颜色代码,相信大家应该看得明白!
2006年09月12日 08点09分 2
level 7
http://www.ham.cn/user1/dzzwz/archives/2006/35176.html
2006年09月12日 08点09分 5
level 7
CSS制作分类  我们使用红色的粗体表示。每个人分类都不同,内容也不同,可以自己定首页 相册记曰(44)乐音(2)作工(10)戏游(2)计设(9)静和(13)  然后是“我的分类”CSS样式的制作。  我说明一下,写CSS的习惯每个人都不一样,有的人喜欢先写大布局代码,然后是其他的代码,SNAKE喜欢按照顺序写,也就是从上到下的方式,下面就按照SNAKE喜欢的方式写。  在
#head的类下面插入下面的代码:#
head ul, #head li { /* HEAD层内UL标签和LI标签的样式属性。 */float:left; /* 内容居左,就是横向显示,LI标签默认是竖向显示。 */margin:0; /* 外边距,默认的不是0,所以我们要给它个值。 */display:block; /* 块级元素,必须有。这个比较难解释,书上是这么写的:块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行。汗~~ */}#head li a{ /* HEAD LI标签内连接样式。 */height: 26px; /* 高度26。 */padding:3px 5px 0px 20px; /* 内边距,定义连接文字在LI标签的位置。 */color: #666; /* 连接色。 */background:url("mainli.png") no-repeat left top; /* 连接的背景,连接到我们设计的背景图片上去,从左上开始显示,并且不重复。 */border: 1px solid #999; /* 连接的边框,使用灰色。 */}#head li a:hover{ /* HEAD LI标签内连接之鼠标拖过样式。 */color:#333; /* 拖过之颜色。 */background:url("mainli.png") no-repeat 0px -26px; /* 拖过后的背景,我们使用的图片和连接的背景图片是同一张,这样做的好处是节省带宽。要搞清楚位置,-26是从高位-26的地方开始显示图片,设计的时候要明白为什么这么做。 */}
2006年09月12日 09点09分 7
level 7
LEFT的制作  左边是显示文章标题、内容等的位置,我们要根据图片的设计来完成它。  先是定位。因为LEFT在CONTENT层内,所以代码写在#CONTENT样式下面。因为内容比较重要,所以要做的细一些,我们连接字的色,拖过,访问后都要定义,区别文章内颜色。#left {float: left; /* LEFT层在CONTENT中的位置,要居左。 */width: 520px; /* LEFT层宽度。 */padding: 0px 20px 0px 20px; /* 内边距,左右要留下间隙。 */color: #333; /* LEFT层内所有字体的颜色,SNAKE使用深灰色,比纯黑色要舒服。 */text-align: justify; /* LEFT层内容的文字两端对齐,这在OFFICE里面经常用到,是细节,不要也可以。 */border-right: 1px dotted #999; /* LEFT层右侧加一条灰色的虚线,LEFT和RIGHT的分界线。 */}
#left a{color:#
749A23; /* LEFT层内连接字体色。 */text-decoration: none; /* LEFT层内连接字体去掉下划线。 */}
#left a:hover {color:#
C1E27D; /* LEFT层内鼠标拖过连接字体色。 */text-decoration:underline; /* LEFT层内鼠标拖过连接字带有下划线。 */}
#left a:visited {color:#
666; /* LEFT层访问后的连接字体色。 */
2006年09月12日 09点09分 8
level 7
公告栏  进展好快!已经到公告栏了!这个比较简单~先在模版页面LEFT层内新建一个公告栏的层,和LEFT一样,也要测试连接字体色等等。  现在的HTML如下:涡虫我草敌素活圣诞节巴斯德看见发表苦不管客观内可是地方病感反对看见  我们开始定义公告栏的CSS:#placard {margin: 10px 10px 10px 10px; /* 公告层外边距。 */padding: 10px 5px; /* 公告层内边距。 */color: #3A5014; /* 公告层内字体色。 */background: #C1E27D url("placard.png") no-repeat top right; /* 公告层内背景色,背景图,背景图从右上开始显示,不重复。就是哪个双引号。 */border-top: 1px solid #666; /* 公告层上面的灰黑色实线。 */border-bottom: 1px solid #666; /* 公告层下面的灰黑色实线。个人觉得上下各一条线比较有个性,当然也可以是灰黑色边框。 */}#placard:first-letter { /* 公告层内第一个字样式定义。 */margin: 0pt 5pt 0pt 0pt; /* 公告层内第一个字的外边距。 */padding: 3px; /* 公告层内第一个字的内边距。 */font: 20px bold; /* 公告层内第一个字的字体大小,粗体。 */float: left; /* 公告层内第一个字居左对齐,排版的人知道,至于为什么加你可以把这个样式属性去掉试试。 */border : 1px dotted #fff; /* 公告层内第一个字的边框,1象素,虚线(好象是虚点),线颜色。 */}#placard p:first-letter { /* 和上面的定义是一样的,但是这个段落的定义(注意多了个P),因为有的人在加公告的时候弄成段落格式的了,所以也需要定义一下。 */margin: 0pt 5pt 0pt 0pt; /* 公告层内第一个字的外边距。 */padding: 3px; /* 公告层内第一个字的内边距。 */font: 20px bold; /* 公告层内第一个字的字体大小,粗体。 */float: left; /* 公告层内第一个字居左对齐,排版的人知道,至于为什么加你可以把这个样式属性去掉试试。 */border : 1px dotted #fff; /* 公告层内第一个字的边框,1象素,虚线(好象是虚点),线颜色。 */}#placard a{color:
#666; /* 公告层内连接字体颜色。 */}#
placard a:hover {color: #698B23; /* 公告层内连接字体鼠标拖过的颜色。 */}
2006年09月12日 09点09分 9
level 7
BLOG内容  这部分也不简单,根据需要我们要考虑四点因素,文章标题,发表曰期(发表人),文章内容,阅读全文(次数)这四点。  文章标题我们使用.contenttitle,发表曰期使用.contenttime,文章内容不使用CSS定义,因为LEFT已经定义过了,阅读全文(次数)使用类.contentcomments。(我以前是使用H3,H4直接定义的,好处是省几个字节。坏处是当用户在后台表表文章设定字体时很有可能定义成H3或H4,造成布局混乱,很显然这是不可取的。)  HTML代码如下:怒吗SNAKE - by - 2005-9-6 17:06:00话说Numa Numa Dance:   纽泽西的十九岁小胖子,有一天突发奇想,把罗马尼亚的一首流行歌曲 Dragostea Din Tei(他自己也不懂罗马尼亚文)拿来对嘴唱,自己再加上舞蹈动作,他自己发明的Numa Numa Dance,制作了上面的MV,从头到尾他都没离开书桌前的椅子哟,真的笑到肚子痛,他的表演精辟令人叫绝,此FLASH始发于newgrounds网站,浏览量竟然超过8百万。阅读全文(106) | 回复(7) | 引用通告(0)  CSS代码加到刚才公告的后面吧,代码如下:.contenttitle { /* 博客文章的标题定义。 */height: 40px; /* 博客文章标题的高度。 */padding:3px 0px 0px 25px; /* 标题的内边距,同样是上右下左的顺序,左边25象素是为了和左边拉开距离,谁说的了?距离产生美么~ */background:url("content.png") no-repeat left; /* 标题的背景,就是哪个像盾牌似的小图标了,为了好看,没别的。图片不重复,左对齐。 */font-size: 15px; /* 标题的字体大小,15象素看着还凑合。 */color: #060; /* 标题的字体颜色,这个一般用不到,因为文章标题都是连接文字,不过我发现“置顶”这两个字是没有连接的~所以加上吧,为了和标题字色配套。 */}.contenttime { /* 博客文章的作者,发表时间定义。 */width:450px; /* 时间的宽度,因为我们要文字上面有“上划线”,而且要右对齐所以定义这个。 */margin:-18px 0px 0px 20px; /* 时间的外边距,也就是定位,上-18px是为了挨着标题显示,不信你去掉试试,20px是左边距,要不然“上划线”就盖住那标题图片了。 */font: 9px 'Tahoma', sans-serif; /* 时间文字的大小,字体。我发现英文Tahoma字体最小的能显示的字就是9px了。 */color: #666; /* 时间文字的颜色。 */border-top: 1px dotted #999; /* 传说中的上划线,1象素,虚线(应该是虚点),浅灰色。 */text-align:right; /* 时间文字右对齐,同样为了好看。 */}.contentcomments { /* 阅读全文数,回复数等信息的CSS定义。 */text-align: center; /* 文字居中显示。 */border-top: 1px solid #C2C2C2; /* 一个上划线。 */border-bottom: 2px solid #C2C2C2; /* 一个2px的下划线,注意这两定义个不能缩写的。 */margin:15px 0px 35px 0px; /* 外边距。 */font: bold 12px; /* 字体粗细,大小。 */}
2006年09月12日 09点09分 10
level 7
http://sherryking.bbs.topzj.com/viewthread.php?tid=313458#bottom
2006年09月12日 09点09分 12
level 7
如何修改blog背景颜色和图片(新手专用)登陆管理》模版设置》修改主模版,在源码模式下,经过修改,将以下代码复制到模版,插入所有代码的最上方,即可:
<!--body{ background:url(这里填写背景图片地址) #ffffff repeat scroll!important;}--> 相关解释:将括号里面的红字这里填写背景图片地址替换为你所要显示的背景图片地址,#ffffff表示背景颜色为#ffffff(白色)修改为你想要的背景颜色代码,repeat表示图片平铺,不平铺改为no-repeat,scroll表示图片随对象滚动,图片固定不滚动改为fixed,!important表示这里的设置优先,不要将它去掉,否则有可能会引起冲突,造成显示不正常!
2006年09月12日 09点09分 13
level 7
模客模板制作(二)常规知识CSS部分*不断更新所谓CSS(Cascading Style Sheet)是一种可加进HTML,控制HTML文件显示格式的语言(Style sheets language)。虽然 CSS 在网页里是和 HTML 在一起的. 但它不算 HTML. 它的使用可以扩展 HTML 的功能. 我们可以把原本的 HTML 文件样式化,像是文字的颜色、字型、大小、宽度、边界、对齐都可以去设定,也可以在某些物件 (文字或图形) 周围使用立体的边框,还可以为每个段落、标题、文字区块定义不同的文字样式。CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。1.定义DIV分析一个典型的定义div例子:#sample{ MARGIN: 10px 10px 10px 10px;PADDING-LEFT: 20px; PADDING-TOP: 20px;PADDING-RIGHT: 10px; PADDING-BOTTOM: 10px;BORDER-RIGHT: #CCC 2px solid;BORDER-BOTTOM:
#CCC 2px solid;BORDER-LEFT: #
CCC 2px solid;BORDER-TOP: #CCC 2px solid;BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;COLOR: #666;TEXT-ALIGN: center;LINE-HEIGHT: 150%; WIDTH:60%; } 说明如下:层的名称为sample,在页面中用
就可以调用这个样式。 MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"MARGIN: 10px;"。如果边距为零,要写成"MARGIN: 0px;"。注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。MARGIN是透明元素,不能定义颜色。 PADDING是指层的边框到层的内容之间的空白。"PADDING-LEFT"是指左边边框到内容的距离,以此类推。如果都一样,可以缩写成"PADDING:0px"。PADDING是透明元素,不能定义颜色。 BORDER是指层的边框,"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"。 BACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用"url(../images/bg_logo.gif)"来指定背景图片路径;其次定义背景色"#FEFEFE"。"on-repeat"指背景图片不需要重复,如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE COLOR用于定义字体颜色,上一节已经介绍过。 TEXT-ALIGN用来定义层中的内容排列方式,center居中,left居左,right居右。 LINE-HEIGHT定义行高,150%是指高度为标准高度的150%,也可以写作:LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em,都是一样的意思。 WIDTH是定义层的宽度,可以采用固定值,例如500px,也可以采用百分比,象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度,不包含margin,border和padding。但在有些浏览器中不是这么定义的,需要你多试试。 下面是这个层的实际表现:这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容,这里是演示内容...我们可以看到边框是2px的灰色,背景图片在右下没有重复,内容距离上和左边框20px,内容居中,一切和预想的一样。hoho,虽然不好看,但它是最基本的,掌握了它,你就已经学会一半的CSS布局技术了。就是这样,不算难吧!(另一半是什么?另一半是层与层之间的定位。我会在后面逐步讲解。)2.CSS2盒模型自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层
。盒模型主要定义四个区域:内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的sample层就是一个典型的盒。对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。 3.辅助图片一律用背景处理用XHTML+CSS布局,有一个技术一开始让你不习惯,应该说是一种思维方式与传统表格布局不一样,那就是:所有辅助图片都用背景来实现。类似这样:BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; 尽管可以用
直接插在内容中,但这是不允许的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一部分,它们可以用
元素直接插在页面里,而其它的类似logo,标题图片,列表前缀图片都必须采用背景方式或者其他CSS方式显示。这样做的原因有2点:将表现与结构彻底相分离,用CSS控制所有的外观表现,便于改版。 使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
2006年09月12日 09点09分 14
level 7
http://www.xjblog.net/bbs/dispbbs.asp?boardID=38&ID=8041&page=1
2006年09月12日 09点09分 15
level 7
第一步: 进入后台管理,点击"摸版设置"__进入第二步:点击进入"修改主摸版",就可以看见你选择的主摸版对吧? 往下拖鼠标,就可以看到有"设计,预览,源码" 点击"源码"后有一大堆的乱七八糟的字母? 然后点击最开头,按回车键,就空出一段在最上边,最后: 将下边的一段话"复制,粘贴"就OK啦 !然后点"保存修改"再更新就好啦 !

2006年09月12日 09点09分 16
level 7
美化用户模板的几个技巧一、关于日历表格:相信大家也注意到了,OBLOG的日历显示总是不尽如人意,很不漂亮,SNAKE一直以为这是OBLOG的网页文件的问题,只有系统管理员才能修改,但是看了leeways.7blog.net的BLOG和几个shineblog.com的BLOG的以后发现其实是有解决问题的方法的。
二、关于分类导航:大家如果查看自己的BLOG源代码的话就会发现,自己的分类导航是
控制的,也是这个层样式控制的
,那么是不是可以改变一下其呆板的样式呢?答案是可以的。

2006年09月12日 09点09分 17
level 7
html代码常用在博客的小技巧1. 将彻底屏蔽鼠标右键oncontextmenu="window.event.returnValue=false"
no 可用于Table 2.取消选取、防止复制 3. 不准粘贴onpaste="return false" 4.防止复制 oncopy="return false;" oncut="return false;"5.IE地址栏前换成自己的图标
6. 可以在收藏夹中显示出你的图标
7. 关闭输入法
8. 永远都会带着框架
<!--if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页// -->9. 防止被人frame
<!-- if (top.location != self.location)top.location=self.location;// -->10. 网页将不能被另存为
<iframe src="/*.html>";</iframe> 11. 查看网页源代码
12.删除时确认删除 13. 取得控件的绝对位置//java script
function getIE(e){var t=e.offsetTop;var l=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}alert("top="+t+"/nleft="+l);}//VBScript
<!--function getIE()dim t,l,a,bset a=document.all.img1t=document.all.img1.offsetTopl=document.all.img1.offsetLeftwhile a.tagName<>"BODY"set a = a.offsetParentt=t+a.offsetTopl=l+a.offsetLeftwendmsgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"end function-->14. 光标是停在文本框文字的最后
function cc(){var e = event.srcElement;var r =e.createTextRange();r.moveStart("character",e.value.length);r.collapse(true);r.select();}
15. 判断上一页的来源java script:document.referrer16. 最小化、最大化、关闭窗口


本例适用于IE17.屏蔽功能键Shift,Alt,Ctrl
function look(){ if(event.shiftKey) alert("禁止按Shift键!"); //可以换成ALT CTRL} document.onkeydown=look; 18. 网页不会被缓存
或者

2006年09月12日 09点09分 18
level 7
autourl[4]="www.nuaa.edu.cn"autourl[5]="www.cctv.com"function butt(){document.write("
")for(var i=1;i
=》
=》
")document.write("
")}butt()function auto(url){document.forms[0]["url"+b].value="/urlif(tim>200){document.forms[0]["txt"+b].value="/链接超时"}else{document.forms[0]["txt"+b].value=""时间"+tim/10+"秒"}b++}function run(){for(var i=1;i
")}run()37. 各种样式的光标auto :标准光标default :标准箭头hand :手形光标wait :等待光标text :I形光标vertical-text :水平I形光标no-drop :不可拖动光标not-allowed :无效光标help :?帮助光标all-scroll :三角方向标move :移动标crosshair :十字标e-resizen-resizenw-resizew-resizes-resizese-resizesw-resize38.页面进入和退出的特效进入页面
推出页面
这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使用哪种特效,取值为1-23:  0 矩形缩小   1 矩形扩大   2 圆形缩小  3 圆形扩大   4 下到上刷新   5 上到下刷新  6 左到右刷新   7 右到左刷新   8 竖百叶窗  9 横百叶窗   10 错位横百叶窗   11 错位竖百叶窗  12 点扩散   13 左右到中间刷新   14 中间到左右刷新  15 中间到上下  16 上下到中间   17 右下到左上  18 右上到左下   19 左上到右下   20 左下到右上  21 横条   22 竖条   23 以上22种随机选择一种39.在规定时间内跳转
40.网页是否被检索
其中属性值有以下一些:属性值为"all": 文件将被检索,且页上链接可被查询;属性值为"none": 文件不被检索,而且不查询页上的链接;属性值为"index": 文件将被检索;属性值为"follow": 查询页上的链接;属性值为"noindex": 文件不检索,但可被查询链接;属性值为"nofollow": 文件不被检索,但可查询页上的链接。
2006年09月12日 09点09分 20
level 7
http://www.xjblog.net/bbs/dispbbs.asp?boardID=38&ID=8152&page=1
2006年09月12日 09点09分 21
level 7
Dreamweaver
2006年09月12日 09点09分 22
level 7
http://www.wjqblog.com/index.php?job=art&articleid=a_20060217_233832
2006年09月12日 09点09分 23
level 7
玩转博客之CSS入门 CSS代码生成器(v1.0)下载用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧。要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的。 事实上,所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局。这是思维方式的变化,一开始有些不习惯。呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统做法是值得的。 外部调用样式表在以前,我们通常采用2种方法使用样式表: 页面内嵌法:就是将样式表直接写在页面代码的head区。类似这样:
外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。
在符合web标准的设计中,我们使用外部调用法,好处不言而喻,你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。双表法调用样式表查看本页原代码,你可以看到,在调用样式表的地方有如下2句:

@import url( css/style01.css ); 为什么要写两次呢?实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的"@import"命令用于输入样式表。而 "@import"命令在netscape 4.0版本浏览器是无效的。也就是说,当你希望某些效果在netscape 4.0浏览器中隐藏,在4.0以上或其它浏览器中又显示的时候,你可以采用"@import"命令方法调用样式表。 1.基本语法规范分析一个典型CSS的语句:p {COLOR:
#FF0000;BACKGROUND:#
FFFFFF} 其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 样式声明写在一对大括号"{}"中; COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; "
#FF0000"和"#
FFFFFF"是属性的值(value)。2.颜色值颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成
#F00。但如果不重复就不可以简写,例如#
FC1A1B必须写满六位。3.定义字体web标准推荐如下字体定义方法:body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; Lucida Grande字体适合Mac OS X; Verdana字体适合所有的Windows系统; Lucida适合UNIX用户 "宋体"适合中文简体用户; 如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;4.群选择器当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: p, td, li { font-size : 12px ; } 5.派生选择器可以使用派生选择器给一个元素里的子元素定义样式,例如这样:li strong { font-style : italic; font-weight : normal;} 就是给li下面的子元素strong定义一个斜体不加粗的样式。6.id选择器用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
2006年09月12日 09点09分 24
level 7
然后在样式表里这样定义:#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 其中"menubar"是你自己定义的id名称。注意在前面加"#"号。id选择器也同样支持派生,例如:#menubar p { text-align : right; margin-top : 10px; } 这个方法主要用来定义层和那些比较复杂,有多个派生的元素。6.类别选择器在CSS里用一个点开头表示类别选择器定义,例如:.14px {color : #f60 ;font-size:14px ;} 在页面中,用class="类别名"的方法调用:
14px大小的字体 这个方法比较简单灵活,可以随时根据页面需要新建和删除。7.定义链接的样式CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。呵呵,看了这么多,有点头晕吧,实际上CSS的语法规范还有很多,这里列的只是一些常用的,毕竟我们是循序渐进,不可能一口吃成胖子:)CSS 属 性 一 览 表属 性 名 称 属性功能及其取值 用 法 说 明 与 范 例 颜色与背景类 color 设置文字颜色
#rgb#
rrggbbrgb(255,255,255)rgb(100%,100%,100%) H1{color:red}H1{color:
#f00}H1{color:#
ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色,格式同上。 BODY{background-color:red}BODY{background-color:
#f00}BODY{background-color:#
ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)} background-image 设置背景图片,url(/imageURL) body{backround-image:url(/back.jpg);} background-repeat 设置背景图片是否重复排列:repeat-x(X轴重复排列);repeat-y(Y轴重复排列);No-repeat(不重复排列) BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;} background-attachment 设定背景图片是否卷动,默认为卷动。scroll(卷动)fixed(不卷动) BODY{background-attachment:fixed;} background-position 设定背景图片或背景颜色开始显示的位置,取值格式:top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比) BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;} background 定义背景综合属性,不要求顺序,各属性值以空格分开。 BODY{background:#ffcc00 url(/bg.jpg) fixed center} 字型类 font-family 设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。 P{font-family:宋体,楷体,黑体,"Time New Rom";} font-style 设定字型样式:Normal(正常),italic、objlique(斜体) P{font-style:italic;} font-variant 取值:Normal(默认),small-caps(如果是中文字型则将字型缩小显示,如果是英文则全部改为较小的大写) H3{font-variant:small-caps;} font-weight 设定字体粗细,取值有:Normal(默认),bold,lighter,border,100,200...900由于浏览器支持程度不同,一般只用normal和bold两种属性。 P{font-weight:bold;} 
2006年09月12日 09点09分 25
level 7
font-size 设定字体的大小;绝对大小:xx-small,x-small,small,mediumlarge,x-large,xx-large;相对大小:larger,smaller;数字表示可用单位:磅(pt),像素(px),英寸(in),厘米(cm);亦可用百分比表示。 H2{font-size:36pt;}P{font-size:200%;} font 设定字型的综合属性,其顺序如下:{font-style font-variant font-weight font-size /line-height font-family;} P{bold 12pt/14pt impact,Arial;} 文字类 letter-spacing 设定文字间距。 P{letter-spacing:5pt;} text-decoration 设定文字加上下划线、删除线等效果:none(无)underline(下划线)overline(上划线)line-through(删除线) vertical-align 设定文字或图片垂直方向的对齐方式:baseline:默认值 sub:下标 super:上标 top:垂直向上对齐 middle:垂直居中 bottom:垂直向下对齐。 text-transform 转换英文字母大小写:none:默认值 capitalize:首字母大写 uppercase:所有英文字母大写 lowercase:所有英文字母小写。 text-align 设置文字的水平对齐方式:left:左对齐 right:右对齐 center:水平居中 justify:左右对齐。 text-indent 设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排。 line-height 设定行高,声明方式有标准行高、固定值表示法、百分比行高、字型大小比例行高等。 列表类 list-style-type 有序列表的编号方式(供
标记使用):none:无编号 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母。 list-style-type 无序列表的符号样式(供
使用):none:无符号 disc:实心圆符号 circle:空心圆符号 square:实心方形符号。 list-style-image 无序列表的自定义符号样式:格式:url(图片名称) UL{list-style-imag:url(/dd.gif);} list-style-position 设置列表清单符号缩排属性:outside:凸排 inside:缩排 UL{list-style-imag:url(/dd.gif); list-style-position:outside;} list-style 列表清单项目的综合设定,属性之间用空格隔开。 UL{list-style-imag:url(/dd.gif) inside;} 边界及其相关类 margin 标记元素边界值的综合设定。(其规则见右边范例)亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。 声明4个值,其顺序为上、右、下、左边界,如:DIV{margin:12pt 15pt 20pt 16pt;}声明3个值,其顺序为上、右、下,缺少的左边界取其对边(右),如:DIV{margin:12pt 15pt 16pt;}声明2个值,其顺序为上、右,缺少的下、左边界取其对边,如:DIV{margin:12pt 15pt;}声明1个值,则4个边界同一个值,如:DIV{margin:15pt;} padding 设定标记内容与标记边框之间的留白的综合设定(规则见margin属性的范例)。 也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。 border-width 标记元素边框宽度的综合设定(规则类似于margin属性)。 也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值。 border-color 标记元素边框颜色的综合设定(规则类似于margin属性)。颜色取值见color属性。 也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值。 border-style 标记元素边框样式的综合设定(规则类似于margin属性)。边框样式有solid,double,goove,ridge,inset,outset等。 也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值。 border 标记元素4个边框的综合设定,可以分别声明边框宽度、边框样式、和边框颜色。 DIV{border:5pt solid #ff0000;} width 设定标记元素的宽度。 height 设定标记元素的高度。 float 设定标记元素与文字间的相对位置(文字绕排方式)。取值:none:以默认方式显示;left:标记元素靠左,文字在右边绕排;right:标记元素靠右,文字在左边绕排; clear 设定标记元素与文字间的相对位置(与float不同的是标记元素两边都不绕排)。取值:none:以默认方式显示;left:标记元素靠左,右边无文字绕排;right:标记元素靠右,左边无文字绕排; 其他类 z-index 设定标记元素的堆叠层次,取值为整数,也可以是负数,数值大的在上层。 visibility 设定标记元素是否可见,取值有:inherit:取默认值 visible:可见 hidden:不可见(隐藏) 该表只列出常用的CSS属性,及简要介绍其主要功能,若要了解各所有属性和具体的用法,请参考相关书籍。当然,实践是最好的提高办法。
2006年09月12日 09点09分 26
1 2 尾页