§ ITPOW >> 文档 >> CSS

ITPOW教程-CSS(3)

作者:ITPOW 来源:ITPOW 日期:2006-5-16

ITPOW教程 从用出发


在前面两节中,我们已经进入样式表的大堂了,从这一节开始,我们讲述制作一个网页时常用的样式表。我们要说明的是,各种浏览器对其中某些样式的解释并不完全相同,我们这里只给出一种比较通用的解释,至于其具体区别,请参见 ITPOW 其它专题或文档。先请看下面一个示例。

body
{
    background-image:url("../images/bodyBg.gif");
    text-align:center;
    font-size:14px;
}
form
{
    margin:0px 0px 0px 0px;
}
table
{
    font-size:13px;
}
p
{
    text-indent:28px;
    line-height:150%;
}
ul
{
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
    margin-left:0px;
    padding:0px 0px 0px 20px;
}
li
{
    line-height:170%;
    border-bottom:1px solid #FF0000;
}
img
{
    border:none;
}
a:link
{
    font-size:14px;
    color:#333366;
    text-decoration:none;
}
a:visited
{
    font-size:14px;
    color: #333366;
    text-decoration:none;
}
a:hover
{
    font-size:14px;
    color: #FF0000;
    text-decoration:underline;
}

可以看出前面所使用的全部是类型选择符,用大括号把样式括起来表示这些样式的作用于该 HTML 类型。

从上往下看 body:

background-image:url("../images/bodyBg.gif");

这句表示背景图片,url 后面跟背景图片地址,注意其地址路径是相对于样式所在文件来说的,请参见:样式表中url()的相对路径使用(8月11日修正)

如果不使用背景图片,背景颜色又是如何设置的呢,如下:

background-color:transparent 或 background-color:颜色代码

background-color:transparent 表示透明,实际上默认就是透明的。颜色代码我们会在下一节具体给出。

继续往下走:

text-align:center;

表示内容居中显示,比如文字、图片居中显示。属性值有:

  • left : 左对齐
  • right : 右对齐
  • center : 居中
  • justify : 两端对齐(在现行的浏览器中,都不会有效果,请不要使用)

text-align 具有传递作用,就是说 body 中设置了 居中, body 标签内的  table、p 等标签的内容也是居中的,字体属性一般都具有这种特性。

继续:

font-size:14px;

一看就知道表示文字大小了,示例中为:14 像素,同样字体大小的单位我们也会在下一节中给出。请参见:为什么使用px而不使用pt?

来到 form 标签:

我们以前不理解,为什么插入 form 后总会在底部有一个删除不掉的空白,这就是 form 的外边距造成的,也就是说默认情况下 form 的最外围会与其它元素(如表格)保持一定的距离,就像两栋房间留有过道一样。

margin:0px 0px 0px 0px;

有四个 0px 分别表示 form 的上、右、下、左外边距为 0px,注意其顺序。

看看 table 标签:

前面为 body 指定了 font-size 为 14px,按照传递,table 中的文字也是 14px,这里又指定为 13px,相当于给它拦了一杆子,table 的文字不再是 14px,而是 13px。

段落标记 p:

text-indent:28px;

text-indent 是首行缩进,用过 Word 都知道。文字是 14px 大小,缩进 28px,也就是说这句样式的意思是缩进两个字符。

line-height:150%;

line-height 是行高,或者说行距,表示行与行之间的距离,可以用像素为单位,也可以用百分比来表示,一般我们用百分比来表示,因为用百分比来表示的话,浏览器会自动根据文字大小,来确定最终的行高是多少像素。

无序列表 ul:

前面说了 margin 可以同时表示四个方向的外边距,我们也可以单独指定某一个方向的外边距,比如 margin-left 表示左方向上的外边距,这四个属性不一定非同时出现,可以只用一个或其中几个。

padding 是内边距,跟外边距相对,结合外边距来理解,就好比我们房间里,写字台离墙面的距离,这就是内边距。跟 margin 一样,padding 也可以单独表示,如:padding-top:13px;。

li:

li 是 ul 的下一级元素,表示一项。

border-bottom:1px solid #FF0000;

1px 1像素,solid 实线(线类型的一种),#FF0000 红色。合起来就是底边框是一个像素的红色实线。

同理还有 border-top、border-right、border-left。

border:1px solid #FF0000; 这个省略方向的边框,就表示四周的边框。

紧拦着往下看图像标签 img:

图像加了超链接后,四周就会有一个边框,这时我们可以用以下代码消除边框。

border:none;

表示四周无边框,也可以把 none 写成 0px,“没有”=“0像素”嘛,但推荐用 none。

看最后三个标签:

a:link、a:visited、a:hover,它们分别表示:还没有点击过的超链接、已经点击过了的超链接、鼠标移上去后的超链接。这里有一点特别要注意,它们的顺序一定要按照上面给的顺序来写,否则样式就可能无效。这里的冒号就是前面说的伪类。

color 表示字体颜色。text-decoration 字体装饰,属性值有:

  • none : 无装饰
  • blink : 闪烁(在现行的浏览器中,都不会有效果,请不要使用)
  • underline : 下划线
  • line-through : 贯穿线
  • overline : 上划线
相关文章