CSS笔录

今天系统回顾下CSS，做个笔记，以后做ppt参考下

 

1.（简介）

CSS 指层叠样式表 (Cascading Style Sheets)

 

2.（语法）

①【层叠次序】

内联样式 > 内部样式表 > 外部样式表 > 浏览器中缺省设置（默认设置）

②【大小写】

与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的

③【选择器的分组】

被分组的选择器就可以分享相同的样式，用逗号将需要分组的选择器分开

④【继承及相关问题】

在CSS里子元素从父元素继承属性，在大多数浏览器都符合，例如：

body  {
     font-family: Verdana, sans-serif;
     }

兼容问题：

      但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。这时又该如何是好呢？

解决方案：

      可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题

body  {font-family: Verdana, sans-serif;}
p, td, ul, ol, li, dl, dt, dd  {font-family: Verdana, sans-serif;}

      4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做

 ⑤【摆脱继承】

针对去创建样式即可摆脱继承

 

3.（选择器）

①派生选择器

又叫上下文关系选择器（CSS1时称呼），从CSS2开始改名为派生选择器，主要根据文档的上下文关系来确定某个标签的样式；

包含子元素选择器，后代选择器和相邻兄弟选择器，具体在后面讲解

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

 而在HTML里：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

 只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁

 ② id选择器（唯一性）；

 ③ 类选择器；

 ④属性选择器

  对带有指定属性的 HTML 元素设置样式

【注释：】只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择

关于选择器，在下面会有详细介绍

 

 

 4 .（CSS样式）

①【背景】

 1. 背景色：

background-color不能继承，其默认值是 transparent透明。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见

 2 .背景图片：

background-image 属性的默认值是 none，表示背景上没有放置任何图像

另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承

 3 .背景重复；

 4 .背景定位；

 5 .背景关联： （background-attachment背景附件:fixed）

【适用场景：广告框，例如网页下滑到一定高度后，部分广告栏始终固定在顶部，这个是暂时想到的，有时间测试下】

作用：设置图像相对于可视区固定，不受页面滚动影响

例：

