
正文
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;
width: 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";
}






