《精通CSS》读书笔记2

最新推荐文章于 2023-01-31 23:49:52 发布

托怀明月

最新推荐文章于 2023-01-31 23:49:52 发布

阅读量885

点赞数

分类专栏： CSS 文章标签： css 读书笔记

本文链接：https://blog.csdn.net/sinat_38378976/article/details/70821006

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第四章背景图像效果

一.背景图像基础

渐变的实现

二.圆角框

1.固定宽度的圆角框

灵活圆角框：滑动门技术

需要四个图像：两个顶部图像组成顶部曲线，两个底部曲线组成底部曲线和框的主体

2.山顶角

想创建一系列具有不同颜色的圆角框，可以创建曲线型的位图角蒙版，蒙版区域盖住正在使用的背景颜色，而角区域是透明的，如图：

*角蒙版为位图，所以对于小曲线效果最好，大曲线会出现锯齿。

同样需要4个元素来应用4个角蒙版，CSS也很相似

1)多个背景图像

CSS3中，可使用任意数量的图像，如：

2)border-radius

设置边框角的半径即可

3)border-image

3.投影

1)简单投影

将一个大的投影图像应用于容器div的背景，然后用负的外边距偏移这个图像，从而显示投影。例如：

.img-wrapper {
  background: url(img/shadow.gif) no-repeat bottom right;
  clear: right;
  float: left;
  position: relative;
  margin: 10px 0 0 10px;
}
.img-wrapper img{
**margin:-5px 5px 5px -5px;**
display: block; 
}

2)来自clagnut的投影方法

不使用负的外边距，而是使用相对定位来偏移图像。

3)box-shadow

CSS3中，这个属性需要4个值：垂直和水平偏移、投影的宽度和颜色。例如：

img{box-shadow:3px 3px 6px #666;}

这个属性可以和border-radius相配合，在圆角框上创建投影而不需要图形软件。

4.不透明度

1)RGBa

同时设置颜色和不透明度，例如：设置不透明为0.8（值为0表示完全透明）

.alert{
background-color:rgba(0,0,0,0.8);
border-radius:2em;
}

2)PNG透明度

PNG文件格式支持alpha透明度。（有兼容性问题，IE6）

3)CSS视差效果

让用户感觉这个页面有深度，称为视差滚动。例如：

想实现这种效果，首先创建几个不同的背景图像：绿色背景上的藤蔓，另两个图像为alpha透明背景上的藤蔓，中景和前景可以相互覆盖并改在背景上，同时不会把视图弄模糊。

body{
    background-image:url(image/bg-rear.png);
    background-repeat:no-repeat;
    background-color:#d3ff99;
    background-position:20% 0;
}
.midground{
    background-image:url(/image/bg-mid.png);
    background-repeat:repeat-x;
    background-color:transparent;
    background-position:40% 0;
}
.foreground{
    background-image:url(/image/bg-front.png);
    background-repeat:repeat-x;
    background-color:transparent;
    background-position:150% 0;
}

*水平调整窗口大小时，背景中的藤蔓以不同的速度移动，产生有深度的感觉。

5.图像替换

FIR
Phark
sIFR

第五章对链接应用样式

一.简单的链接样式

链接伪类选择器（选择器的次序很重要，这是由层叠造成的，当两个规则具有相同的特殊性时，后定义的规则有限。）

二.让下划线更有趣

1.简单的链接修饰

2.奇特的链接下划线

可以把图像用于下划线，例如：

a:link,a:visited{
color:#666;
text-decoration:none;
background:url(/img/underline.gif) repeat-x left bottom;
}

甚至可以为hover和active状态创建一个动画gif
*不是所有浏览器都支持背景图像动画，但是不支持的浏览器一般可以显示动画的第一帧以确保平稳退化。

3.已访问链接的样式

4.位链接目标设置样式

除了链接到特定的文档外，还可以使用包含片段标识符的链接链接到页面的特定部分，实现的方法是在href的末尾加一个#字符，例如：

<a href="http://example/com/story.html#comment3">
 a great comment by simon
</a>

不过如果页面内容非常多时，很难看出链接把你转到了哪个元素，所以CSS3允许使用：target伪类为目标元素设置样式，例如：

.comment:target{
bockground-color:yellow;
}

5.突出显示不同类型的链接

问题：很难看出链接是指向本站点的另一个页面，还是指向另一个站点。许多站点在新窗口中打开外部链接，太混乱，且新窗口不能使用后退按钮。
解决方法：在外部链接旁加上一个小图标，让用户自己选择去留

不过这个方法很麻烦，还可以使用[att^=val]属性选择器来判断是否为外部链接，例如：

a[href^="http:"]{
background:url(/img/externalLink.gif) no-repeat right top;
padding-right:10px;
}

如果愿意，还可以对邮件链接也进行突出显示，例如：

a[href^="mailto:"]{
background:url(img/email.png) no-repeat right top;
padding-right:10px;
}

甚至可以突出显示非标准的协议，例如：

a[href^="aim:"]{
background:url(img/im.png) no-repeat right top;
padding-right:10px;
}

<a href="aim:goim?screenname=andybudd">instant message</a>

也可以突出显示可下载的文档和提要，使用[attr$=val]属性选择器，它寻找一特定值（如.pdf或.doc）结尾的属性。

6.创建类似按钮的链接

锚为行内元素，这意味着只有在单机链接的内容时它们才会激活，但有时希望实现更像按钮的效果，有更大的可单击区域，为此，可以将锚的display属性设置为block，然后修改width，height和其他属性来创建需要的样式的单击区域。例如;

a{
display:block;
width:6.6em;
line-height:1.4;
text-align:center;
text-decoration:none;
border:1px solid #66a300;
background-color:#8cca12;
color:#fff;
}

*使用line-height，因为文本在行框中总是垂直居中的，所以用这个。如果用height，必须使用内边距将文本压低，模拟出垂直居中的效果。还要注意按钮中的文本的行数，调整来确定其尽量不换行。

1)简单的翻转

在鼠标悬停时设置链接的背景和文本颜色，从而实现简单翻转。（：hover）

2)图像翻转

使用背景颜色或图像。
缺点：第一次加载鼠标悬停时的图像会有短暂的延迟。

a:link,a:visited {
    display: block;
    width: 203px;
    height: 72px;
    text-indent: -1000em;
    background: url(img/button.png) left top no-repeat;
}

a:hover，a:focus {
    background-image: url(img/button-over.png);
}

a:active {
    background-image: url(img/button-active.png);
}

3)Pixy样式的翻转

上一个方法的缺点，解决方法是：不切换多个背景图像，而是使用一个图像并切换它的背景位置。

a:link,a:visited {
    display: block;
    width: 203px;
    height: 72px;
    text-indent: -1000em;
    background: url(img/button.png) -203px 0  no-repeat;
}

a:hover,a:focus{
background-position:right top;
}

a:active{
background-position:left top;
}

为了避免闪烁，需要将翻转状态应用于链接的父元素，例如包含它的段落。

p{
background:url(/img/buttons/png)  no-repeat  right  top;}

4)CSS精灵

大型网站建站，把所有图标甚至站点导航都包含在同一个图像中。

5)用CSS3实现翻转

使用text-shadow、box-shadow、border-radius等属性。

6)纯CSS工具提示

当鼠标悬停在具有title属性的元素上时浏览器弹出的小文本框。

a.tooltip{
    position:relative;
}
a.tooltip span{
    display:none;
}

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


<p>
<a href="http://www.andybudd.com/" class="tooltip">andy budd<span>(this website rocks)</span></a> is a web developer based in 
</p>