一個制作Web圖案的組件css-doodle

eb中使用一些圖案做為背景圖案是一種時常可見的，早期一般都是通過圖片來完成。直至CSS一些新特性更趨成熟和穩定的時候，會通過CSS的相關技術，比如CSS的漸變屬性配合background-size之類的來做一些復雜而又美觀的Web圖案，運用于background-image之中。

而其中最為出名的是@Lea寫的CSS3 Patterns，并且@Lea在其《CSS Secrets》一書中特別介紹了CSS如何實現復雜背景圖案。雖然CSS Patterns實現的圖案是令人感到驚艷與好奇，但其擴展性以及適配性還是有一定的限制。因此有同學將CSS Patterns換成了SVG Patterns（也就是使用SVG相關的特性實現了CSS Patterns相同的效果）。當然，除此之外，還有很多工具能幫助我們來實現CSS圖案的效果，其中有的工具可以生成代碼，而有的工具會生成圖片。

隨著前端技術不斷的革新，不久前看到一個生成Web圖片的組件：<css-doodle /> —— 使用CSS繪制圖案的Web組件！

這是一個非常強大的Web組件，初次看到，你會覺得她非常的神奇和強大。至于為什么？你要是花日間閱讀完后面的內容，你就知道其中的原委了。為了讓大家對其有初次的感覺，先上一個使用<css-doodle />組件創作的圖案效果，如下：

是不是有點蠢蠢欲動的感覺。如果是的話，跟著下面的節奏繼續往下閱讀。

什么是<css-doodle />

<css-doodle />是一個Web組件。其基于Shadow DOM V1和Custom Elements V1來構建的。該組件可以幫助輕松的使用Custom Elements、Shadow DOM和CSS Grid創建任何你想要的圖案（CSS 圖案）。創建出來的圖案你可以運用于Web頁面中。

當你看到Custom Elements、Shadow DOM和CSS Grid的時候，你一定會心卻，這些東西瀏覽器能支持。事實上你的擔憂是正常的，因為該組件到目前為止只在最新的Chrome和Safari瀏覽器上可以正常的運行。如果你想運用于其他的瀏覽器上，你需要相關的Polyfilling。

簡單點說：

該組件通過其內部的規則（純CSS）會生成一系列的div構建的CSS Grid。你可以使用CSS輕松地操作這些div（單元格，每個div就是一個單元格）來生成圖案。生成的圖案既可以是靜態的，也可以是動態的。而其限制僅限于CSS本身的限制。

開始使用<css-doodle />

使用<css-doodle />組件創建圖案很簡單，當然有一個前提是你對其相關的API和使用方法有所了解。這里先來看怎么在你的項目中使用該組件。

使用<css-doodle />組件有兩種方法，第一種是比較原始的方法，就是在你的HTML文件中引入該組件所需要的JS和CSS文件。最簡單的方法就是直接引用cdnjs：

[xml] view plain copy

這個script你可以在</head>或</body>結束標簽前調用。然后在任何你想要的地方調用：

[xml] view plain copy

<css-doodle> /* 繪制圖案的代碼放在這里 */

</css-doodle>

如果你不想使用cdnjs提供的在線資源，你也可以將css-doodle-0.3.0.min.js文件下載到你本地的項目中，通過相對路徑來引用下載的文件。

除此之外，也可以通過npm的方式將<css-doodle />安裝到你的項目中，然后通過import的方式將其引入到你的項目中。比如說在Vue項目中，你可以先執行：

npm install css-doodle

或者使用yarn來安裝：

yarn add css-doodle

然后在你想要使用<css-doodle />的地方先import，比如在App.vue文件中：

[python] view plain copy

import CSSDoodle from 'css-doodle'

然后你就可以在<template>中引用，比如：

這時在你的頁面中看到的效果如下：

這個時候，你和我可以一樣，對<css-doodle></css-doodle>中代碼一無所知，但正是這里面的一些代碼生成了上圖這樣的效果。這個時候你通過瀏覽器開發者工具查看代碼的時候，你會看到生成的代碼如下圖所示：

