css链接到另一个css_高级CSS链接–增强您的链接-白红宇

css链接到另一个css

Remember the days where links were just a standard underline? Neither do I, thankfully. CSS allows us to add background color, text decoration, color swapping, and numerous other formats to denote links before and during hover/active events. We can even change the color of the link based on whether the user has visited the destination previously. Do these links really provide as much information with as much flare as they could be though?

还记得链接只是标准下划线的日子吗？谢天谢地，我也没有。 CSS允许我们添加背景色，文本修饰，颜色交换和许多其他格式来表示悬停/活动事件之前和期间的链接。我们甚至可以根据用户之前是否访问过目的地来更改链接的颜色。这些链接是否真的提供了尽可能多的信息？

One suave developer created a Firefox plugin called . Link Alert analyzes a link's HREF upon mouseover to change your mouse cursor to a lock if the link takes you to a secure URL, to an Adobe icon if you are opening a PDF file, to a double box icon if the link will open in a new window, and so on. Wouldn't it be great if we could convey that to our website visitors without needing them to install a new plugin? We can, but why wait until they've moused the link to let them know what it is?

一个和的开发人员创建了一个名为的Firefox插件。链接警报会在鼠标悬停时分析链接的HREF，如果链接将您带到安全的URL，则将鼠标光标更改为锁定；如果要打开PDF文件，则将其更改为Adobe图标；如果链接将以新窗口，依此类推。如果我们可以将其传达给我们的网站访问者而不需要他们安装新的插件，那不是很好吗？我们可以，但是为什么要等到他们鼠标单击链接以让他们知道它是什么呢？

Using advanced CSS tactics and some free icons, we can make our links say a lot more about themselves.

使用高级CSS策略和一些免费图标，我们可以使我们的链接更多地介绍自己。

文件 (The Files)

代码 (The Code)

There are two ways to go about creating special links -- designating classes for each type of link or use a method that is NOT IE6 friendly. Since our goal is to enhance and not to ensure cross-browser capabilities, we will go the more dynamic, classless route which will be much easier to maintain. Also note that this could be done using JavaScript but isn't CSS so much easier to use?

创建特殊链接有两种方法-为每种类型的链接指定类或使用对IE6不友好的方法。由于我们的目标是增强而不是确保跨浏览器的功能，因此我们将采用更加动态，无类的路线，这将更易于维护。还要注意，这可以使用JavaScript来完成，但是CSS使用起来不是那么容易吗？

Here's the CSS code:

这是CSS代码：

a[href$='.pdf'] { padding:0 20px 0 0; background:transparent url(/graphics/icons/pdf.gif) no-repeat center right; }

The code is pretty self-explanatory. The $= directs the browser to match any anchors that end in ".pdf" (find all PDF files), pad the link 20 pixels on the right, and insert a small PDF icon. You can use this code for any extension, but I recommend doing this for JavaScript (.js), images (.jpg, .gif), new windows (you'd match "target$='_blank'"), PDF files (.pdf), email links ("href^='mailto:'"), and RSS feeds ("href$='whatever.xml'").

该代码是不言自明的。 $ =指示浏览器匹配以“ .pdf”结尾的所有锚点(查找所有PDF文件) ，在右侧填充20个像素的链接，并插入一个小的PDF图标。您可以将此代码用于任何扩展名，但是我建议对JavaScript(.js)，图像(.jpg，.gif)，新窗口(您将“ target $ ='_ blank'”匹配)，PDF文件( .pdf)，电子邮件链接(“ href ^ ='mailto：'”)和RSS供稿(“ href $ ='whatever.xml'”)。

结果 (The Result)

翻译自:

css链接到另一个css