跳到主要内容
版本:v8

全局样式表

虽然 Ionic Framework 组件样式是自包含的,但有若干全局样式表应该被包含进来,以便使用 Ionic 的所有功能。某些样式表是使 Ionic Framework 应用正常显示和运行所必需的,而其他样式表则包含可选的实用工具,用于快速为应用添加样式。

可用样式表

必需的

以下 CSS 文件必须包含在内,Ionic Framework 才能正常工作。

core.css

这个文件是使 Ionic 组件正常工作的唯一必需样式表。它包含应用特定的样式,并允许 color 属性在组件间正常工作。如果未包含此文件,颜色将不会显示,某些元素可能无法正常显示。

推荐的

以下 CSS 文件建议在 Ionic Framework 应用中包含。如果未包含,某些元素可能会出现不期望的样式。如果在应用之外使用 Ionic Framework 组件,则可能不需要这些文件。

structure.css

<html> 应用样式,并将 box-sizing 默认为 border-box。它确保滚动行为类似于移动设备上的原生滚动。

typography.css

排版样式会更改整个文档的字体族,并修改标题元素的字体样式。它还会对某些原生文本元素应用定位样式。此文件是动态字体缩放正常工作所必需的。

normalize.css

使浏览器更一致地渲染所有元素,并符合现代标准。它基于 Normalize.css

可选的

以下 CSS 文件是可选的,如果应用未使用任何相关功能,可以安全地注释掉或删除。

padding.css

添加用于修改任何元素的内边距或外边距的实用类,请参阅 CSS 实用工具了解使用方法。

float-elements.css

添加用于根据断点和侧边浮动元素的实用类,请参阅 CSS 实用工具了解使用方法。

text-alignment.css

添加用于根据断点对齐元素文本或调整空白区域的实用类,请参阅 CSS 实用工具了解使用方法。

text-transformation.css

添加用于根据断点将元素文本转换为 uppercaselowercasecapitalize 的实用类,请参阅 CSS 实用工具了解使用方法。

flex-utils.css

添加用于对齐弹性容器和项目的实用类,请参阅 CSS 实用工具了解使用方法。

display.css

添加用于根据断点隐藏任何元素的实用类,请参阅 CSS 实用工具了解使用方法。

用法

请参阅 Ionic 包了解如何根据框架包含全局样式表,并参阅 CSS 实用工具了解如何使用可选的实用工具类。