跳转到内容

CSS框架简介

介绍

为了正确区分构成IPS4框架一部分的CSS类和HTML元素,以及创建可以一目了然的逻辑结构,以下应用了命名约定。

框架类和元素

IPS4 CSS框架分为松散定义的“模块”。一个模块将相关的样式组合在一个文件中,目的是更清楚地显示哪些样式将应用于给定的元素,并且更容易在CSS文件中找到要编辑的样式。

所有框架类和元素都采用名称格式ipsModule,其中Module是正在定义的样式类型。在模块中,可以按以下格式定义其他类ipsModule_option. 请注意,模块名称和模块选项都使用lowerCamelCase表示法,模块名称和选项之间用下划线分隔。

通常,元素将接收基本模块类以及一些选项。在某些情况下,只需要选项类;有关详细信息,请参阅单个模块文档。

一般来说,框架不应该与元素ID一起使用,因为这将它们的使用限制为每页一个。布局模块是一个例外,页面结构自然只存在一次。

框架名称示例:

ipmenu .ipsTabs_item #ipsLayout_mainArea .ipsComment_hasChildren

为自定义主题编写CSS

作为一个规则,你不应该直接编辑框架CSS文件。这样做很容易破坏未来的更新,或者至少使在不同版本之间升级站点变得更加困难。

相反,您的所有更改都应该保存在custom.css文件位于/core/front/custom/。如果愿意,您可以在自定义目录中创建其他CSS文件,这些文件也将包括在内。IPS4升级程序不会修改自定义目录中的CSS文件,这意味着您所做的更改将安全地跨版本保存。

确定哪些元素使用哪些CSS类

在编辑主题时,我们建议您利用浏览器中可用的开发人员工具来检查页面,并找出哪些CSS类应用于元素。请参阅您选择的浏览器的文档,了解如何做到这一点。这是Chrome的Web Inspector的一个例子:

css.thumb.png.fd2895ea579c3bda2d3d09b812

为自定义应用程序编写CSS

用于自定义应用程序的CSS属于<应用> / dev / css /前面/目录有关使用此处创建的CSS文件的信息,请参阅PHP框架文档。


报告指南


×
×
  • 创建新的。。。
Baidu