CSS 属性

 

有时我们还希望能够在特定的范围内使样式单生效：   p em {color:red}  元素标记间又空格隔开，表示在 <p> 和 </p> 间的 <em> 、 <em> 用红色表示 。   另外还可以利用 “~” 表示一个选择器后面紧跟另一个选择器，并且两边以 “/” 围住：   / Selector1 ~ Selector2/ {……}  表示如果 Selector2 紧跟着 Selector1 则使用该样式单。

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 ：适合于所有媒体。

2 、 BOX 模型（ BOX Model ）属性  

Margin	表示 BOX 里内容离边框的距离
Padding	描述 BOX 的边框和内容之间插入多少空间
Border	实际上 BOX 是有边框的，只是平时不显示出来罢了
z-index	在 CSS 中允许元素的重叠显示，这样就有一个显示顺序的问题， z-index 属性描述了元素的前后位置，如果把电脑屏幕看作 X-Y 平面的话，那么 Z 轴就是垂直于屏幕的， z-index 使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且 C SS 同意在 z-index 中使用负数。   属性名称 : 'z-index'  属性值 : auto|<integer>  初始值 : auto  适合对象 :  使用 position 属性的元素   是否继承 : no  百分比备注 :  被禁止
z-index 属性：   在 CSS 中允许元素的重叠显示，这样就有一个显示顺序的问题， z-index 属性描述了元素的前后位置，如果把电脑屏幕看作 X-Y 平面的话，那么 Z 轴就是垂直于屏幕的， z-index 使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且 C SS 同意在 z-index 中使用负数。   属性名称 : 'z-index'  属性值 : auto|<integer>  初始值 : auto  适合对象 :  使用 position 属性的元素   是否继承 : no  百分比备注 :  被禁止
overflow 属性：   在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到 overflow 属性：  属性名称 : 'overflow'  属性值 : visible | hidden | scroll | auto  初始值 : visible  适合对象 :  元素的 position 属性   是否继承 : no  百分比备注 :  被禁止   属性值含义如下：   visible ：扩大面积以显示所有内容。   hidden ：隐藏超出范围的内容。   scroll ：在元素的右边显示一个滚动条。   auto ：当内容超出元素面积时，显示滚动条。
line-height 和 vertical-align 属性：   line-height 属性可以规定元素内部的行间距，使用长度单位或百分数：  属性名称 : 'line-height'  属性值 : normal | <number> | <length> | <percentage>  初始值 : normal  适合对象 :  所有元素   是否继承 : yes  百分比备注 : 根据元素的字体大小而定   例如下面的例子，虽然表达方式不同，但结果一样：   DIV { line-height: 1.2; font-size: 10pt }  DIV { line-height: 1.2em; font-size: 10pt }  DIV { line-height: 120%; font-size: 10pt }
vertical-align 属性决定元素在垂直位置的显示：  [ 只适用于表格，并不是用于垂直定位的；是否与基线对齐等 ] 属性名称 : 'vertical-align'  属性值 : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>  初始值 : baseline  适合对象 : inline elements   适合继承 : no  百分比备注 :  根据元素的 line-height 属性而定   属性值含义如下：   baseline ：与元素的基线对齐。   middle ：与元素中部对齐。   sub ：字下沉。   super ：字上升。   text-top ：文本顶部对齐。   text-bottom ：文本底部对齐。   Top ：和本行位置最高元素对齐。   Bottom ：和本行位置最低元素对齐。
background attachment 属性表示在滚动整个文档时，背景图片的显示方式。 它的属性值有两种： fixed 和 scroll ， fixed 相当于 IE4 里的水印效果，也就是说在拖动文档时，背景相对是静止的， scroll 则和文档一起滚动 。
font-style 属性描述字体的倾斜程度：   属性名称 : 'font-style'  属性值 : normal | italic | oblique  初始值 : normal  适合对象 :  所有元素   是否继承 : yes  百分比备注 :  被禁止

 

text-transform 属性可以将 BOX 内的文本按指定的大写或小写形式显示：   属性名称 : 'text-transform'  属性值 : capitalize | uppercase | lowercase | none  初始值 : none  适合对象 :  所有元素   是否继承 : yes  百分比备注 :  被禁止   属性值含义为：   capitalize ：把 BOX 中的每句句首字母变成大写。   uppercase ：把 BOX 中所有的字母变成大写。   lowercase ：把 BOX 中所有的字母变成小写。

White-space 属性描述如何显示文本中的空格， 在 HTML 中，空格是被省略的，也就是说你在一个段落标记的开头无论输入多少个空格都是无效的， 要输入空格有两个方法，一是直接输入空格的代码 “ ” ，或者使用 <pre> 标记， CSS 中也制定了类似于 pre 的属性：   属性名称 : 'white-space'  属性值 : normal | pre | nowrap  初始值 : normal  适合对象 :  容器元素   是否继承 : yes  百分比备注 :  被禁止   例如：   PRE { white-space: pre }  P { white-space: normal }