跳至主要内容
版本:v8

全局样式表

虽然 Ionic Framework 组件样式是自包含的,但有几个全局样式表应该被包含,以便使用 Ionic 的所有功能。一些样式表是 Ionic Framework 应用正常外观和行为所必需的,而其他样式表则包含可选的工具来快速为你的应用设置样式。

可用

必需

为了使 Ionic Framework 正确工作,必须包含以下 CSS 文件。

core.css

此文件是 Ionic 组件正常工作所需的唯一样式表。它包含特定于应用的样式,并允许 color 属性跨组件工作。如果没有包含此文件,颜色将不会显示,并且某些元素可能无法正常显示。

建议在 Ionic Framework 应用中包含以下 CSS 文件。如果没有包含这些文件,某些元素可能具有不希望的样式。如果 Ionic Framework 组件在应用外部使用,则可能不需要这些文件。

structure.css

将样式应用于 <html> 并将 box-sizing 默认为 border-box。它确保滚动在移动设备上表现得像原生一样。

typography.css

Typography 更改整个文档的字体系列,并修改标题元素的字体样式。它还将定位样式应用于某些原生文本元素。这个文件对于 动态字体缩放 的工作是必要的。

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 工具,了解如何使用可选工具。