极客笔记Materialize CSS中的不同实用类是什么
在本文中，我们将了解Materialize CSS中的不同实用类。在继续之前，让我们先了解一下什么是Materialize CSS。Materialize CSS是一个流行的前端开发框架，提供各种功能和实用工具，用于创建响应式和吸引人的Web应用程序。Materialize CSS的一部分是其实用类，它们提供了一种简单有效的方式来为HTML元素添加样式。
实用类是预定义的CSS类，可以应用于任何HTML元素以实现特定的样式。
以下是您可以使用的一些实用类
- 颜色实用类
-
对齐实用类
-
隐藏/显示内容实用类
-
格式化实用类
颜色实用类
Materialize CSS中的颜色实用类为HTML元素添加颜色提供了一种简单的方式。这些类允许开发人员从各种预定义的颜色中选择，或者为他们的Web应用程序定义自定义颜色。颜色实用类包括文本颜色和背景颜色类。
示例
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<h1 class = "red-text text-darken-2">This is red color</h1>
<h2 class = "red">This is red color</h2>
</body>
</html>
对齐实用类
Materialize CSS提供了几个对齐实用类，允许开发人员对其HTML元素进行对齐。这些类包括left-align，right-align，center-align，justify-align，valign-wrapper和valign。left-align，right-align，center-align和justify-align类用于对齐文本内容，而valign-wrapper和valign类用于垂直对齐元素。
文本对齐
它允许您控制元素内文本的水平对齐方式，包括left-align，right-align，center-align和justify-align等类。
示例
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body class = "container">
<h3 class = "left-align"> Left Aligned </h3>
<h3 class = "right-align"> right Aligned </h3>
<h3 class = "center-align"> center Aligned </h3>
</body>
</html>
垂直居中对齐
使用valign-wrapper类可以使元素垂直居中对齐，这可以应用于父容器元素上，并且它将垂直地对齐这个容器中的子元素。
示例
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "valign-wrapper" style = "height:50vh">
<h5>vertically aligned</h5>
</div>
</body>
</html>
隐藏/显示内容的实用类
通过使用隐藏和显示的实用类，我们可以根据设备的尺寸轻松地隐藏和显示内容，也可以选择性地显示内容。通过使用这些实用类，可以根据设备的尺寸应用不同的属性到内容上。例如，如果我们想要在移动设备上隐藏任何文本，那么我们只需要在应该仅在大屏幕尺寸或桌面设备上可见的文本上使用“hide-on-small-only”类即可。
有许多不同的类可以使用，如.hide，.hide-on-small-only，.hide-on-med-only，.hide-on-med-and-down，.hide-on-med-and-up，.hide-on-large-only，.show-on-small，.show-on-large，.show-on-medium-and-up，show-on-medium-and-down。
示例
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div style = "border:black; border-style:solid; padding:20px; margin:20px">
<h4 class = "hide-on-small-only">hide on small only</h4>
</div>
</body>
</html>
格式化实用类
Materialize css 提供了几个可以用来简单有效地格式化 HTML 内容的类。通过使用这些格式化实用类，我们可以轻松地在浏览器上截取内容，并在悬停在卡片元素上时添加阴影效果，而无需使用复杂的 CSS 代码。
为了实现这些格式化效果，我们可以使用以下类：
1. 截断
这个类用于截断内容，并显示省略号以表示当前不可见的更多文本。
示例
<html>
<head>
<title> Document </title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<h4 class = "truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam</h4>
</body>
</html>
2. Card-panel.hoverable
当鼠标悬停在卡片元素上时，该类会给卡片元素添加阴影效果，从而有助于对齐和突出显示卡片中包含的内容。
示例
<html>
<head>
<title> Document </title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "row">
<div class = "col s12 m6">
<div class = " card card-panel hoverable">
<div class = "card-content blue-text">
<span class = "card-title"> Card panel hoverable </span>
<p>:This class adds a shadow effect to a card element when it is hovered over, which helps to align and highlight the content contained within the card. </p>
</div>
<div class = "card-action">
<a href = "#"> This is a link </a>
<a href = "#"> This is a link </a>
</div>
</div>
</div>
</div>
</body>
</html>
在这篇文章中，我们了解到Materialize CSS是一个强大的前端开发框架，提供了各种功能和工具来创建响应式和视觉吸引力的Web应用程序。其中最有用的组件之一是实用类集合，它提供了一种简单高效的方法来为HTML元素添加样式。这些实用类包括颜色、对齐、显示/隐藏内容和格式化类等。通过利用这些实用类，开发人员可以轻松实现他们所需的样式效果，而无需编写复杂的CSS代码。总的来说，Materialize CSS是开发人员快速简便创建漂亮且响应式的Web应用程序的一种绝佳选择。