基本語法

<css-doodle />的語法是基于CSS的，這一點需要特別記住 —— 一切能用于Web的CSS，都可以用于此處！。除此之外，他還提供了一些額外的實用函數和簡寫的屬性。這些函數和屬性可以在其官網中查閱。

有關于<css-doodle />提供的函數和屬性，在本文章中不做一一介紹，如果你想使用該組件來創作一些有意思的Web圖案，那非常有必要花一定的時間去閱讀官方文檔。并嘗試自己寫寫Demo。你會很快就能掌握這些規則和使用姿勢！

先看一個簡單示例

使用<css-doodle />其后臺運行機制是使用CSS Grid布局創建一個網格系統。其實創建一個簡單的網格是<css-doodle />最為簡單的一個示例。比如說，我們創建一個5 x 8（五行八列）的網格，并且這個網格的width和其父容器的寬度相同（即100%）,高度為瀏覽器屏幕高度的五分之一。那么我們就可以這樣寫代碼：

你將看到的效果如下：

特別注意：如果你的瀏覽器看不到任何的效果，請確認你使用的是最新版本的Chrome或Safari瀏覽器！后續的示例不再做相關的提示！

為了幫助沒時間閱讀官方文檔的同學能看懂上面的代碼，這里簡單的做一下說明：

:doodle：是一個特殊的選擇器，其指向的是組件元素本身，即<css-doodle />。注意，其樣式會被你的CSS樣式覆蓋
@grid：創建一個網格，其后面配置的參數說明你要創建的網格。比如上面的示例5x8 / 100% 100vh;。其中5 x 8表示的是創建一個五行八列的網格；100%表示網格的寬度（和其容器寬度相同）；100vh表示網格的高度（瀏覽器屏幕的高度）
:after：每個單元格的偽元素，用于生成內容，比如你在效果中看到的數字
@index()：是一個函數，返回當前單元格的索引號，注意其開始值是從1開始
@even：對應的偶數單元格，這里將偶數單元格的背景顏色設置為#f36
@odd：類似于@even，但對應的是奇數單元格

再來看一個復雜的示例

上面看到的效果是一個簡單的示例效果，使用了一些最基本的樣式規則寫了一個五行八列的網格。其實我們還可以利用<css-doodle />提供的一些函數和一些其他的CSS樣式規則，制作一些復雜的效果，而且還可以是帶有動效的。比如下面這個示例：

對應的效果如下：

效果是不是很炫，很酷!

@place-cell：將單元格相對布局
@size：設置單元格的width和height
@rand：從數字的范圍內返回一個隨機值
@pick：給定的列表中隨機選取一個值

正如你所見，在上面這個示例中，還使用了@keyframe來聲明動畫，并且還使用了CSS自定義屬性。再次驗證，只要是瀏覽器支持的CSS屬性都可能用于<css-doodle />。

帶有交互效果的案例

上面的示例，使用@keyframes可以做一個帶有動畫的效果。除此之外，還有更神奇的效果，那就是使用<css-doodle />的JavaScript API還可以實現現有交互效果的圖案。比如下面這個示例：

當我們鼠標懸浮在上面的時，圖標會旋轉，這依舊采用的是@keyframes做的一個簡單動畫。除此之外，你點擊屏幕時，整個圖案會更新。

實現這樣的效果很簡單，就只是簡單的加了下面這么幾行JavaScript代碼：

[php] view plain copy

const myDoodle=document.querySelector('.my-doodle'); myDoodle.addEventListener('click', ()=> { myDoodle.update(); });

使用了一個.update()函數，當你在屏幕單擊時，整個組件會使用給定的樣式重新刷新。

上面看到的是不同方式實現的一些圖案效果。除些之外，你可以發動你的大腦和創意，制作一些其他更有意思的圖案效果。如果你感興趣的話，可以看看@yuanchuan在Codepen整理的有關于<css-doodle />組件制作的一些圖案效果。

總結

