css 怎么覆盖框架样式
2017-09-26 16:45
267 查看
理解这标题就一句话:自己写个class样式覆盖到框架的样式位置就好了。
1.自定义图标替换ionic图标样式
从代码中可以看到,.datum-img是使用自定义图标,宽高大小需要明确指出。而下面 .my-complex .my-content的样式内容是覆盖掉框架的.item-complex .item-content中padding的规格,而其他规格没写则还是以框架原有的规格显示。图标大小可以用font-size来调整。
总结:覆盖样式,1、先看下框架css的层次,2、依据框架层次自己写个不同名的class样式,样式内含有你需要覆盖的规格key要对,然后自己改想要的value。3、把自己写好的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>
.datum-img{/* 个人信息*/ background: url(../img/mine/datum.png) no-repeat center; width: 20px; height: 20px; margin-top: 3px; display: inline-block; background-size: 100%; }
.my-complex .my-content{ padding: 10px 0px 10px 0px; }
从代码中可以看到,.datum-img是使用自定义图标,宽高大小需要明确指出。而下面 .my-complex .my-content的样式内容是覆盖掉框架的.item-complex .item-content中padding的规格,而其他规格没写则还是以框架原有的规格显示。图标大小可以用font-size来调整。
总结:覆盖样式,1、先看下框架css的层次,2、依据框架层次自己写个不同名的class样式,样式内含有你需要覆盖的规格key要对,然后自己改想要的value。3、把自己写好的class样式名写到你需要覆盖的框架样式后面就能实现覆盖了。而且不会对原有的框架样式发生改变。
相关文章推荐
- CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨
- 【CSS】扁平化都是纸老虎,看怎么抛弃前端框架在IE6扁平化
- JQuery的选择器样式会被CSS覆盖
- CSS控制列表样式属性list-style有哪些?怎么用?
- 【提问帖】使用html2canvas.js将div转成图片时,对dwz框架的样式产生了影响,怎么解决?
- css文件中的样式类被覆盖,js文件中的变量未定义问题问题
- css 样式 element.style 覆盖问题
- CSS怎么去掉select的下拉箭头样式(转)
- CSS覆盖公共样式中的某个属性
- CSS控制列表样式属性list-style有哪些?怎么用?
- css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存
- 怎么用div+css架设页面框架
- 怎么确定要对DIV设置什么CSS属性样式
- css继承样式怎么控制?用选择器
- css全局样式覆盖默认的样式
- CSS 通过使用Important覆盖所有其他样式
- CSS 样式覆盖
- 【less.js扫雷系列一】--less和CSS同时时使用时,可能出现的样式优先级变化导致样式覆盖问题
- Flex中的CSS: (8)Flex框架保存样式信息的时机
- CSS网站框架及样式命名规范