Toptal 的快速實用的 CSS 備忘單

已發表: 2022-03-11

級聯樣式表，簡稱 CSS，是一種用標記語言編寫的樣式表語言。 CSS 定義了 Web 文檔的表示、外觀和格式元素，例如佈局、顏色和字體。

CSS 語法是全面的，要始終知道確切的語法或知道所有可用的 CSS 屬性和相應的值並不容易。為了幫助 CSS 開發人員和設計人員，Toptal 創建了一個快速參考指南，並以免費下載的形式提供給社區。 CSS 參考指南包含 CSS 語法、最重要的選擇器、屬性、大小和單位，以及其他有用的 CSS 信息，格式簡短且內容豐富。我們希望您會發現 CSS 備忘單是一種寶貴的資源。

您還可以查看 Toptal 資源頁面以獲取有關常見 CSS 錯誤、CSS 招聘指南、CSS 面試問題以及 CSS 提示和最佳實踐的更多信息。

單擊此處下載 CSS 備忘單

CSS 備忘單

句法		盒子模型
/* 註釋 */ @媒體類型 { 選擇器 { 適當的價值; } } 注意：媒體類型是可選的
內聯樣式 <標籤>
嵌入式風格 <頭部> <style type="text/css"> 選擇器 { 屬性：值； } </style> </head>
外部樣式表 <頭部> <link rel="樣式表" type="text/css" href="style.css" /> </head>		盒子
		利潤	邊距頂部右邊距邊距底部左邊距

選擇器		填充	填充頂部填充權填充底部向左填充
*	所有元素
標籤	所有標籤元素	邊境	邊框頂部右邊界邊框底部左邊框
標籤 *	標籤內的所有元素
標記標記2	標籤內的 tag2 元素	邊框顏色	邊框頂部顏色右邊框顏色邊框底色左邊框顏色
標記，標記2	所有 tag 和 tag2 元素
標籤 > 標籤2	tag2 是 tag 的孩子	邊框樣式	邊框頂部樣式右邊框樣式邊框底部樣式左邊框樣式
標籤 + 標籤2	tag2 前面有標籤
。班級	具有類“類”的元素	邊框寬度	邊框頂部寬度右邊框寬度邊框底部寬度左邊框寬度
標籤類	所有帶有“類”類的標籤
＃ID	id 為“id”的元素	尺寸和顏色
標籤#id	帶有 id 'id' 的標籤	相對尺寸	時間 \| 雷姆 \| 前 \| ch 大眾 \| vh \| 最小 \| 最大 \| %
偽選擇器
：積極的	為活動元素添加樣式	絕對尺寸	厘米 \| 毫米 \| 在像素 \| 點 \| 個人電腦
：後	在元素之後添加內容
：前	元素前的廣告內容	顏色	十六進制 #ff00ff
：第一個孩子	為第一個孩子添加樣式		RGB RGB(255,0,255)
:首字母	為第一個字符添加樣式	定位
：第一行	將樣式添加到第一行	位置	絕對 \| 固定 \| 相對 \| 靜態 \| 繼承
：重點	為焦點元素添加樣式
：徘徊	鼠標懸停時添加樣式	漂浮	離開 \| 對 \| 沒有 \| 繼承
：關聯	為未訪問的鏈接添加樣式
:訪問過	為訪問的鏈接添加樣式	右上，左下方	設置從邊緣的偏移量
文本
字體系列	指定字體系列	清除	左 \| 對 \| 兩者\| 沒有 \| 繼承
字體大小	指定字體大小
字體樣式	正常 \| 斜體 \| 斜 \| 繼承	展示	指定文檔流中的元素放置

字體變體	正常 \| 小型股\| 繼承	溢出	可見 \| 隱藏 \| 滾動 \| 汽車 \| 繼承
字體 -重量	正常 \| 粗體 \| 更大膽 \| 打火機\| 整數 (100- 900) \| 繼承
		能見度	可見 \| 隱藏 \| 崩潰 \| 繼承
顏色	設置文本的顏色
線高	正常 \| 整數\| % \| 繼承	z-index	汽車 \| 整數\| 繼承
文本對齊	左 \| 對 \| 中心 \| 證明 \| 繼承	方面
		高度	汽車 \| 整數\| % \| 繼承
文本- 裝飾	沒有 \| 下劃線 \| 上劃線 \| 直通 \| 眨眼 \| 繼承	最大高度	沒有 \| 整數\| % \| 繼承
		最大寬度	沒有 \| 整數\| % \| 繼承
文本縮進	整數\| % \| 繼承	最小高度	整數\| % \| 繼承
文本- 轉變	沒有 \| 大寫 \| 大寫 \| 小寫 \| 繼承	最小寬度	整數\| % \| 繼承
		寬度	汽車 \| 整數\| % \| 繼承
垂直的 -對齊	整數\| % \| 基線 \| 子 \| 超級 \| 頂部 \| text-top 中間 \| 底部 \| 文字底部 \| 繼承	其他
		背景	格式：背景（顏色）（圖像）（重複）（位置）
白色的 -空間	正常 \| 無包裝 \| 預 \| 前線 \| 預包裝\| 繼承
		光標	設置光標類型
字間距	正常 \| 長度 \| 繼承	引號	設置引號類型