CSS高级教程

rain

visibility 属性

visibility 属性规定元素是否可见。

提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。

说明

这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

可能的值

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

CSS属性中Display与Visibility的不同
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例：

<script language="JavaScript">
function toggleVisibility(me){
  if (me.style.visibility=="hidden"){
   me.style.visibility="visible";
   }
  else {
   me.style.visibility="hidden";
   }
  }
</script>

<div style="position:relative">
第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。</div><div>因为visibility会保留元素的位置，所以第二行不会移动.</div>

效果：

第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。
因为visibility会保留元素的位置，所以第二行不会移动.

注意到，当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。下面看我实例的代码和效果：

例：

<script language="JavaScript">
function toggleDisplay(me){
  if (me.style.display=="block"){
   me.style.display="inline";
   alert("文本现在是：'inline'.");
   }
  else {
   if (me.style.display=="inline"){
    me.style.display="none";
    alert("文本现在是:'none'. 3秒钟后自动重新显示。");
    window.setTimeout("blueText.style.display='block';",3000,"JavaScript");
    }
   else {
    me.style.display="block";
    alert("文本现在是:'block'.");
    }
   }
  }
</script>

<div>在<span id="blueText"
style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>

效果：

在文字上点击来查看效果.

---

disabled="disabled"   禁用 input 元素    true   /  false     是否可见
display：none  不可见
hide（）隐藏

rain

display 属性规定元素应该生成的框的类型。
值        描述
none        此元素不会被显示。
block        此元素将显示为块级元素，此元素前后会带有换行符。
inline        默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block        行内块元素。（CSS2.1 新增的值）
list-item        此元素会作为列表显示。
run-in        此元素会根据上下文作为块级元素或内联元素显示。
compact        CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker        CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table        此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table        此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group        此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group        此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group        此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row        此元素会作为一个表格行显示（类似 <tr>）。
table-column-group        此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column        此元素会作为一个单元格列显示（类似 <col>）
table-cell        此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption        此元素会作为一个表格标题显示（类似 <caption>）
inherit        规定应该从父元素继承 display 属性的值。

rain

font、font-family(字体)、font-size（字大小）、font-style（字样式）、font-weight（css加粗）、text-decoration（下划线）、font-variant（字母大小写）、text-transform（英文大小写）、letter-spacing（间隔）

text-transform 值：
Capitalize 英文拼音的首字母大写
Uppercase 英文拼音字母全大写
Lowercase 英文拼音字母全小写

font-variant : normal | small-caps
normal : 正常的字体
small-caps : 让字母变成小型的大写字母字体并缩小字母

text-indent设置抬头距离css缩进
letter-spacing来设置字与字间距_字符间距离，字体间距css样式

---

text-overflow : clip | ellipsis
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（...）

overflow 属性[]overflow 属性规定当内容溢出元素框时发生的事情
可能的值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

rain

1、CSS星号*选择器*{padding:0; ... }
CSS星号“*”这是什么意思呢？
这里的“*”号是通配符，即指，网页html中所有标签意思。
例子：
CSS代码：*{ padding:0; margin:0; font-family:"黑体"}
以上DIV+CSS中CSS代码意思：设置网页html中所有标签成员的css样式为padding为0，margin为0,字体为黑体。
这样就无需像以前那样分别设置网页不同标签元素的css样式表,这样就全面设置和初始化了html标签元素的CSS样式。
2、CSS选择器内以(*)星号开头CSS单词  

在CSS选择器内星号+CSS样式属性单词，一般区别IE6和IE8、IE6和FF，IE7和IE8，IE7和FF浏览器之间属性CSS HACK。如下演示测试。