這篇文章主要科普了一下<css-doodle />組件。簡單的回顧一下，該組件是一個Web組件，主要是基于Shadow DOM V1 和 Custom Elements V1 來構建的。而其背后運行的原理是使用CSS Grid和純CSS規則制作的一些圖案。除了CSS自帶的規則之外，該組件還封裝了一些函數和屬性，能讓你快速制作一些圖案。另外還你還可以使用Unicode字符創建一些字符圖案。

當你閱讀到這里的時候，我想你對<css-doodle />組件有所了解，如果你動手了，或許你創作出一些與眾不同的圖案效果。希望你能在下面的評論中分享您的作品。如果你有其他的想法，也歡迎在下面的評論中分享。最后，該文章要是對您有所幫助的話，歡迎各位爺打個賞，鼓勵我繼續創作一些優質的教程。(^_^)

TML（網頁）

Web領域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網，俗稱萬維網（www）。

W3C

W3C（World Wide Web Consortium）叫萬維網聯盟，是國際最著名的標準化組織，制定了web標準。

WEB標準

一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了交互行為和動態效果。

web標準包含了下面三個方面：

結構標準（HTML）：用于對網頁元素進行整理和分類。
表現標準（CSS）：用于設置網頁元素的版式、顏色、大小等外觀樣式。
行為標準（JavaScript）：用于定義網頁的交互和行為。

HTML定義

Html不是一種編程語言，而是描述性的標記語言，主要作用是定義內容的結構。

2014年10月萬維網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。

HTML5的出世，標志著web進入一個富客戶端（具有很強的交互性和體驗的客戶端程序）時代，像APP網頁，小程序都是HTML5的應用場景。

Html5新特性：

用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對本地離線存儲的更好的支持。
新的特殊內容元素，比如 article、footer、header、nav、section。
新的表單控件，比如 calendar、date、time、email、url、search。

頁面基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="關鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標題</title>
</head>
<body>

</body>
</html>

關于viewport

viewport用戶網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。
height：和 width 相對應，指定高度。
initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動縮放。

常見元素

head區域元素：

meta title style link script base。

body區域元素：

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

元素分類

塊級元素：每個元素都是獨占一行

address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是css layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1-h6 – 標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容）
noscript – ）可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行內元素：元素在同一行水平排列

a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體
big – 大字體
br – 換行
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標簽
s – 中劃線(不推薦)
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設置一些塊元素屬性

通過Css：display:inline-block 改變元素。

元素默認樣式

很多元素都自帶了默認樣式，不同瀏覽器下默認樣式表現不一致，為了統一或者滿足一些需求我們需求將所有默認樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認樣式進行了統一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對單位

in：英寸，1in=2.54cm=96px
pc：皮卡，1皮卡=1/16英寸
pt：點，1點=1/72英寸
px：像素，1點=1/96英寸

相對單位

em：font-size中相對于父元素的字體大小，在元素屬性中使用是相對于自身字體大小
rem：根元素的字體大小，在元素屬性中使用是相對于根元素字體大小
1h：元素的line-height
vw：視窗寬度的1%
vh：視窗高度的1%
vmin：視窗較小尺寸的1%
vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒有就顯示默認*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或寫（400｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：

line-height

文本垂直居中

對于單行文本可以設置行高=盒子高度。

對于多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

letter-spacing: 0.5em ; 單個字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
text-indent:10px; 文本首行縮進。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內容溢出處理

visible：默認值，多余的內容會全部顯示出來。
hidden：超過元素的內容隱藏。
auto：內容超出顯示滾動條。
scroll：Windows總是顯示滾動條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

background-color:#fff; 設置背景顏色。
background-image:url(img.png); 設置圖像為背景。
background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top; 設置背景圖片在容器的位置，top，bottom，left，right，center。
background-attachment:scroll; 設置背景圖片隨滾動條移動，scroll（跟隨滾動），fixed（固定）。
background-origin:border-box; css3，border-box（背景相對于邊框框定位），padding-box（背景相對于填充框定位），content-box（背景相對于內容框定位）。
background-clip:border-box; css3，背景裁切。
background-size:cover; css3，調整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時拉伸圖像。），auto（在相應的方向上縮放背景圖像，以保持其固有比例。）。

