ITPOW教程 从用出发
在前面两节中,我们已经进入样式表的大堂了,从这一节开始,我们讲述制作一个网页时常用的样式表。我们要说明的是,各种浏览器对其中某些样式的解释并不完全相同,我们这里只给出一种比较通用的解释,至于其具体区别,请参见 ITPOW 其它专题或文档。先请看下面一个示例。
ITPOW教程 从用出发
在前面两节中,我们已经进入样式表的大堂了,从这一节开始,我们讲述制作一个网页时常用的样式表。我们要说明的是,各种浏览器对其中某些样式的解释并不完全相同,我们这里只给出一种比较通用的解释,至于其具体区别,请参见 ITPOW 其它专题或文档。先请看下面一个示例。
可以看出前面所使用的全部是类型选择符,用大括号把样式括起来表示这些样式的作用于该 HTML 类型。
从上往下看 body:
background-image:url("../images/bodyBg.gif");
这句表示背景图片,url 后面跟背景图片地址,注意其地址路径是相对于样式所在文件来说的,请参见:样式表中url()的相对路径使用(8月11日修正)
如果不使用背景图片,背景颜色又是如何设置的呢,如下:
background-color:transparent 或 background-color:颜色代码
background-color:transparent 表示透明,实际上默认就是透明的。颜色代码我们会在下一节具体给出。
继续往下走:
text-align:center;
表示内容居中显示,比如文字、图片居中显示。属性值有:
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 字体装饰,属性值有: