基础 CSS 基础版式

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

Base Typography为所有基本元素提供了干净、有吸引力的排版样式，这有助于为元素创建吸引人且简单的默认样式。基本字体包括几个组件，如下所述：

• 段落：段落预设了与整体垂直样式相匹配的特定字体大小和行高和间距。
• Header : Header 用于在所有标题元素上添加标题样式。这可以通过特定的字体大小和样式给出，并根据它们的值进行排列。
• 链接：链接用于添加从一个 Web 资源到另一个 Web 资源的连接。默认情况下，这些是使用标准样式以及标准原色指定的。
• Dividers : Dividers 用于添加元素之间的分隔符，即指定两个段落或部分之间的主题分隔符。
• 无序列表：无序列表是一组没有特定顺序的对象，即项目的顺序无关紧要。
  标签用于构造这个列表。列表中的每个项目旁边都有一个项目符号。
  • 有序列表：有序列表是对象的集合，其中内容的顺序很重要。数字列表是有序列表的另一个名称。在编号方法中，我们可以使用阿拉伯数字、罗马数字或字母来确定顺序。有序列表标签或
    用于制作有序列表。
    1. 定义列表：定义列表可用于显示值对。它提供了我们在列表中定义的特定术语的定义。
    2. Blockquotes ：Blockquote 用于显示长引用（从另一个来源引用的部分）。它改变了对齐方式，使其与众不同。
    3. 缩写：用于定义元素的缩写或缩写形式。该缩写用于为浏览器、翻译系统和搜索引擎提供有用的信息。
    4. 代码：它用于使用 标记格式化对代码的引用。
    5. Keystrokes ：Keystrokes 可用于定义键盘输入，并且包含在 标记中的文本通常以浏览器的默认等宽字体显示。
    6. 可访问性：通过使所需组件可访问，它可用于促进各种组件在页面上有效工作。
    7. 打印样式：它用于提供一些基本的打印特定样式。

  示例 1 ：在此示例中，我们使用了 标签和

  标签来创建表示缩写和块引用。我们还使用子标题段来表示 Foundation CSS 版本。

  HTML

  
  
    
  
      
      
      
      
  
    
  
      
  GeeksforGeeks
      
  Foundation CSS Base Typography
      
  Version 
          V6.74
      
      
  
          "Don't dream for anything, rather aim of something. 
              Anonymous
      
      
  
         Do you know the full Form of GFG? 
         If not, hover your pointer here 
         GFG
      
  
  

  
  
  

  输出：

  

  基础 CSS 基础版式

  示例 2：在此示例中，我们在 Foundation CSS 中创建了有序、无序和定义列表，同时创建了一个包含击键的段落。

  HTML

  
  
    
  
      
      
      
      
  
    
  
      
  GeeksforGeeks
      
  Foundation CSS Base Typography
      
  Version V6.74
      
  
      
  Types of programming languages:
      
  
          
  Java
          
  C++
          
  C
          
  Python
      
      
  
          Different component of MERN Stack:
      
      
  
          
  MongoDB
          
  Express JS
          
  React JS
          
  Node js
      
      
  
      
  
          The shortcut for copying a text is 
          Ctrl + C and 
          the shortcut for paste is 
          Ctrl + V
      
  
  
  

  输出：

  

  参考： https://get.foundation/sites/docs/typography-base.html