css基础属性.docVIP

css基础属性 CSS属性： 1、媒体（Media）类型 样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如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属性： 2、BOX模型（BOX Model）属性 什么是BOX？CSS把HTML中以somesign……/somesign的部分称为BOX（容器），BOX有三类属性：padding、margin和border。 Margin属性： Margin属性分为margin-top、margin-right、margin-bottom、margin-left和margin五个属性，分别表示BOX里内容离边框的距离，它的属性值是数值单位，可以是长度、百分比或auto，margin甚至可以设为负值，造成BOX与BOX之间的重叠显示，关于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 } /* 上下margin为1em，右左margin为2em */ BODY { margin: 1em 2em 3em } /* 上margin为1em，右左margin为2em，下margin为3em*/ Padding属性： Padding属性用来描述BOX的边框和内容之间插入多少空间，和margin属性类似，它也分为上右下左和一个快捷方式padding，关于padding的属性详见下表： 属性名称: padding-top、padding-right、padding-bottom、padding-left 、padding 属性值: padding-width 初始值: 0 适合对象: 所有元素 是否继承: no 百分比备注: 相对于BOX的宽度 例如： BLOCKQUOTE { padding-top: 0.3em } padding属性和margin类似此处略去。 Border属性： 平时我们在查看HTML文档时，看到一段文字，并不会把它当作一个BOX，实际上BOX是有边框的，只是平时不显示出来罢了，而border属性就是用来描述BOX边框的。Border属性分为border-width、border-color和border-style，而这些属性下面又有分支。 border-width属性： border-width属性又分为：border-top-width、border-right-width、border-bottom-widt