限制視窗中的內容寬度
body {
max-width: clamp(320px, 90%, 1000px);
/* additional recommendation */
margin: auto;
}新增這一行將減少內容大小以佔據視窗的 90%，將其寬度限制在 320 到 1000 像素之間（隨意更新最小值和最大值）。
此更改將自動使您的內容看起來更好。它不再是一個巨大的文字塊，而是看起來更結構化和有組織的東西。如果你還加了margin: auto;對於body ，內容將在頁面居中。兩行程式碼讓內容看起來好多了。
對齊且包含的文字看起來比巨大的文字牆更好
增加文字大小
body {
font-size: 1.25rem;
}讓我們面對現實：瀏覽器預設的 16px 字體尺寸很小。雖然這可能是基於我變老的個人意見😅
一個快速解決方案是增加正文中的字體大小。由於瀏覽器使用級聯和em單位，網頁上的所有文字都會自動增加。
較大的文字尺寸使內容更易於閱讀。
增加行間距
body {
line-height: 1.5;
}提高可讀性和打破可怕的文字牆的另一個偏好是增加段落和內容中行與行之間的間距。我們可以使用line-height屬性輕鬆做到這一點。
行與行之間的空間打破了文字的牆壁和白色的河流。
這個選擇（與前兩個選項一起）將大大增加我們頁面的垂直尺寸，但我向您保證，文字對於所有用戶來說都將更具可讀性和友善性。
限制影像的大小
img {
max-width: 100%;
}圖像的大小應與其所佔據的空間大致相同，但有時，我們最終會得到非常長的圖片，導致內容移動並產生水平滾動。
避免這種情況的一種方法是將最大寬度設為 100%。雖然這不是萬無一失的解決方案（邊距和填充可能會影響寬度），但它在大多數情況下都有效。
防止水平滾動並使圖像與文字更好地流動
限制內容中文字的寬度
p {
max-width: 65ch;
}避免可怕的文字牆和空間河流的另一種策略是應用這種樣式，甚至與正文的最大寬度結合使用。它可能看起來不必要，有時甚至很奇怪，因為段落會比其他元素更窄。但我喜歡對比和較短的線條。
60ch 或 65ch 的值過去對我有用，但您可以使用不同的值並調整最大寬度以滿足您的需求。嘗試並探索它在網頁上的外觀。
將較大的文字區塊分成較小的區塊以提高可讀性
以更平衡的方式包裝標題
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}標題是網路結構的重要組成部分，但由於其尺寸較大且內容較短（-呃），它們可能看起來很奇怪。特別是當它們佔據不只一條線時。一個有用的解決方案是使用text-wrap平衡標題。
儘管平衡似乎是文字換行最受歡迎的值，但它並不是唯一的值。我們也可以使用pretty ，如果需要，它會將額外的單字移到最後一行，而不是平衡所有內容。不幸的是，pretty 尚未獲得廣泛的支持。
平衡的包裹可以提高可見性和可讀性
表單控制項顏色以符合頁面樣式
body {
accent-color: #080; /* use your favorite color */
}另一個小變化不會產生重大影響，但會讓事情看起來更好。直到最近，我們還無法使用 CSS 設計原生表單控制項的樣式，而且只能停留在瀏覽器顯示器上。但事情已經改變了。
開發一個完整的元件可能很痛苦，但是使用這個單行程式碼可以設定與網站的其他部分和設計系統更相似的顏色，而且很簡單。
正是這些小細節（和顏色）將頁面組合在一起
易於理解的表格行
:is(tbody, table) > tr:nth-child(odd) {
background: #0001; /* or #fff1 for dark themes */
}我們必須使用表格來顯示資料，而不是用於佈局。但表格預設是醜陋的，我們不希望資料看起來醜陋。特別是，有助於組織資料並使其更具可讀性的一件事是使用具有交替的深色/淺色行的斑馬表。
上面顯示的一行程式碼可以輕鬆實現這種風格。它可以簡化為僅tr而不考慮tbody或table父級，但它也適用於表頭，這是我們可能不想要的。這是品味問題。
更容易水平追蹤資料（按行）
表格儲存格和標題中的間距
td, th {
padding: 0.5em; /* or 0.5em 1em... or any value different from 0 */
}為了使表格更易於存取和閱讀，最後一項更改是透過向表格單元格和標題加入填充來稍微間隔內容。預設情況下，大多數瀏覽器沒有任何填充，並且不同單元格的文字相互接觸，導致難以區分一個單元格的開始位置和另一個單元格的結束位置。
我們可以更改填充值以將其調整為我們喜歡的大小。但是，請避免過度使用，以避免不必要的滾動或過多的空白。
更容易水平和垂直追蹤資料
減少動畫和運動
@media (prefers-reduced-motion) {
*, *::before, *::after {
animation-duration: 0s !important;
/* additional recommendation */
transition: none !important;
scroll-behavior: auto !important;
}
}好吧好吧。這段程式碼不僅僅是一行程式碼。它有一個單行版本（透過將動畫持續時間設為零秒來刪除動畫），但網頁上的其他內容會使元素移動。
透過在偏好減少運動媒體查詢中設定這些聲明，我們將尊重用戶減少運動的選擇。這種方法有些激進，因為它消除了所有運動，這可能不一定是用戶的意圖 - 它是“減少運動”而不是“無運動”。如果合適的話，我們仍然可以根據具體情況保留行動。
沒有動畫嗎？沒問題！
原文出處：https://dev.to/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式