優先級

理解優先級很重要，有助于我們排查一些問題。瀏覽器將優先級分為兩部分：HTML的行內樣式和選擇器的樣式。

行內樣式

行內樣式是直接作用在元素，它的優先級高于選擇器樣式，使用！important可以提高樣式表的優先級。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優先級規則如下：

如果選擇器的ID數量最多的勝出。
如果ID數量一致，那么擁有最多類的選擇器勝出。
如果以上兩次比較都一致，那么擁有最多標簽名的選擇器勝出。

優先級

我們通過下圖這種標記方式，就可以判斷出選擇器的優先級。

優先級

兩條經驗法則

盡量不要使用ID選擇器，因為它會大幅提升優先級。當需要覆蓋這個選擇器時，通常找不到另一個有意義的ID，于是就需要復制原來的選擇器加上另一個類來讓它區別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個！important，而且依然要處理優先級的問題。

基礎選擇器

類型或標簽選擇器，匹配目標元素的標簽名，如：p，input[type=text]，優先級（0，0，1）。
類選擇器，匹配class屬性中有指定類名的元素，如：.box，優先級（0，1，0）。
ID選擇器，匹配擁有指定ID屬性的元素，如：#id，優先級（1，0，0）。
通用選擇器（*），匹配所有元素，優先級（0，0，0）。

組合選擇器

由多個基礎選擇器組合成的復雜選擇器。

后代組合器（單個空格（）表示），比如 .nav li，表示li是一個擁有nav類的元素的后代。
子組合器（>），匹配的元素是直接后代，.parent > .child。
相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會選中目標元素之前的兄弟元素，li.active ~ li。

復合選擇器

多個基礎選擇器連起來（中間沒有空格）組成一個復合選擇器（如：ul.nav）。復合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態的元素，優先級（0，1，0）。

:first-child——匹配的元素是其父元素的第一個子元素。
:last-child——匹配的元素是其父元素的最后一個子元素。
:only-child——匹配的元素是其父元素的唯一一個子元素（沒有兄弟元素）。
:nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數，該公式指定要選中哪個元素。要了解一個公式的工作原理，請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

:nth-child(an+b)

:nth-last-child(an+b)——類似于：nth-child()，但不是從第一個元素往后數，而是從最后一個元素往前數。括號內的公式與：nth-child()里的公式的規則相同。
:first-of-type——類似于：first-child，但不是根據在全部子元素中的位置查找元素，而是根據擁有相同標簽名的子元素中的數字順序查找第一個元素。
:last-of-type——匹配每種類型的最后一個子元素。
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個子元素。
:nth-of-type(an+b)——根據目標元素在特定類型下的數字順序以及特定公式選擇元素，類似于：nth-child。
:nth-last-of-type(an+b)——根據元素類型以及特定公式選擇元素，從其中最后一個元素往前算，類似于：nth-last-child。
:not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用于排除祖先元素，同時不允許包含另一個排除選擇器。
:focus——匹配通過鼠標點擊、觸摸屏幕或者按Tab鍵導航而獲得焦點的元素。
:hover——匹配鼠標指針正懸停在其上方的元素。
:root——匹配文檔根元素。對HTML來說，這是html元素，但是CSS還可以應用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關的偽類選擇器。
:disabled——匹配已禁用的元素，包括input、select以及button元素。
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點的元素。
:checked——匹配已經針對選定的復選框、單選按鈕或選擇框選項。
:invalid——根據輸入類型中的定義，匹配有非法輸入值的元素。例如，當<inputtype="email">的值不是一個合法的郵箱地址時，該元素會被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先級（0，0，1）。

::before——創建一個偽元素，使其成為匹配元素的第一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::before。
::after——創建一個偽元素，使其成為匹配元素的最后一個子元素。該元素默認是行內元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::after。
::first-letter——用于指定匹配元素的第一個文本字符的樣式，如：h1::first-letter。
::first-line——用于指定匹配元素的第一行文本的樣式。
::selection——用于指定用戶使用鼠標高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據HTML屬性進行匹配元素，優先級（0，1，0）。

