个性化阅读
专注于IT技术分析

Materialise CSS颜色

Materialise支持多种颜色类别。这些颜色类别的启发和发展是考虑到市场营销, 路标和便签中使用的颜色。

  • 红色
  • 紫色
  • 深紫色
  • 靛青
  • 蓝色
  • 浅蓝
  • 青色
  • 蓝绿色
  • 绿色
  • 浅绿色
  • 酸橙
  • 黄色
  • 琥珀色
  • 橙子
  • 深橙色
  • 棕色
  • 灰色
  • 蓝灰色
  • 黑色
  • 白色
  • 透明

用法

以下是明度/暗度类别的列表, 可用于更改所应用的颜色。

  • 减轻1
  • 减轻2
  • 减轻3
  • 减轻4
  • 减轻5
  • 变暗1
  • 变暗2
  • 变暗3
  • 变暗4
  • 口音1
  • 口音2
  • 口音3
  • 口音4

例子

下面的示例演示如何使用上述类来渲染背景或更改文本的颜色。如果是背景, 则添加类, 如果是文本, 则将” -text”添加到颜色类, 并将” text-“添加到闪电类。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>             
   </head>
   
   <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "card-panel">	        
         <div class = "card-panel red lighten-2">		 
            <h1>Red Colored Theme</h1>
         </div>
         
         <span class = "red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>
         
         <ul>          
            <li class = "red lighten-5"><p>Using red lighten-5</p></li>
            <li class = "red lighten-4"><p>Using red lighten-4</p></li>
            <li class = "red lighten-3"><p>Using red lighten-3</p></li>
            <li class = "red lighten-2"><p>Using red lighten-2</p></li>
            <li class = "red lighten-1"><p>Using red lighten-1</p></li>
            <li class = "red"><p>Using red</p></li>
            <li class = "red darken-1"><p>Using red darken-1</p></li>
            <li class = "red darken-2"><p>Using red darken-2</p></li>
            <li class = "red darken-3"><p>Using red darken-3</p></li>
            <li class = "red darken-4"><p>Using red darken-4</p></li>
            <li class = "red accent-1"><p>Using red accent-1</p></li>
            <li class = "red accent-2"><p>Using red accent-2</p></li>
            <li class = "red accent-3"><p>Using red accent-3</p></li>
            <li class = "red accent-4"><p>Using red accent-4</p></li>
         </ul>
      </div>
   </body>
</html>

立即测试

赞(0) 打赏
未经允许不得转载:srcmini » Materialise CSS颜色
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