繁体中文
设为首页
加入收藏
当前位置:在线教程首页 >> 网页设计 >> CSS与特效 >> css新手上路<七>

css新手上路<七>

2005-10-09 06:02:00  作者:unknown   来源:兵马俑bbs   浏览次数:280  文字大小:【】【】【

这一节我们讨论如何用 CSS 来控制四周的空格以及边框
的设定

元素周边的空格 margin
性质 margin 可被用来决定周边的空格, 假如我们想让整
个网页在左边有 5em 但让标题没有任何空格

  BODY {margin: 5em}
  H3 {margin: -5em}
H3 的负值 -5em 抵销了 BODY 5em 的空格。

另外我们还可以分别用 margin-left, margin-right, margin-top,
和 margin-bottom 来设定 左,右,上,下的空格

元素内部周边的空格 padding
初看起来这个性质跟 margin 好象一样。 其实它们之间有
很大的区别。margin 的空格是相对于其他的元素所空的,
而 padding 是在元素的周边和内部的内容所空的空格。在
下面的例子,我们用有背景颜色的 TABLE 来让你注意这
个性质

  TABLE.pad {padding: 5mm; background-color: #CCEFCC}
Petersen was arrested in a modest apartment building in Studio City, Calif., which he had been sharing with three other people. The Marshals entered the apartment using a key provided by the building"s manager. When they entered, the Marshals said, they
found Petersen alone -- sitting on his bed and using his laptop computer. 

我们同样可以用 padding-left, padding-right, padding-top, 和
padding-bottom 来分别控制左,右,上,下的元素内部
的周边空格。

元素边框的宽度
我们可以用 border-width 性质来调节边框的宽度。 比如

  P.width5 {border-width: 1px}
这个 P 元素的边框宽度是 1 px

你可以用 border-left-width, border-right-width, border-top-width,
和 border-bottom-width 来分别决定左,右,上,下边的宽度

元素边框的颜色
我们可以用 border-color 性质来调节边框的颜色。 比如

  P.colorred {border-color: red}
这个 P 元素的边框的颜色是红色的

元素边框的形态
我们可以用 border-style 性质来调节边框的形态。 比如

  P.inset {border-style: inset, border-width: 5px}
这个 P 元素的边框的形态是 inset

这个 P 元素的边框的形态是 outset

这个 P 元素的边框的形态是 double

这个 P 元素的边框的形态是 groove

这个 P 元素的边框的形态是 ridge

此文章不能满足您的需求?那就就Google一下吧:)
Google
 

责任编辑:Lucy


相关文章
SA空口令破解和保护
怎样使MySQL更安全?
Mysql数据库的安全配置、实用技巧
如何安全的配置和应用MySQL数据库?
Oracle数据库安全策略分析
SQL Server 2000的安全配置
使一个新的MySQL安装更安全
教您如何安全的应用MySQL
MySQL数据库安全配置
MySQL安全性指南(1)
MySQL安全性指南(2)
 

最新文章

更多

· 关于CSS你只需知道的十件事
· CSS网站实用技巧:word-...
· CSS实战:解决图片下面有...
· 中文网页制作中段落缩进...
· 巧用CSS制作树状目录
· CSS重新定义项目符号和编号
· 网页特效大公开
· css新手上路<七>
· css新手上路<六>
· css新手上路<五>

推荐文章

更多

· 关于CSS你只需知道的十件事
· CSS网站实用技巧:word-...
· CSS实战:解决图片下面有...
· 中文网页制作中段落缩进...
· 巧用CSS制作树状目录
· CSS重新定义项目符号和编号
· 网页特效大公开
· css新手上路<七>
· css新手上路<六>
· css新手上路<五>

热点文章

更多

· CSS实战:解决图片下面有...
· CSS网站实用技巧:word-...
· 关于CSS你只需知道的十件事