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">