Liferay中CSS冲突的一般处理方法

2016年03月22日 Liferay 暂无评论 阅读 659 views 次

经常碰到有人问在Liferay中的CSS冲突了,引入的第三方插件或者库样式不对,样式被liferay覆盖了等等问题,归结起来主要有两种情况:

  1. 第三库的样式被liferay中的样式给覆盖了;
  2. 第三库中某些地方不需要样式的被liferay添加了新的样式。

CSS的样式问题,相对是比较容易解决的问题,需要了解的是CSS的样式继承与优先级的基础知识。

CSS的样式优先级

首先来看一下典型的DOM结构图

dom-tree

我们写CSS样式的时候,一般有如下几种写法:

  1. 通配选择器(*)
  2. 类型(tag)选择器
  3. ID选择器
  4. 类(class)选择器
  5. 属性选择器,内联的style等

优先级是这样的:

important>内联的>ID选择器>类选择器>基于类型tag的>通配符的

比如下面一段html代码

<html>
 <body>
 <div>
 <ul class="demo-ul" id="demo-id-ul">
 <li class="demo-li" id="demo-id-li"></li>
 </ul>
 </div>
 </body>
</html>

这是一段最简单的代码,如果我们在css文件中写下面的样式

.demo-li{color:#000}

#demo-id-li{color:#fff}

li{color:#ddd}

在上面的这几个样式里面,最终生效的是颜色是#fff,这是因为ID的优先级最高,但是如果在li里面有style,那就是style里面的样式最终使用。

CSS样式的最长路径匹配

前面说的是不同的写法,有不同的优先级,那同样写法的时候,就是谁匹配的最精确,谁的优先级最高。

比如上面的代码,有以下几种写法:

ul .demo-li{color:#fff}

.demo-ul .demo-li{color:#000}

我们会发现,下面的会覆盖上面的。

如果我们写成#demo-id-ul .demo-li{color:#ddd},又会覆盖上面的。

如果是同样的级别的,后面的会覆盖前面的。

如果在样式中添加了important会覆盖所有的。

Liferay中的样式冲突解决

这上面是基本的规则,回到Liferay中,Lifeay系统中默认自带了大量的样式,包括大量的全局样式,所以引入的第三方的库,或多或少会有一些样式冲突。

Liferay中使用基础样式库是Bootstrap 2的版本,然后添加了很多自己的样式,样式都是使用了.aui来做前缀,比如input、ul、li等基础的样式Liferay都添加了基础的样式。如下图:

input-defaul-liferay

Liferay针对这些基础标签添加了样式,有些我们添加的第三方库,如easyui、jquery UI、ztree等,就会存在可能Liferay添加的padding、margin等基础样式导致显示异常。所以如果我们想对我们自己的portlet内样式进行重写,前面一般加上.aui就行了。

比如我们有一个input的class为"custom-input",如果我们写.custom-input{},则可能发现不生效,这个时候我们有几种处理策略:

  1. 使用.aui .custom-input{};如果还不行,就添加.aui .portletclass(或者是此元素的上级class) .custom-input{}。
  2. 添加上ID(不推荐);
  3. 如果还不行,就添加important,一般不使用。

Liferay中的样式写在什么地方

要覆盖的样式可以写在很多个地方,主题中,页面的css中,直接在页面中添加style标签等。

1、主题中

最推荐的将样式写在主题中,在主题的css中可以全局的定制,而且可以达到更换主题也将样式更换的效果。

2、写在portlet的JSP中引用的css文件中

每一个portlet里面对应的JSP,可都可以引用CSS文件,也可以将样式写在这里面。

3、在JSP中直接添加style标签

也可以在JSP中添加<style>标签,将样式直接写在里面。

4、写在配置中

有些如果不允许修改代码,或者是如果临时的fix一下错误,可以将样式代写到Liferay页面管理的css里面,或者是Portlet配置的css样式里面。

 

 

 

 

用户头像

给我留言

Copyright © IT人生录 保留所有权利.   主题设计 知更鸟 滇ICP备16001547号-1

用户登录

分享到: