📌  相关文章
📜  Pure.CSS 的重要特性是什么？

📅  最后修改于: 2022-05-13 01:56:26.240000             🧑  作者: Mango

Pure.CSS 的重要特性是什么？

Pure.css只是 CSS 的另一个框架，区别在于它的小尺寸。它只有 3.7kb，因此是与 Bootstrap 竞争的有力竞争者。

特征：

  • 首先，它是免费的。
  • 它有几个重要的预建通用元素，如下所示
    • 基础：

      、、地形等元素。

    • 网格：响应式网格。
    • 表单：多列、堆叠表单、对齐表单、分组输入等。
    • 表格：带有边框、剥离等的基表。
    • Buttons ：按钮效果，如焦点、悬停、活动等。
    • 菜单：下拉菜单、可滚动菜单、垂直菜单、响应式菜单等。
  • 如上所述，它非常小。模块时钟小于 4kb！
  • 非常适合初学者。简单，直观。只需从他们的网站 purecss.io 复制样式表链接并将其添加到您的 HTML 文档中。
  • pure.css 的设计考虑了响应式设计。因此，我们获得了在所有平台上保持相同的预构建响应式样式。
  • 不依赖 JavaScript 及其库。
  • 它还支持阴影和颜色。
  • Bootstrap 的绝佳替代品。
  • 从本质上讲，它只是响应式、小巧且易于使用的不同 CSS 模块的集合。

Pure.CSS 的实现：使用这个框架主要有两种方式。您可以从 purecss.io 下载，也可以使用 CDN。让我们通过使用堆叠形式来理解两者。

Stacked Form : 将“ pure-form-stacked ”类添加到任何

元素以创建堆叠表单。

注意：通过将“ pure-form ”添加到 类来创建默认表单，然后您可以创建任何特定类型的表单，例如堆叠、对齐等。

手动添加链接：现在您已经在您的机器上下载了 pure.css zip 文件。提取它并将其放在您的网站目录中。您可以使用 标记将其附加到您的主 HTML 文档。

句法：

示例 1：

HTML


  

    
  
    
    
  
    

  

    
  
        
        

            A Stacked Form
            
            
  
             
                This is a required field.
            
            
            
            
            
            
            
        

    

  

HTML


  

    
  
    
  
    
  
    

  

    

  
        
        

            A Stacked Form
            
            
            
                This is a required field.
            
            
            
            
            
            
            
        

    


  

输出：

使用 Pure.CSS 的堆叠表单（链接下载的 css 文件）

如果我们删除pure.css文件，即如果我们删除 标签，我们会得到以下输出。

没有 Pure.CSS

使用 CDN（内容交付网络）：尽管这两个步骤做同样的事情，但大多数人仍然更喜欢 CDN 而不是手动链接pure.css文件，因为当您使用 CDN 时，您总是会获得最新的文件。所以你不必担心每次都更新你的pure.css文件。

句法：

例子：

HTML 



  

    
  
    
  
    
  
    

  

    

  
        
        

            A Stacked Form
            
            
            
                This is a required field.
            
            
            
            
            
            
            
        

    


  

输出：

使用 Pure.CSS 的堆叠表单（CDN - 添加纯 css 文件的 url）