Skip to main content

全局样式表

虽然 Ionic Framework 组件样式是自包含的，但有几个全局样式表需要包含，以便使用 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

建议在 Ionic Framework 应用中包含以下 CSS 文件。如果未包含它们，某些元素可能会有不期望的样式。如果在应用之外使用 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 Utilities。

🌐 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​

添加用于对齐弹性容器和项目的实用类，有关使用信息，请参见 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.

目录