[attr]——匹配的元素擁有指定屬性attr，無論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素擁有指定屬性attr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值是一個空格分隔的值列表，列表中的某個值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素擁有指定屬性attr，且屬性值要么等于指定的字符串值，要么以該字符串開頭且緊跟著一個連字符（-）。

小結

本文要點回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁面結構，元素分類。
Css優先級。
Css選擇器，（基礎選擇器，組合選擇器，復合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

些一行代碼大多數會是CSS規則中的一個聲明。在某些情況下，選擇器可能不只是一個簡單的元素；在其他情況下，我會添加額外的聲明作為建議以獲得更好的體驗，因此使它們不再嚴格意義上是一行代碼——對于這些情況我提前道歉。

這些一行代碼中的一些更多是個人選擇，并不適用于所有網站（并非每個人都使用表格或表單）。我會簡要描述每一個，它們的作用（附帶示例圖片），以及為什么我喜歡使用它們。請注意，示例圖片可能會在前面例子的基礎上進行構建。

以下是這些一行代碼的作用概述：

限制視口內的內容寬度
增加正文文本大小
增加文本行之間的間距
限制圖片寬度
限制內容中文本的寬度
以更平衡的方式包裹標題
表單控件顏色與頁面樣式匹配
易于跟隨的表格行
表格單元格和標題的間距
減少動畫和移動

限制視口內的內容寬度

body {
  max-width: clamp(320px, 90%, 1000px);
  /* 額外建議 */
  margin: auto;
}

添加這個一行代碼將使內容大小占據視口的90%，將其寬度限制在320到1000像素之間（可以隨意更新最小和最大值）。

這個改變將自動使您的內容看起來更好看。它將不再是一個龐大的文本塊，而是看起來更有結構和組織。如果你還給body添加margin: auto;，內容將在頁面上居中。兩行代碼讓內容看起來好多了。

并排比較變化。左側（之前）：一大塊文本。右側（之后）：兩側有內邊距的文本。仍然很大但有更多空間。

對齊和包含的文本比一大堆文本看起來更好

增加文本大小

body {
  font-size: 1.25rem;
}

讓我們面對現實：瀏覽器默認的16px字體大小是小的。雖然這可能是基于我變老的個人觀點

一個快速的解決方案是增加body中的字體大小。由于級聯和瀏覽器使用的em單位，網頁上的所有文本將自動增大。

并排比較。左側（之前）：帶有文本的列。右側（之后）：帶有更大字體的文本列。

更大的文本大小使閱讀更容易。

增加行間距

body {
  line-height: 1.5;
}

另一個提高可讀性和打破可怕的文本墻的偏好是增加段落和內容中行與行之間的間距。我們可以輕松地用line-height屬性做到這一點。

并排比較。左側（之前）：帶有文本的列。右側（之后）：帶有文本的列（間距更大）。

行間的空間打破了文本墻和白色的河流。

這個選擇（與前兩個一起）將顯著增加我們頁面的垂直大小，但我向你保證文本將更易讀，對所有用戶更友好。

限制圖片大小

img {
  max-width: 100%;
}

圖片的大小應該大致與它們將占據的空間相當，但有時我們會遇到真正長的圖片，導致內容移位并創建水平滾動。

避免這種情況的一種方法是設置最大寬度為100%。雖然這不是一個萬無一失的解決方案（邊距和內邊距可能影響寬度），但在大多數情況下它都能工作。

并排比較。左側（之前）：圖片溢出內容大小導致出現滾動條。右側（之后）：圖片調整到內容大小。

防止水平滾動并使圖片與文本更好地流動

限制內容中文本的寬度

p {
  max-width: 65ch;
}

避免可怕的文本墻和空白河流的另一種策略是應用這種樣式，即使與body中的最大寬度結合使用。這可能看起來不必要，有時甚至很奇怪，因為段落會比其他元素更窄。但我喜歡這種對比和較短的行。

