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

css新手上路<七>

2005-05-25 17:48:00  作者:佚名  来源:internet  浏览次数:82  文字大小:【】【】【
这一节我们讨论如何用  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
 

责任编辑:admin


相关文章
服务器内存技术知识充电
服务器端口过滤防黑法
服务器硬件故障处理几例
FTP命令详解
表格对决CSS
CSS应用常见问题
CSS样式应用技巧
巧用CSS制作树状目录
CSS类及id的规范化命名
用 CSS 实现的阴影效果
CSS实用教程(一)
 

最新文章

更多

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

推荐文章

更多

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

热点文章

更多