<style type="text/css">
body {
background-image:url(http://www.w3school.com.cn/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
p{
height:200px;
margin:200px 0;
}
</style>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>
<p>图像不会随页面的其余部分滚动。</p>

【注意】background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动

 ② 【文本】

1.缩进；2.水平对齐；3.字间隔；4.字母间隔；5.字符转换（大小写）；

6 . 文本装饰（下划线，上划线，贯穿线）；7 . 处理空白符（换行/不换行）； 8 . 文本方向；

9.字体（字体系列/声明；字体倾斜；字体变形（小型大写字母）；字体粗细；字体大小（px与em））

具体详解我在后面文章http://570109268.iteye.com/admin/blogs/2410000里做了总结

 10 . CSS链接

链接的四种状态：

①a:link - 普通的、未被访问的链接；②a:visited - 用户已访问的链接

③a:hover - 鼠标指针位于链接的上方；④a:active - 链接被点击的时刻

一般正常顺序为：link，visited，focus，hover，active

具体解析及优先顺序详解，我在后面文章http://570109268.iteye.com/admin/blogs/2409960里做了总结

 11 . CSS列表

 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志

 ① 【列表标志】

      在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号

      要修改用于列表项的标志类型，可以使用属性 list-style-type（列表样式类型）

      例子：把无序列表中的列表项标志设置为方块

ul.circle {list-style-type:circle;空心圆}
ul.square {list-style-type:square;实心方块}
ol.upper-roman {list-style-type:upper-roman;大写罗马数字}
ol.lower-alpha {list-style-type:lower-alpha;小写罗马数字}
<p>Type:</p>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

 ②【列表标志图像】

      list-style-image 属性使用图像来替换列表项的标记

      有时常规的标志是不够的。如果想对各标志使用一个图像，可以利用 list-style-image 属性，只需要简单地使用一个 url() 值，就可以使用图像作为标志

<style type="text/css">
  ul {list-style-image: url('http://www.w3school.com.cn/i/eg_arrow.gif')}
</style>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>

 ③【列表标志位置】

list-style-position可以确定标志出现在列表项内容之外还是之内，默认为之外

 1 . 外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义

 2 . 内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样

<style type="text/css">
ul.inside {
    list-style-position: inside
}
ul.outside {/*默认*/
    list-style-position: outside
}
</style>
<p>该列表的 list-style-position 的值是 "inside"：内部</p>
<ul class="inside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>
</ul>
<p>该列表的 list-style-position 的值是 "outside"：外部</p>
<ul class="outside">
<li>Earl Grey Tea - 一种黑颜色的茶</li>
<li>Jasmine Tea - 一种神奇的“全功能”茶</li>
<li>Honeybush Tea - 一种令人愉快的果味茶</li>

 【小结：简写列表样式】

      为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值

可以按顺序设置如下属性：list-style-type，list-style-position，list-style-image，例：

ul {
   list-style: square inside url('http://www.w3school.com.cn/i/eg_arrow.gif')
}

【 CSS 列表属性(list)】

属性 描述

list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

 12 . CSS表格

 属性                                              描述

border-collapse          设置是否把表格边框合并为单一的边框

border-spacing                设置分隔单元格边框的距离

caption-side                              设置表格标题的位置

empty-cells                    设置是否显示表格中的空单元格

table-layout                       设置显示单元、行和列的算法

【注意：】如果没有规定 !DOCTYPE，以上属性可能产生意想不到的结果

具体我在后面文章http://570109268.iteye.com/admin/blogs/2409999里做了总结

 13 . CSS轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

CSS outline 属性规定元素轮廓的样式、颜色和宽度

属性 描述

outline	简写属性，在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

outline 简写属性在一个声明中设置所有的轮廓属性

可以按顺序设置如下属性：，outline-color，outline-style，outline-width

 1 . outline-style 属性用于设置元素的整个轮廓的样式

   属性值：

none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。

  2 . outline-width 属性设置元素整个轮廓的宽度

    只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。

【注释】

①始终在 outline-color 属性之前声明 outline-style 属性，元素只有获得轮廓以后才能改变其轮廓的颜色；

②轮廓线不会占据空间，也不一定是矩形

 

 

 5 .（CSS框模型）

 ①【框模型概念】

 CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式

 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

【浏览器兼容性】

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。

然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。

不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素

 ②【内边距padding】

padding 属性接受长度值或百分比值，但不允许使用负值

百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变

③【外边距margin】

外边距接受任何长度单位、百分数值甚至负值，百分数是相对于父元素的 width 计算的

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em

④【边框border】

每个边框有 3 个方面：宽度、样式，以及颜色

边框样式border-style

none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。

 【提示和注释】

Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px

相反地，Opera 将内部填充（padding）的默认值定义为 8px

因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

也就是我们常见的css初始化兼容写法

*{margin:0px;padding:0px}

 ⑤【外边距合并】

 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

【注释：】只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

接下来用w3school的案例解释下，十分形象

【案例1：外边距叠加，我在后面文章里做了总结】

【案例2：】

以由几个段落组成的典型文本页面为例

      第一个段落上面的空间等于段落的上外边距，如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了

 

 

 6 . （定位）

 CSS 有三种基本的定位机制：普通流、浮动和绝对定位

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定

【CSS 定位属性】

 ① clip                                 剪裁绝对定位元素，设置元素的形状，元素被剪入这个形状之中，然后显示出来

【用法：】当一幅图像的尺寸大于包含它的元素时会发生什么呢？

"clip" 属性允许您规定一个元素的可见尺寸，这样此元素就会被修剪并显示为这个形状。这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小

【属性值：】

shape            设置元素的形状，唯一合法的形状值是：rect (top, right, bottom, left)

auto                    默认值，不应用任何剪裁

<style type="text/css">
        img {
            position:absolute;
            clip:rect(0px 50px 200px 0px)
        }
</style>
<p>clip 属性剪切了一幅图像：</p>
<p>
<img border="0" src="http://www.w3school.com.cn/i/eg_bookasp.gif" width="120" height="151">
</p>

 ②vertical-align                                                                设置元素的垂直对齐方式

值 描述

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。

下面来看个例子：

<style type="text/css">
        img.top {vertical-align:text-top}
        img.bottom {vertical-align:text-bottom}
</style>
<p>
    这是一幅<img class="top" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif" />
  位于段落中的图像。
</p>
<p>
    这是一幅<img class="bottom" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif"/>
   位于段落中的图像。
</p>

 ③ 相对定位        

   设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留

 ④绝对定位

   设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框

【注意】

复习一下学过的知识：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序

 ⑤浮动

       浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，且脱离文档流（所以会产生覆盖和有关清除浮动的问题）

      具体详解我在后面文章http://570109268.iteye.com/admin/blogs/2410046里做了总结

【拓展：关于浮动的相关问题和思考，我在后面文章http://570109268.iteye.com/admin/blogs/2410141做了总结】

 

7.（CSS选择器）

【注意】CSS样式由选择器和声明组成，选择器分组和声明分组可以提高效率

①元素选择器

又叫类型选择器（type selector），类型选择器匹配文档语言元素类型的名称，匹配文档树中该元素类型的每一个实例

②选择器分组

选择器用逗号分隔，如果没有逗号，则会认为后代选择器

【优点】可以精简CSS代码

③通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配

④声明分组

对声明分组，一定要在各个声明的最后使用分号，这很重要。因为浏览器会忽略样式表中的空白符

【案例】下面举个简单例子说明空白符

 

<style type="text/css">
    p{color:blue;background-color:yellow;}
</style>
<p>我是蓝色字体黄色背景</p>

 如果忽略了分号，用户代理就会把这个样式表解释如下：

<style type="text/css">
    p{color:blue background-color:yellow;}
</style>
<p>我是蓝色字体黄色背景</p>

   因为 background 对 color 来说不是一个合法值，而且由于只能为 color 指定一个关键字，所以用户代理会完全忽略这个 color 声明（包括 background: yellow部分），最后显示成黑色字体且无背景

 

 ⑤类选择器

 1 . 可以结合元素选择器使用，例如

p.important {color:red;}
h1.important {color:blue;}

 2 . 多类选择器（IE7之前版本不兼容）

<style type="text/css">
     .important.warning {background:silver;}
</style>
<p class="important warning">
This paragraph is a very important warning.
</p>

 通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）

 规则：可多不可少，意思是↴

 如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败；如果类名列表里除了多类选择器，还有其他类名，则依然可以匹配成功

 ⑥ID选择器

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号

【区分大小写】

类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配

 ⑦属性选择器

属性选择器可以根据元素的属性及属性值来选择元素，分为简单属性选择和具体属性值选择

   1 .  简单属性选择例：

*[title] {color:red;}
a[href] {color:red;}
img[alt] {border: 5px solid red;}
a[href][title] {color:red;}

    2 . 具体属性值选择例：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

 【注意：运用属性选择器（除部分属性值选择外）时不能和多类选择器一样，必须完全一致，例】

<p class="important warning">This paragraph is a very important warning.</p>

 如果写成 p[class="important"]，那么这个规则不能匹配示例标记。要按具体属性值选择元素，必须这样写：

p[class="important warning"] {color: red;}

    3 . 部分属性值选择：

 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

 假设想选择 class 属性中包含 important 的元素，可以用部分属性值选择器，例：

p[class~="important"] {color: red;}

 如果忽略了波浪号，则说明需要完成完全值匹配

  ⑧子串匹配属性选择器

它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7

类型 描述

[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

举例来说：

  如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="w3school.com.cn"] {color: red;}

 ⑨特定属性选择类型

   [att|="val"] 可以用于任何属性及其值

   假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

img[src|="figure"] {border: 1px solid gray;}

 这种属性选择器最常见的用途还是匹配语言值

【属性选择器列表：】

   选择器                           描述

[attribute]        用于选取带有指定属性的元素。

[attribute=value]用于选取带有指定属性和值的元素。

[attribute~=value]用于选取属性值中包含指定词汇的元素。

[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value]匹配属性值以指定值开头的每个元素。

[attribute$=value]匹配属性值以指定值结尾的每个元素。

[attribute*=value]匹配属性值中包含指定值的每个元素。

 ⑩后代选择器

后代选择器（descendant selector）又称为包含选择器

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”

【注意】

元素层次间隔：有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深

 ⑪子元素选择器

子元素选择器（Child selectors）只能选择作为某元素子元素的元素

例：如果希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

【注意】这里要注意的是子元素选择器与后代选择器的区别：

   后代选择器两个元素之间的层次间隔可以是无限的，但是子元素选择器必须是紧邻的，也就是说层次间隔有限 

【案例】 还是上边的例子：

   这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 并不是直接裸露在h1下，所以不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

 【语法解析】

   子选择器使用了大于号（子结合符），并且子结合符两边可以有空白符，这是可选的

   所以h1 > strong；h1> strong；h1 >strong；h1>strong这些写法均正确

 ⑫ 相邻兄弟选择器

 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

 条件：1 . 紧邻； 2 . 相同父元素；

 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）  

 【注释】：与子结合符一样，相邻兄弟结合符旁边可以有空白符

 ⑬ CSS伪类

 CSS 伪类用于向某些选择器添加特殊的效果

 例如：链接样式（官方叫锚伪类）:link，:visited，:hover，:active；聚焦样式:focus 伪类（无法在 IE 中工作）；首个子对象伪类:first-child；语言伪类:lang向带有指定 lang 属性的元素添加样式

 ⑭ CSS伪元素

 CSS 伪元素用于向某些选择器设置特殊效果

  "CSS 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）

属性 描述 CSS

:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

 3.（常用样式总结）

一.【水平对齐】

 使用 margin 属性来水平对齐，可通过将左和右外边距设置为 "auto"，来对齐块元素

 注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的

 二.【左右对齐】

 ①使用 position 属性进行左和右对齐

 《兼容问题》：当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明

 ②使用 float 属性来进行左和右对齐

 《兼容问题》：与position属性相同，当使用 float 属性时，IE8 以及更早的版本存在一个问题：右侧增加 17px 的外边距（滚动条预留空间）

 【分类属性 (Classification)】

  CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度

属性 描述

clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

【注意】

 ①visibility:hidden;时元素不可见但任然占据文档空间；而display:none;为元素从文档彻底消失

 三.【透明度】

opacity（整体透明）与rgba（背景透明），具体兼容问题我在后面文章里做了总结

 关于IE兼容opacity：http://570109268.iteye.com/admin/blogs/2410365

 关于IE兼容rgba：http://570109268.iteye.com/admin/blogs/2410359

四 .【媒介类型】

 媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等

注释：媒介类型名称对大小写不敏感

【不同的媒介类型】

媒介类型 描述

all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

【@media媒体查询规则】

@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介

  案例：

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：

<style>
@media screen{
   p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print{
   p.test {font-family:times,serif; font-size:10px}
}
@media screen,print{
   p.test {font-weight:bold}
}
</style>

 五 . 【CSS注意事项】

 ①尽量避免使用behavior（行为）属性，因为只有IE支持 behavior 属性。而 behavior 属性是从 IE5 开始引入的，是一种通过使用 CSS 向 HTML 元素添加行为的方法。可以用JS和HTML DOM取代

 

 

 

 

 

 

 

 

【总结】

①所有背景属性（背景色，背景图片）都不能继承

②任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"

③字间距（word-spacing）与字母间距（letter-spacing），段落汉字间距与英文字母用letter-spacing属性，英文段落单词间距用word-spacing属性

④关于更多更详细的CSS属性，我在后面文章http://570109268.iteye.com/admin/blogs/2410366里做了总结

 

 

 

 

.