ionic中的css标签怎么做超链接

html-css013

ionic中的css标签怎么做超链接,第1张

CSS中通过四个伪类来定义链接的样式,分别是:

a:link         链接默认的样式

a:visited    链接已被访问过时的样式

a:hover     鼠标悬浮在链接上的样式

a:active     点击链接时候的样式

一般定义这四种样式的是“LVHA”的顺序来写样式,不然可能出现样式覆盖问题;

定义class样式一般分两种,一种在a标签上,一种在a标签外面,实例如下:

<style type="text/css">LVHA

.aaa a:link{color:redtext-decoration:nonefont-size:14px}

.aaa a:visited{color:yellowtext-decoration:nonefont-size:14px}

.aaa a:hover{color:bluetext-decoration:nonefont-size:14px}

.aaa a:active{color:greentext-decoration:nonefont-size:14px}

</style>

<div class="aaa"><a href="#">在a标签外的标签加class</a></div><br />

 

<style type="text/css">LVHA

a.bbb:link{color:redtext-decoration:nonefont-size:14px}

a.bbb:visited{color:yellowtext-decoration:nonefont-size:14px}

a.bbb:hover{color:bluetext-decoration:nonefont-size:14px}

a.bbb:active{color:greentext-decoration:nonefont-size:14px}

</style>

<a href="#" class="bbb">在a标签加</a>

当引入非Ionic标准插件时,会碰到需要独立引入JS与CSS文件。

JS相对比较容易,但CSS需要修改打包配置文件。

修改package.json, 定义我们自定义的copy配置文件

"config": {

"ionic_copy": "./config/copy.config.js"

},

在工程根目录下新建config目录,添加copy.config.js文件,

文件中写入:

module.exports = {

copyCropperjs: {

src: ["{{ROOT}}/node_modules/cropperjs/dist/cropper.min.css"],

dest: "{{BUILD}}"

}

}

最后在index.html中引入相应的css即可。

<link rel="stylesheet" href="build/cropper.min.css">