基础 CSS 全局样式

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，它使设计漂亮的响应式网站、应用程序和电子邮件变得非常容易，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Global Styles of Foundation 框架包含有用的重置，以确保样式在所有浏览器中保持一致。除此之外，SASS 版本的 Foundation 允许您根据需要调整默认设置。

字体大小：默认字体大小设置为浏览器样式表的 100%，默认字体大小为16 像素。但是，您可以编辑$global-font-size变量以更改 Foundation CSS 的 SASS 版本中的基本字体大小。

全局样式颜色：可供 Foundation CSS 使用的默认调色板。这些全局样式颜色可以很容易地用于为 Foundation CSS 组件（如链接、标注或按钮）提供交互式颜色。

基础 CSS 全局样式颜色类：

• primary：这个类用天蓝色突出显示，这标志着重要。
• 次要的：该类以灰色突出显示，标记为不太重要。
• 成功：该类以绿色突出显示，表示某项操作的完成。
• 警告：此类以红色突出显示，表示不完整的危险动作。
• 警告：这个类用黄色突出显示一些警告动作。

例子： 以下代码显示了显示的文本（段落标记

）的字体大小。

HTML

  

    
    
  
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Global Font Size
        
            Welcome to GeeksForGeeks. 
            This is an example line.
        
    
    
        $(document).foundation();
    

  

输出：

全局样式字体大小

示例：以下代码显示了如何将全局字体颜色与标注组件一起使用以提供相应的颜色。

HTML

  

    
    
  
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Global Style Colors
        
        
            Primary
        
        
            Secondary
        
        
            Success
        
        
            Warning
        
        
            Alert
        
    
    
        $(document).foundation();
    

  

输出：

全局样式颜色

参考： https://get.foundation/sites/docs/global.html