电脑软硬件应用网
当前位置: 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
样式表(CSS)学习(三)
样式表(CSS)学习(三)
2005-12-30 19:13:59  文/45IT收集   出处:电脑软硬件应用网   


文字的颜色 
我们用 color 可以来决定文字,周边,以及横线的颜色 

  P.greentext {color: green}

请看下面的例子 这一行文字的颜色是绿色的
 

背景的颜色 

背景的颜色可以由 background-color 来控制, 比如我们想叫一些文字段落的背景颜色为浅绿色的, 

  P.greenbg {background-color: #CCEFCC}

请看下面的例子 

这一行的背景颜色是浅绿色的

背景的图象 
我们不但可以给整个网页加个背景图象,我们还可以给其中一个元素加个背景图象,比如说我们给 P 的背景加上天空的背景 

  P.sky {background-image: url(../images/sky.jpg)}

请看下面的例子 

这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空.这段文字的背景图案是天空. 

我们不但可以决定是否给背景加图象, 还可以确定是否让这个图象重复以及在哪个方向重复。比如我们只让图象在整个网页的竖直方向重复我们就可以产生左边有个图象条的效果。 

  body {background-image: url(sky.jpg); background-repeat: repeat-y top right}

background-repeat可以有这些可能值:no-repeat, repeat-x, repeat-y 

我们还可以用 background-attachment 来决定当别人浏览你的网页的是否让背景图象随着内容一起滚动。比如我们如果不让背景图象动, 

  body {background-image: url(sky.jpg); background-attachment: fixed}


元素周边的空格 margin

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

  BODY {margin: 5em}
  H3 {margin: -5em}

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

元素内部周边的空格 padding


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

  TABLE.pad {padding: 5mm; background-color: #CCEFCC}

padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.padding is five.  

我们同样可以用 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.inset {border-width: 5px; border-color: red; border-style: inset}的效果:
这个 P 元素的边框的形态是 inset 

P.outset {border-width: 5px; border-color: red; border-style: outset}的效果:
这个 P 元素的边框的形态是 outset 

P.double {border-width: 5px; border-color: red; border-style: double}的效果:
这个 P 元素的边框的形态是 double 

P.groove {border-width: 5px; border-color: red; border-style: groove}的效果:
这个 P 元素的边框的形态是 groove 

P.ridge {border-width: 5px; border-color: red; border-style: ridge}的效果:
这个 P 元素的边框的形态是 ridge 
务器租用、托管;域名注册;虚拟主机
江湖、聊天室租用;程序开发,网站建设
欢迎咨询http://nicchina.com/
QQ:30196310

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页?rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    网页设计的形象思维归纳
    彻底去掉动易内容页顶部的“改变图片…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号