★教程篇★CSS说明

由 **tiger_tiger** 周四十二月 20, 2007 8:49 am

css可以应用在

代码:

等标签里。

在

代码:: 与

中插入CSS定义WEB风格的格式如下：

代码:

1.控制字符的大小

font-size:10pt (PT是单位，还可以用IN、CM等单位)

2.控制字符的颜色

color:#ccffcc (可以使用一些常用的英文单词控制颜色,如:red,blue,black,white等等)

这里的文字是例子

具体的代码为:

代码:: [color=#FFCC00]这里的文字是例子[/color]

说明:
#FFCCFF是十六进制颜色代码,可选0-9;A-F
前两控制红色深度
中间两位控制绿色深度
后两位控制蓝色深度

3.背景色/图片的控制

background-color:red //背景色

background-image:url("图片的路径") //背景图片

这里的文字是例子//背景色

具体代码:

代码:: 这里的文字是例子

这里的文字是例子//背景图片

具体代码:

代码:: 这里的文字是例子

背景图片的重复方式:

background-repeat:on-repeat //(不重复)

可选参数有:repeat-y（表示垂直重复排列）;repeat-x（表示水平重复排列）;repeat（表示图片在水平和垂直方向上都重复排列）

背景图片：

background-position ：

可选的值：[ | ] {1,2} | [top | center | bottom] || [left | center | right]（在背景图案已经设定的情况下，background-position指定了它的初始位置。如果设定的属性值是“0% 0%”，那么意味着图片左上角与该元素的左上角重合；如果设定的属性值是“100% 100%”，那么意味着图片右下角与该元素的右下角重合，以此类推。在设定背景图片位置的时候，还可以使用关键字来定义一些特殊的位置，下面是一些关键字以及相应的尺寸：“top left”和“left top”＝“0% 0%”；“top”、“top center”和“center top”＝“50% 0%”；等等。）

background-attachment:fixed（背景图案永远静止，文字在背景上面“滚动”）
background-attachment:scroll（背景图案随着页面上的文字一起“滚动”）

4.字符行列距的控制

line-height://定义行高

vertical-align://对齐方式

5.表格的控制:

border-color: //控制边框的颜色.

如里想对四边的边框分别进行控制,请看下面:

style="border-top: 1 solid #008000" //1为边框的大小,#00800为边框的颜色

如果想文字给一个边框围住,看下面:

这里的文字是例子

具体代码:

代码:: 这里的文字是例子

6.控制字形/字体

font-family: //字体控制

font-weight: //字体粗细控制

上下划线的控制

text-decoration: //选none可去掉下划线,选underline则下划线,选取overline则上划线,选line-through则是删除线

font-style: //字体是否倾斜,选Italic倾斜

可选取参数有:blod,extra-light,demi-light,extra-bold,mediam等等

这里的文字是例子

具体代码：

代码:: [font=黑体][b][i]这里的文字是例子[/i][/b][/font]

7.访问前后或激活时控制"{}"里的代码可自己进行更改

A:link {text－decoration: none; color:blue} //访问前
A:visited { color:red; text－decoration:line－through } //访问后
A:active { color:white; text－decoration:underline } //激活时
A:hover {text－decoration:none;color:yellow;background－color:black} //ONMOUSE时

8.css控制鼠标型状,在CSS中可以使用cursor:来控制鼠标的型状，参数及示例如下（先将鼠标停在相应的链接上看效果，例如想要手形的，在CSS中找到cursor:把后面的参数改成hand就好了）

style="cursor:hand"

style="cursor:crosshair"

style="cursor:text"

style="cursor:wait"

style="cursor:move"

style="cursor:help"

style="cursor:e-resize"

style="cursor:n-resize"

style="cursor:nw-resize"

style="cursor:w-resize"

style="cursor:s-resize"

style="cursor:se-resize"

style="cursor:sw-resize"
-------------------------------------------------------------------------------------------------------------------------------------------------

其它示例：

1.具体代码：

代码:: [table style="" border="0" width="25%"][tr][td style="background-color: rgb(0, 128, 0); color: rgb(0, 255, 0);" width="100%"][color=#00ff00]这里是上面代码的效果[/color][/td][/tr][/table]

这里是上面代码的效果

2.具体代码：