初学css为博客园文章某个超链接添加 icon

初学css为博客园某个超链接添加 icon

博客界面我喜欢简单的风格，但也不能太丑，学点 css 装饰一下还是有必要的。
重要参考1：Amaze UI - css 。如果没问题，本文中的两个链接就可以看到效果了：）

一、用css实现超链接在新tab打开

用markdown写东西，链接总是在本窗口打开。我希望利用 css 实现超链接在新窗口打开
尝试如下：

a:active {
  test:expression(target="_blank");
}

无效：），放弃

二、利用 css 引入漂亮的icon

看到参考当中的链接后面都有漂亮的icon，貌似还有自动识别链接网址的功能。识别网址可能是某个js做的，这里暂不考虑（buhui）。参考2 知乎 - css content 如何自定义生成图标？

a:after{
    content:'√';
}

上述代码即可在所有a标签后面加上√，如果需要更酷炫的图标，可以引入字体库：

/*
作者：知乎用户
链接：https://www.zhihu.com/question/22022905/answer/20585820
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
*/
@font-face{
    font-family: 'MyFont';
    src:url('xxx.eot');
    src:url('xxx.eot?#iefix') format('embedded-opentype'),
        url('xxx.woff') format('woff'),
        url('xxxn.ttf') format('truetype'),
        url('xxx.svg#micon') format('svg');
    font-weight: normal;
    font-style: normal;
        ...
}
.icon{
        font-family: 'MyFont';
        font-size:14px;
        font-variant:normal;
        font-weight:normal;
        text-transform: none;
        ...
}
.icon_open:before{
        content:"\f001"; /* 相应图标的编码 */
        ...
}

三、应用到博客园

在页首html代码加上 stylesheet 如下：

<link rel="stylesheet" href="http://xxxxxxx.com/my.css">

这里我用的是七牛云自定义了自己的 css ，再后来更新 my.css 文件时，发现我博客园里的link icon迟迟没有变化。可能是因为博客园缓存了这个文件？
后来直接把代码放在自定义 css 区域，搞定！code：

/*cnblogs css */

    @font-face{
    font-family: 'MyFont'; 
    src:url('https://cdn.staticfile.org/amazeui/2.7.2/fonts/fontawesome-webfont.eot');
    src:url('https://cdn.staticfile.org/amazeui/2.7.2/fonts/fontawesome-webfont.woff')format('woff');
    font-weight: normal;
    font-style: normal;
    }
    /* link icon*/
    p a{
        font-family: 'MyFont';
        font-size:15px;
        font-variant:normal;
        font-weight:normal;
        text-transform: none;
    }
    p a:after{
        content:"\f08e";
        margin-left: 3px;
        margin-right: 2px;
    }

四、表格的 css

我希望做个没有竖线、行与行之间底色不同的表格。参考1 当中的表格挺好看。下篇来。

​

转载于:https://www.cnblogs.com/aubucuo/p/css1.html