1.行内样式>指定样式>通用class样式>通用未指定CLASS样式
2.例子:
1)<div style="...">aaaaaa</a>这就是指定用style的行内样式;
2)<div id="side" >aaaaaa</div>这就是指定id使用side样式;
3)<div class="ot">aaaaaa</div>这就是指了通用的class为ot的样式;
4)如<body><table><tr><th>这些一开始样式文件就定义好全程的样式,为通用为指定的样式;
最高就是指行内样式,接着就是指定ID的,然后就是CLASS,最后就是未指定通用样式;
自己写个class样式覆盖到框架的样式位置就好了。1.自定义图标替换ionic图标样式
<ion-item class="item item-complex my-complex item-icon-left item-icon-right">
<a class="item-content my-content" ng-click="goPage('archive', '个人信息')">
<i class="icon datum-img"></i>
<span style="font-size: 90%line-height:inherit">个人信息</span>
<i class="icon ion-ios-arrow-right msgText" style="font-size: 20px"></i>
</a>
</ion-item>1234567
.datum-img{/* 个人信息*/
background: url(../img/mine/datum.png) no-repeat center width: 20px height: 20px margin-top: 3px display: inline-block background-size: 100%}12345678
.my-complex .my-content{padding: 10px 0px 10px 0px}123
从代码中可以看到,.datum-img是使用自定义图标,宽高大小需要明确指出。而下面 .my-complex .my-content的样式内容是覆盖掉框架的.item-complex .item-content中padding的规格,而其他规格没写则还是以框架原有的规格显示。图标大小可以用font-size来调整。
总结:覆盖样式,1、先看下框架css的层次,2、依据框架层次自己写个不同名的class样式,样式内含有你需要覆盖的规格key要对,然后自己改想要的value。3、把自己写好的class样式名写到你需要覆盖的框架样式后面就能实现覆盖了。而且不会对原有的框架样式发生改变。
主要有局部引入和全局引入。1、局部引入:在各自vue文件中使用,互不干扰style标签里面的关键字scoped【限位标记】添加这个关键字的作用:将这个style里面的样式都限制在该组件中,不会影响其他的组件。
2、全局引入:作用于全局,让很多内容都使用这个样这个就要回到App.vue中;
步骤一:建立自己专门存放自定义样式的css文件;
步骤二:在App.vue中新建;
步骤三:将css文件通过import‘css文件位置’引入到style标签中,作为全局样式覆盖。