CSS手册简编(4)

2008-02-23 08:30:54来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

"font-size"属性只对可卷动的媒体类型有效(屏幕)。

声明一个媒体属性可以用@import@media引入:

@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}

也可以在文档标记中引入媒体:

<LINK rel="stylesheet" type="text/css" media="print" href="foo.css">

可以看出,@import@media的区别在于,前者引入外部的样式单用于媒体类型,后者直接引入媒体属性。@import的使用方法是@import加样式单文件的URL地址再加媒体类型,可以多个媒体共用一个样式单,媒体类型之间用""分割符分开。@media用法则是把媒体类型放在前面,其他规则和rule-set基本一样。下面列出各种媒体类型:

SCREEN:指计算机屏幕。
PRINT:指用于打印机的不透明介质。
PROJECTION:指用于显示的项目。
BRAILLE:盲文系统,指有触觉效果的印刷品。
AURAL:指语音电子合成器。
TV:指电视类型的媒体。
HANDHELD:指手持式显示设备(小屏幕,单色)
ALL:适合于所有媒体。

CSS属性:

2BOX模型(BOX Model)属性

什么是BOXCSSHTML中以<somesign>……</somesign>的部分称为BOX(容器),BOX有三类属性:paddingmarginborder

Margin属性:

Margin属性分为margin-topmargin-rightmargin-bottommargin-leftmargin五个属性,分别表示BOX里内容离边框的距离,它的属性值是数值单位,可以是长度、百分比或automargin甚至可以设为负值,造成BOXBOX之间的重叠显示,关于margin的属性详见下表:

属性名称: 'margin-top''margin-right''margin-bottom''margin-left'
属性值: <margin-width>
初始值: 0
适合对象: 所有元素
是否继承: no
百分比备注: 相对于BOX的宽度

例如:

H1 { margin-top: 2em }
H2 { margin-right: 12.3% }

Margin还有一个快捷的书写方法,就是直接用margin属性,例如:

BODY { margin: 1em 2em 3em 2em}

等同于:

BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}

margin属性后面可以有四个值,中间用空格隔开(记住不是逗号),顺序是"上右下左",当然margin后面可以不足四个值,例如:

BODY { margin: 2em } /* 所有的margin都设为2em */
BODY { margin: 1em 2em } /*
上下margin1em

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:中文排版CSS心得

下一篇:CSS布局自适应高度解决方法