跳到主要内容
版本:v7

全局样式表

虽然 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

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

normalize.css

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

可选的

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

padding.css

添加实用类来修改任何元素的内边距或外边距,使用信息请参阅 CSS 工具

float-elements.css

添加实用类来基于断点和侧边浮动元素,使用信息请参阅 CSS 工具

text-alignment.css

添加实用类来基于断点对齐元素文本或调整空白,使用信息请参阅 CSS 工具

text-transformation.css

添加实用类来基于断点将元素文本转换为 uppercaselowercasecapitalize,使用信息请参阅 CSS 工具

flex-utils.css

添加实用类来对齐 flex 容器和项目,使用信息请参阅 CSS 工具

display.css

添加实用类来基于断点隐藏任何元素,使用信息请参阅 CSS 工具

使用方法

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