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样式名写到你需要覆盖的框架样式后面就能实现覆盖了。而且不会对原有的框架样式发生改变。
由于css选择器是根据元素定义的权重来计算加载的,所以把自己的css文件Link放在bootstrap后面未必会覆盖掉其样式(不过推荐先这样尝试一下)
但最保险的办法是为页面上的其中一个根元素指定其他任意ID,例如:<body id =“mystyle”>
这样,尼可以在你的ID前面添加任何CSS选择器,立即为元素添加100点的权重,并覆盖Bootstrap定义
#mystyle h1 {
line-height: 1
color: inherit
}
在自己的css文件中直接采用以上的根据id定义的写法,就可以提高你的定义的权重值,从而覆盖bootstrap 的样式
覆盖整个页面也就需要图片占据整个屏幕或者占据整个html元素;在css3出来之后,有一个属性background-size这个属性可以给背景图片设置大小,当值为100% 100%的时候也就是说把图片宽高都设置成百分百,然后元素有多大,图片就会伸展多大,也就是说的整个页面