60ch或65ch的值在過去對我很有效，但你可以使用不同的值并調整最大寬度以滿足你的需求。在你的網頁上玩耍和探索它的外觀。

并排比較。左側（之前）：文本占據整個寬度。右側（之后）：文本占據大部分寬度。

將較大的文本塊分成較小的塊以提高可讀性

以更平衡的方式包裹標題

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

標題是網頁結構的重要部分，但由于它們的大小較大和內容較短，可能看起來很奇怪。特別是當它們占據多于一行時。一個有幫助的解決方案是使用text-wrap來平衡標題。

雖然balance似乎是text-wrap最流行的值，但它不是唯一的。我們也可以使用pretty，如果需要的話，它會將額外的一個詞移到最后一行，而不是平衡所有內容。不幸的是，pretty目前還沒有廣泛的支持。

并排比較。左側（之前）：一個標題占據兩行，第二行只有1個詞。右側（之后）：標題占據寬度相似的兩行。

平衡的換行可以改善可見性和可讀性

表單控件顏色與頁面樣式匹配

body {
  accent-color: #080; /* 使用你喜歡的顏色 */
}

另一個小變化，雖然沒有顯著影響，但能讓東西看起來更好。直到最近，我們還不能用CSS樣式化原生表單控件，只能使用瀏覽器顯示。但情況已經改變。

開發一個完整的組件可能很麻煩，但使用這個一行代碼可以設置一個更接近網站其他部分和設計系統的顏色，這是可能的，而且很簡單。

并排比較。左側（之前）：表單控件是默認的藍色。右側（之后）：表單控件顏色與標題和鏈接顏色匹配（綠色）。

正是這些小細節（和顏色）讓頁面融為一體

易于跟隨的表格行

:is(tbody, table) > tr:nth-child(odd) {
  background: #0001; /* 或者對于深色主題使用 #fff1 */
}

我們必須使用表格來顯示數據，而不是用于布局。但默認情況下表格很丑，我們不希望數據看起來很丑。特別是，有一件事有助于組織數據并使其更易讀，那就是有一個帶有交替深淺行的斑馬表格。

上面顯示的一行代碼使得實現這種樣式變得容易。它可以簡化為只有tr而不考慮tbody或table父元素，但這也會應用到表格頭部，這可能不是我們想要的。這是一個品味問題。

并排比較。左側（之前）：所有表格行都是白色的。右側（之后）：偶數表格行略微深色。

更容易水平跟隨數據（按行）

表格單元格和標題的間距

td, th {
  padding: 0.5em; /* 或 0.5em 1em... 或任何不為0的值 */
}

讓表格更易訪問和更易讀的最后一個變化是通過給表格單元格和標題添加內邊距來稍微間隔內容。默認情況下，大多數瀏覽器沒有任何內邊距，不同單元格的文本相互接觸，使得區分一個單元格開始和另一個結束變得混亂。

我們可以更改內邊距值以調整到我們喜歡的大小。然而，避免過度以防止不必要的滾動或太多空白空間。

并排比較。左側（之前）：表格單元格文本內容完全在一起。右側（之后）：表格單元格內容明顯與其他表格單元格分開。

更容易水平和垂直跟蹤數據

減少動畫和移動

@media (prefers-reduced-motion) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    /* 額外建議 */
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

好吧，好吧。這段代碼遠不止一行。它有一個一行版本（通過將動畫持續時間設置為零秒來移除動畫），但網頁上還有其他使元素移動的東西。

通過在prefers-reduced-motion媒體查詢中設置這些聲明，我們將尊重用戶選擇減少移動的意愿。這種方法有些激進，因為它移除了所有移動，這可能不一定是用戶的意圖 - 它是"減少移動"而不是"無移動"。如果適當的話，我們仍然可以根據具體情況保留移動。

并排比較。左側（之前）：一個圖像在網頁上移動。右側（之后）：圖像是靜態的。

沒有動畫？沒問題！

在線咨詢

上一篇：手把手搭建流媒體服務器詳細步驟
下一篇：在HTML5大前端面試中如何斬獲高薪offer

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商