Pico CSS 初學者使用指南
層疊樣式表 (CSS) 是一種無所不在且強大的視覺語言，允許自定義 HTML 元素的外觀，但其實現可能會帶來挑戰。為了緩解這些困難，開發人員開發了TailwindCSS等CSS框架以及Less CSS和Sass等預處理技術。
Pico CSS 是一種簡化的網頁樣式設計方法，它僅提供增強美觀所需的工具和功能，而不會給項目帶來過多的複雜性。它允許用戶使用基本的 HTML 組件並輕鬆應用自定義樣式。
在您的項目中安裝 Pico CSS
將 Pico CSS 集成到項目中的標準方法之一是利用內容交付網絡 (CDN)。這種方法需要利用託管 Pico CSS 文件的 CDN 服務提供商，例如 jsDelivr。要實現此解決方案，只需引導 Web 應用程序的代碼引用 CDN 託管的預編譯的“ pico.min.css ”文件，從而以開發人員所需的最少努力促進無縫集成。
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
另一種方法是利用節點包管理器 (NPM) 來安裝 PicoCSS。但是，在繼續之前，必須確保 Node.js 已成功安裝在您的系統上。要驗證您的設備上是否存在 Node.js，請在終端或命令提示符中執行以下命令:
node -v
如果系統中存在 Node.js 安裝，命令行界面將顯示其版本信息。如果缺少此軟件，可以尋求在計算設備上獲取和設置 Node.js 的指南。要安裝 Pico CSS，請執行以下步驟:
npm install @picocss/pico
使用 Pico CSS 創建網站
在建立網頁設計時，Pico CSS 提供兩種獨特的分類，即“容器”和“網格”。要啟動此過程，請創建一個新目錄，並在其中生成一個名為“index.htm”的文件以及另一個名為“style.css”的文件。在“index.htm”文件中，請添加以下基本模板代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Pico Website</title>
</head>
<body>
<div class="container">
<h1>Articles Worth Reading...</h1>
</div>
</body>
</html>
Pico CSS 網格系統
Pico CSS 中網格系統的實現展現了極簡主義的特徵。網格的指定可以通過使用“網格”類名稱來實現。值得注意的是，在 Pico CSS 中，當存在屏幕寬度低於 992 像素閾值的設備時，網格列會進行合併。
在 index.htm 文件的 `` 部分內的 # 元素下方，構造一個包含四列的網格。
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
為了實現網格內每個“div”元素的正確格式，必須將“container”和“card”類分配給每個相應的“div”。前者被稱為“容器”，通過與 Pico CSS 框架的關聯，具有將查看內容居中的固有屬性。隨後，利用適當的語法和方法將相關數據或信息合併到網格結構中，從而形成類似於下面提供的示例的有組織的佈局:
<div class="grid">
<div class="container card">
<img
src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
/>
<h4 class="title">Why do birds sing in the morning?</h4>
<div class="metadata">
<span>David Uzondu</span>
<span>13 Minutes ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
/>
<h4 class="title">The Secret Life of Ducklings</h4>
<div class="metadata">
<span>Sam Holland</span>
<span>53 Minutes ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
/>
<h4 class="title">NASA's New Mission: Sending Flat-Earthers to
Edge of Earth to Prove Them Wrong</h4>
<div class="metadata">
<span>Simon Peterson</span>
<span>1 hour ago</span>
</div>
</div>
<div class="container card">
<img
src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
/>
<h4 class="title">Local Grandma Wins International Hip-Hop Dance Battle,
Proves Age is Just a Number</h4>
<div class="metadata">
<span>Anonymous</span>
<span>2 days ago</span>
</div>
</div>
</div>
要修改我們網站的外觀，我們必須訪問 style.css 文件並合併提供的代碼片段。這將使我們能夠自定義網頁視覺呈現的各個方面，例如字體樣式、顏色和佈局。
img {
width: 100%;
background-size: cover;
border-radius: 10px;
height: 200px;
}
.card {
background-color: rgb(244, 244, 244);
border-radius: 10px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}
.card:hover {
transform: scale(1.03);
}
.metadata {
margin-top: -30px;
margin-bottom: 10px;
}
.title {
margin-top: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.metadata {
font-size: 14px;
}
span:nth-child(1)::after {
content: " -";
}
在瀏覽器界面中加載網頁後，用戶預計會看到屏幕上突出顯示的以下元素:
如何在 Pico CSS 中使用按鈕
Pico CSS 提供了大量預先設計的 HTML 元素和構建塊，其中最常用的元素之一是網頁設計中無處不在的按鈕。
利用 Pico CSS，按鈕元素經過精心設計，可以在不同的 Web 瀏覽器中展示統一的設計和外觀。合併此元素需要將其插入 HTML 代碼中，類似於其他標準做法:
<button>This is a button</button>
為了覆蓋 Pico CSS 的默認屬性（其中按鈕展開以佔據其父容器的整個寬度），必須將“role”屬性分配給任何內聯 HTML 元素並將其值設置為“button”。
<a href="https.//www.google.com" role="button">Go To Google</a>
如何使用 Pico CSS 中的加載實用程序
使用 Pico CSS 時，將元素上的 aria-busy 屬性設置為“true”可以默認引入加載指示器。當用戶希望通知用戶無法與特定元素交互時，或者當瀏覽器正在檢索特定資源時，這非常有用。
<a href="#" aria-busy="true">Generating One-Time Password, please wait…</a>
上述代碼預計會產生以下結果:
如何在 Pico CSS 中使用工具提示
Pico CSS 通過提供高效且用戶友好的解決方案簡化了實現工具提示的過程。借助此框架，用戶可以輕鬆生成各種元素的工具提示，而無需具備 JavaScript 或其他編程語言的高級知識。要使用 Pico CSS 建立工具提示，只需應用兩個規範:
提供的定義描述了 HTML 中的工具提示元素，指定它包含一個名為“data-tooltip”的屬性，該屬性確定其內容。
Bootstrap 中的“data-placement”屬性用於指定工具提示在網頁上的位置。有四個可能的值可以分配給該屬性，包括“頂部”、“右側”、“底部”和“左側”。這些值確定工具提示相對於其觸發元素或目標元素的顯示位置。
提供的示例以簡潔的方式演示了使用該工具的過程，闡明了其實際應用。
<button data-tooltip="Top" data-placement="top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>
在 Web 瀏覽器中運行該程序時，應該觀察以下輸出:
Pico CSS 中的手風琴
利用 Pico CSS 框架內的 `` 元素可以實現允許用戶通過擴展和收縮來操縱內容部分的可見性的功能，就像在手風琴樂器上執行的操作（其片段被擴展或壓縮）一樣。
<details>
<summary>This is an accordion</summary>
<p>
Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
vulputate integer elit sodales? Egetnunc pellentesque eu eget
consequat condimentum praesent nec auctor sapien luctus at, donec ac
ex sit magna amet in.
</p>
</details>
渲染此 HTML 代碼時，瀏覽器應該提供一個用於切換其內容可見性的界面，在本例中，該界面由三角形內的下降箭頭表示:
什麼時候應該使用 CSS 框架
利用 CSS 框架可以消除對冗餘設計元素的需求，從而加快開發週期，使開發人員能夠將精力集中在應用程序的更複雜的方面。如果希望節省資源並利用這些框架提供的好處，建議將它們合併到項目中。
利用框架提供了一系列預先確定的 CSS 樣式模式、網格系統和構建塊，使開發人員能夠專注於其應用程序的底層邏輯和功能。眾多的 CSS 框架都配有全面的參考資料和廣泛的社區援助，事實證明，在遇到任何障礙或挑戰時，這些框架是不可或缺的資源。