CSS
含有「CSS」共 114 篇內容
全部內容
發佈日期由新至舊
當要顯示的文字過長時，一般會使用 CSS 隱藏超出的部分，並在文字尾端顯示 ... 來表示內容並未完全顯示。
Demo：https://codepen.io/lwxidmpx-the-scripter/pen/MYgVmjm
單行文字截斷
overflow: hidden;
whi
本篇文章介紹了網頁元素的 Box 佈局，細述 Content Box、Padding Box、Border Box 和 Margin Box 的結構，並探討了 Intrinsic 與 Extrinsic Size 的特性。
你是否在撰寫 CSS 時曾遇過寫了 Class name 卻沒有效果的詭異情況？
現在讓我們玩個小賭局吧(註1)，猜猜看下方 HTML 搭配兩組 Class 樣式後，最終文字的顏色為何？猜錯的話，如果呈現為藍色，就請你的另一半去吃和牛 47，反之如果是紅色就請他 / 她吃 12mini 吧。
在本章節中，我們介紹了 CSS 偽元素的基本概念和常見用法，通過一些示例，我們展示了如何使用這些偽元素來樣式化文檔中的特定部分。此外，我們還探討了一些高級用法，如創建自定義引號和實現複雜的圖形效果。這些內容應該能夠幫助你更好地理解和應用 CSS 偽元素。
在這一章中，我們介紹了 CSS 的過渡效果和動畫效果。過渡效果使 CSS 屬性的變化更加平滑，而動畫效果則允許我們更精細地控制元素的多個屬性隨時間變化的過程。我們通過基本語法和示例展示了如何使用這些效果，並提供了一個綜合應用的實踐案例來幫助理解。這些技術可以讓你的網頁更具互動性和動態效果。
在本章中，我們探討了CSS Grid佈局的基本概念和應用。CSS Grid提供了一個強大而靈活的二維佈局系統，使得處理複雜的網頁佈局變得更加簡單和直觀。我們學習了如何設置Grid容器和Grid項目，以及如何使用各種Grid屬性來定義和管理佈局。
在這一章節中，我們介紹了 Flexbox 這個 CSS 模型及其用法，重點講解了 Flex 容器和項目的各種屬性。通過具體的示例，展示了如何使用 Flexbox 進行一維佈局設計，並且通過實踐案例，展示了多行 Flex 項目和不同對齊方式的應用。
浮動（float）是早期用來創建佈局的技術。元素可以向左或向右浮動，旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
