Skip to main content

全局样式表

虽然 Ionic 框架组件样式是独立的，但为了使用 Ionic 的所有功能，应该包含几个全局样式表。一些样式表是 Ionic Framework 应用外观和行为正常所必需的，其他样式表包括可选实用程序来快速设计应用样式。

¥While Ionic Framework component styles are self-contained, there are several global stylesheets that should be included in order to use all of Ionic's features. Some of the stylesheets are required in order for an Ionic Framework app to look and behave properly, and others include optional utilities to quickly style your app.

可用​

¥Available

必需​

¥Required

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

¥The following CSS file must be included in order for Ionic Framework to work properly.

core.css​

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

¥This file is the only stylesheet that is required in order for Ionic components to work properly. It includes app specific styles, and allows the color property to work across components. If this file is not included the colors will not show up and some elements may not appear properly.

¥Recommended

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

¥The following CSS files are recommended to be included in an Ionic Framework app. If they are not included, some elements may have undesired styles. If Ionic Framework components are being used outside of an app, these files may not be necessary.

structure.css​

将样式应用于 <html> 并默认 box-sizing 至 border-box。它确保滚动的行为就像移动设备中的原生行为一样。

¥Applies styles to <html> and defaults box-sizing to border-box. It ensures scrolling behaves like native in mobile devices.

typography.css​

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

¥Typography changes the font-family of the entire document and modifies the font styles for heading elements. It also applies positioning styles to some native text elements. This file is necessary for Dynamic Font Scaling to work.

normalize.css​

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

¥Makes browsers render all elements more consistently and in line with modern standards. It is based on Normalize.css.

可选​

¥Optional

以下 CSS 文件集是可选的，如果应用不使用任何功能，则可以安全地注释或删除它们。

¥The following set of CSS files are optional and can safely be commented out or removed if the application is not using any of the features.

padding.css​

添加实用程序类以修改任何元素上的填充或边距，有关使用信息，请参阅 CSS 实用工具。

¥Adds utility classes to modify the padding or margin on any element, see CSS Utilities for usage information.

float-elements.css​

添加实用程序类以根据断点和边浮动元素，请参阅 CSS 实用工具 了解使用信息。

¥Adds utility classes to float an element based on the breakpoint and side, see CSS Utilities for usage information.

text-alignment.css​

添加实用程序类来对齐元素的文本或根据断点调整空白，请参阅 CSS 实用工具 了解使用信息。

¥Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see CSS Utilities for usage information.

text-transformation.css​

添加实用程序类以根据断点将元素的文本转换为 uppercase、lowercase 或 capitalize，有关使用信息，请参阅 CSS 实用工具。

¥Adds utility classes to transform the text of an element to uppercase, lowercase or capitalize based on the breakpoint, see CSS Utilities for usage information.

flex-utils.css​

添加实用程序类以对齐 Flex 容器和项目，有关使用信息，请参阅 CSS 实用工具。

¥Adds utility classes to align flex containers and items, see CSS Utilities for usage information.

display.css​

添加实用程序类以根据断点隐藏任何元素，有关使用信息，请参阅 CSS 实用工具。

¥Adds utility classes to hide any element based on the breakpoint, see CSS Utilities for usage information.

用法​

¥Usage

请参阅 Ionic 包 了解如何包含基于框架的全局样式表，以及 CSS 实用工具 了解如何使用可选实用程序。

¥Refer to Ionic Packages for how to include the global stylesheets based on the framework and CSS Utilities for how to use the optional utilities.

目录