物化 CSS |排版

Materialize CSS 提供了几个可用于页面排版的元素：

• 标题
• 块引用
• 流文本

标题： Materialize CSS 提供了用于标题标签的基本样式。下面的标签显示了 Materialize CSS 样式的可用标题标签：

Heading 1
  
Heading 2
  
Heading 3
  
Heading 4
  
Heading 5
  
Heading 6
  

块引用：块引用用于强调引用或引文。它还可以用于额外的文本层次结构和强调。

    This is an example quotation using blockquote tag.

流文本：流文本类可用于流畅地调整必须缩放的文本的字体大小和行高。要使用流文本，需要将流文本类添加到所需的标签中。下面的例子展示了这个类的用法。

I am Flow Text

注意： Materialize CSS 使用的标准字体是Roboto 2.0字体。可以通过简单地更改字体堆栈来替换此字体。这可以通过修改下面的代码以包含所需的字体并添加到自定义 CSS 来完成。

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

例子：

HTML

  

    
    
  
    
    
  
    
    
    

  

    Headings
    
  
        
        Heading 1
        Heading 2
        Heading 3
        Heading 4
        Heading 5
        Heading 6
    
  
    
    Blockquote
    
        
            
                This is an example quotation
                that uses the blockquote tag.
                
                This is a basic tutorial for
                the Materialize CSS Typography.
            
        
    
  
    
        Free Flow
  
        
        
            GeeksforGeeks is a Computer
            Science portal for geeks.
            It contains well written,
            well thought and well explained
            computer science and programming
            articles, quizzes and courses.
            GeeksforGeeks is a very fast
            growing community among programmers
            and have a reach of around 10
            million+ readers globally.
        
    
  
    
    
    

  

输出：