CSS拾遗（二）

接CSS拾遗（一）。

4. 不透明度

            opacity: 0.8;
            filter: alpha(opacity=80);

　　opacity: 0.8是标准的写法；filter: alpha(opacity=80)是IE6-9的写法，IE9之前不支持opacity。

5. 链接样式顺序

　　a:link, a:visited, a:hover, a:focus, a:active

　　记忆口诀:love-hate，其中focus最好加上，表示用键盘移动到链接上时，与鼠标悬停一样的概念。

6. line-height

　　这个还是看《CSS权威指南》吧，相关的东西挺多的。

7. 纯CSS提示工具

　　通过定位技术，可以创建纯CSS工具提示。

a.tooltip {
  position: relative;
}

a.tooltip span {
  display: none;
}


a.tooltip:hover span {
  display:block;
  position:absolute;
  top:1em;
  left:2em;
   8.5em;
  padding: 0.2em 0.6em;
  border:1px solid #996633;
  background-color:#FFFF66;
  color:#000;
}

</style>
</head>

<body>
<p><a href="http://www.andybudd.com/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.</p>

</body>

8. 流式布局min-width、max-width理解

　　使用流式布局时，尺寸是用百分数一类设置的，这使流式布局能够相对于浏览器窗口进行伸缩。流式布局也不是没有问题，

在窗口宽度很小的时候，行变得非常窄，难以阅读。因此，有必要添加以像素或em为单位的min-width，从而防止布局太窄。

.wrapper {
  width: 76.8%; 
  margin: 0 auto; 
  text-align: left;
  max-width: 125em;
  min-width: 62em;
}

　　对于图像，为了防止布局过大导致图像太大失真，可如下使图像不超过其原始尺寸。

        img {
            width: 80%;
            max-width: 646px;
        }

　　也可仅使用max-width：xx%，使其一直占用父级固定比例的宽度，且不超过其原始尺寸。

 img {
            max-width: 80%;
        }

9.@font-face

　　@font-face让我们可以使用任何字体，而不需要考虑用户机器上是否安装了这种字体。

        @font-face {
            font-family: "My font";
            src: url(css/Myfont.otf);
        }
        /*然后，就可以引入字体；*/
        h1 {
            font-family: "My font";
        }