.divcss5{border:1px solid #000;width:220px;*width:300px;}
我们设置一个宽度为220px,一个带星号的宽度为300px，

讲过各大浏览器测试，我们会发现在IE6和IE7中宽度为300px，而在IE8及以上MSIE版本、谷歌浏览器、火狐(FF)浏览器却显示为220px宽度。

自己测试测试看看是否与描述相同效果。
注意：这里属于星号CSS属性放置前后位置。

rain

<link href="print.css" rel="stylesheet" type="text/css" media="print"/>     media="print" 表示该样式表仅应用于打印内容。 默认情况下其值是screen

<hr/> 水平线，两种方式定义样式：
style="border-top:1px solid #ff9900; "        或者     <hr size=”1″ color=”#ff9900″/>

rain

ie -ms-interpolation-mode: bicubic 属性详解
img { -ms-interpolation-mode: bicubic; }
这个在做实时缩放图片、缩略图的时候用处挺大。IE7 Only


IE7.0自带样式属性-ms-interpolation-mode


刚过完火星，从骨灰级哪里淘到的沙子。

以前很少写样式的体验，今天来了兴致，那就给大伙共享一下。

也不管是否还有火星鸡

iE7.0中自带的-ms-interpolation-mode属性可以解决缩放失真问题

如下是测试代码

.img01,.img02,.img03{float:left;padding:0 5px;text-align:center;}
.img01{-ms-interpolation-mode:Nearest-Neighbor}
.img02{-ms-interpolation-mode:normal;}
.img03{-ms-interpolation-mode:bicubic}

ps：不过这也与图的大小，有关系，500以上的再定义放大，可能明显，小图再放大，好像不太明显

ps：好像很少用到这个属性，再者，他只是ie的自带属性

admin

cursor 属性

值        描述
url       
需使用的自定义光标的 URL。
注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default        默认光标（通常是一个箭头）
auto        默认。浏览器设置的光标。
crosshair        光标呈现为十字线。
pointer        光标呈现为指示链接的指针（一只手）
move        此光标指示某对象可被移动。
e-resize        此光标指示矩形框的边缘可被向右（东）移动。
ne-resize        此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize        此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize        此光标指示矩形框的边缘可被向上（北）移动。
se-resize        此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize        此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize        此光标指示矩形框的边缘可被向下移动（南）。
w-resize        此光标指示矩形框的边缘可被向左移动（西）。
text        此光标指示文本。
wait        此光标指示程序正忙（通常是一只表或沙漏）。
help        此光标指示可用的帮助（通常是一个问号或一个气球）。

admin

position 属性

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

rain

CSS透明属性详解

透明往往能产生不错的网页视觉效果，先奉上兼容主流浏览器的CSS透明代码:

.transparent_class {        filter:alpha(opacity=50);        -moz-opacity:0.5;        -khtml-opacity: 0.5;        opacity: 0.5;}

上面的几个属性分别是:

• opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
• filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.
• -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
• -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
  

CSS透明度继承问题

但CSS的透明属性涉及到一个继承问题，当为父级元素设置透明度后，子元素将自动继承其透明度，比如本站的一个效果:

即使你又为子元素指定透明度为1也是无效的。

对于子元素是文字的情况，我的解决方法一般是如果多少还能够看清，就不管。另一个折衷的方法是，为文本子元素指定一个相对更深的颜色。也就是说，当子元素继承透明度后，所得到的文本颜色正好就是你想要的。前提是，这个颜色还有加深的可能，和需要详细的计算颜色和透明度的值。

还有“取消透明度继承”的说法，这个说法是不太准确的，据我个人所知，没有任何取消透明度继承的方法。只能说，当想要实现“多个元素覆盖，只让指定的元素透明”时，可以使用的一些Hack。

搜了一下，找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题，有兴趣的朋友可以看看。原理很简单，添加一个空元素作为透明层，和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位，实现覆盖。

rain

多行文本溢出显示省略号(…)全攻略

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

• overflow: hidden;
• text-overflow: ellipsis;
• white-space: nowrap;
  

但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。

WebKit浏览器或移动端的页面

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
  

• overflow : hidden;
• text-overflow: ellipsis;
• display: -webkit-box;
• -webkit-line-clamp: 2;
• -webkit-box-orient: vertical;
  

这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/

跨浏览器兼容的方案

比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

例如：

• p {
•     position:relative;
•     line-height:1.4em;
•     /* 3 times the line-height to show 3 lines */
•     height:4.2em;
•     overflow:hidden;
• }
• p::after {
•     content:"...";
•     font-weight:bold;
•     position:absolute;
•     bottom:0;
•     right:0;
•     padding:0 20px 1px 45px;
•     background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
• }
  

这里注意几点：

• height高度真好是line-height的3倍；
• 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
• IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；
• 要支持IE8，需要将::after替换成:after；
  

JavaScript 方案

用js也可以根据上面的思路去模拟，实现也很简单，推荐几个做类似工作的成熟小工具：

1.Clamp.js

下载及文档地址：https://github.com/josephschmitt/Clamp.js
使用也非常简单：

• var module = document.getElementById("clamp-this-module");
• $clamp(module, {clamp: 3});
  

2.jQuery插件-jQuery.dotdotdot

这个使用起来也很方便：

• $(document).ready(function() {
•         $("#wrapper").dotdotdot({
•                 //        configuration goes here
•         });
• });
  

下载及详细文档地址：https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/

参考：
http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/#what-can-we-do-across-browsers
http://css-tricks.com/line-clampin/