Materialise CSS 中有哪些不同的實用程式類別？
在本文中，我們將學習 Materialize CSS 中的不同實用程式類，但在繼續之前，讓我們先了解一下 Materialize CSS 是什麼。 Materialise CSS 是一種流行的前端開發框架，它提供各種功能和實用程式來創建響應靈敏且有吸引力的 Web 應用程式。 Materialise CSS 的基本元件之一是它的實用程式類，它提供了一種簡單有效的方法來為 HTML 元素添加樣式
實用程式類別是預先定義的 CSS 類，可以套用於任何 HTML 元素以實現特定的樣式。
這裡是一些你可以使用的實用類別
顏色實用類別
#對齊實用程式類別
#隱藏/顯示內容的實用類別
格式化實用程式類別
#顏色實用類別
Materialize CSS中的顏色實用類別提供了一種簡單的方法來為HTML元素添加顏色。這些類別允許開發人員從廣泛的預定義顏色中選擇，或為他們的網頁應用程式定義自訂顏色。顏色實用類別包括文字顏色和背景顏色類別。
範例
<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。卡片面板.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>
在本文中，我們了解了 CSS 是一個強大的前端開發框架，它提供了各種功能和實用程式來創建響應靈敏且具有視覺吸引力的 Web 應用程式。它最有用的元件之一是一組實用程式類，它提供了一種簡單而有效的方法來為 HTML 元素添加樣式。這些實用程式類別包括顏色、對齊、隱藏/顯示內容和格式設定類別等。透過利用這些實用程式類，開發人員可以輕鬆實現他們想要的樣式效果，而無需編寫複雜的 CSS 程式碼。總的來說，Materialize CSS 對於那些尋求快速輕鬆地創建美觀且響應靈敏的 Web 應用程式的開發人員來說是一個絕佳的選擇。
以上是Materialise CSS 中有哪些不同的實用程式類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何清除未使用的CSS？
Jul 27, 2025 am 02:47 AM
UseAutomatedToolSlikePurgecsSoruncsStoscanAndRemoveUnusedcss; 2. integratePuratePurgingIntoyourBuildProcessviawebpack，vite，vite，ortailwind ’scontentConfiguration; 3.AuditcsSusageWithChroMedEvtoolScoverAgeTabBeforgeForgingToavoidRemovingNeedEdedStyles; 4.safelistdynamic
如何更改CSS中的文本顏色？
Jul 27, 2025 am 04:25 AM
要改變CSS中文本顏色，需使用color屬性；1.使用color屬性可設置文本前景色，支持顏色名稱（如red）、十六進制碼（如#ff0000）、RGB值（如rgb(255,0,0)）、HSL值（如hsl(0,100%,50%)）以及帶透明度的RGBA或HSLA（如rgba(255,0,0,0.5)）；2.可將顏色應用於包含文本的任何元素，如h1至h6標題、段落p、鏈接a（需注意a:link、a:visited、a:hover、a:active不同狀態的顏色設置）、按鈕、div、span等；3.最
如何使用CSS Backdrop-Filter屬性？
Aug 02, 2025 pm 12:11 PM
backdrop-filter用於對元素背後的內容應用視覺效果，1.使用backdrop-filter:blur(10px)等語法實現毛玻璃效果；2.支持blur、brightness、contrast等多種濾鏡函數並可疊加；3.常用於玻璃態卡片設計，需確保元素與背景重疊；4.現代瀏覽器支持良好，可用@supports提供降級方案；5.避免過大模糊值和頻繁重繪以優化性能，該屬性僅在元素背後有內容時生效。
CSS暗模式切換示例
Jul 30, 2025 am 05:28 AM
首先通過JavaScript獲取用戶系統偏好和本地存儲的主題設置，初始化頁面主題；1.HTML結構包含一個按鈕用於觸發主題切換；2.CSS使用:root定義亮色主題變量，.dark-mode類定義暗色主題變量，並通過var()應用這些變量；3.JavaScript檢測prefers-color-scheme並讀取localStorage決定初始主題；4.點擊按鈕時切換html元素上的dark-mode類，並將當前狀態保存至localStorage；5.所有顏色變化均帶有0.3秒過渡動畫，提升用戶
什麼是用戶代理樣式表？
Jul 31, 2025 am 10:35 AM
用戶代理樣式表是瀏覽器自動應用的默認CSS樣式，用於確保未添加自定義樣式的HTML元素仍具基本可讀性。它們影響頁面初始外觀，但不同瀏覽器存在差異，可能導致不一致顯示。開發者常通過重置或標準化樣式來解決這一問題。使用開發者工具的“計算”或“樣式”面板可查看默認樣式。常見覆蓋操作包括清除內外邊距、修改鏈接下劃線、調整標題大小及統一按鈕樣式。理解用戶代理樣式有助於提升跨瀏覽器一致性並實現精準佈局控制。
CSS方面比例屬性是什麼？如何使用它？
Aug 04, 2025 pm 04:38 PM
Theaspect-ratioCSSpropertydefinesthewidth-to-heightratioofanelement,ensuringconsistentproportionsinresponsivedesigns.1.Itisapplieddirectlytoelementslikeimages,videos,orcontainersusingsyntaxsuchasaspect-ratio:16/9.2.Commonusecasesincludemaintainingres
如何在CSS中樣式鏈接？
Jul 29, 2025 am 04:25 AM
鏈接的樣式應通過偽類區分不同狀態，1.使用a:link設置未訪問鏈接樣式，2.a:visited設置已訪問鏈接，3.a:hover設置懸停效果，4.a:active設置點擊時樣式，5.a:focus確保鍵盤可訪問性，始終遵循LVHA順序以避免樣式衝突，可通過添加padding、cursor:pointer和保留或自定義焦點輪廓來提升可用性和可訪問性，還可使用border-bottom或動畫下劃線等自定義視覺效果，最終確保鏈接在所有狀態下均有良好用戶體驗和可訪問性。
如何在CSS中使用大眾和VH單元
Aug 07, 2025 pm 11:44 PM
vw和vh單位通過將元素尺寸與視口寬度和高度關聯，實現響應式設計；1vw等於視口寬度的1%，1vh等於視口高度的1%；常用於全屏區域、響應式字體和彈性間距；1.全屏區域使用100vh或更優的100dvh避免移動瀏覽器地址欄影響；2.響應式字體可用5vw並結合clamp(1.5rem,3vw,3rem)限制最小和最大尺寸；3.彈性間距如width:80vw、margin:5vhauto、padding:2vh3vw可使佈局自適應；需注意移動設備兼容性、可訪問性及固定寬度內容衝突，建議優先使用dvh
