【Anki】編輯卡片模板時的Cheat Sheet（HTML, CSS, Anki內建語法）
6 min readJul 22, 2018
把在醫學生的K書法：Anki使用心得（下）- 製作卡片模板這篇文章中介紹到的內容稍加整理補充以便查閱，做成了類似Cheat Sheet的東西。在編輯卡片模板時，開著這個網頁或許會挺方便的。
大綱：
- Anki內建語法
- 註解的寫法
- HTML
- CSS的基本寫法
- 常用CSS屬性
- CSS盒模型與相關屬性
- 顏色
- 「collection.media」資料夾的找法
Anki內建語法
用在HTML（Back Template與Front Template）的部分
{{欄位名}}套用名為「欄位名」的欄位中的內容{{FrontSide}}只能用在Back Template上，代表放在Front Template中的所有東西<hr id=answer>插入一條橫向分隔線{{type:欄位名}}在正面與背面都必須放才有用。拼字測驗功能。{{#欄位A}} 如果名為「欄位A」的欄位是空的，這段被包在這個中間的東西不會被顯示 {{/欄位A}}{{^欄位A}} 如果名為「欄位A」的欄位是空的，這段被包在這個中間的東西會被顯示 {{/欄位A}}
用在CSS（Styling）的部分：
.card {}寫在這個大括弧中的CSS聲明影響整張卡片，正面與背面全部。
註解的寫法
<!-- HTML註解 -->
/* CSS註解 */HTML
- 換行→
<br> - 想要箱子的時候→
<div> - 只是選取字串的時候→
<span> - HTML的基本寫法：
<div class="第一個class 第二個class"> <!--class可以指定一個也可以指定複數個，放複數個的時候，中間用空白隔開！ -->
這中間是內容，比如說{{欄位}}
</div>CSS的基本寫法：
.class的名字 {
font-size: 20px; /*聲明與聲明的中間一定要用英文分號「;」隔開*/
padding: 2px 3px 5px 3px; /*可以簡寫指定複數個值的屬性，值之間用空白分隔*/
}常用CSS屬性：
font-family:設定字體。值：字體名，如font-family: arial;。font-size:設定字型大小。值：長度單位，如font-size: 20px。line-height:行高。值：(1)數字（結果是font-size乘上該倍數）(2)長度單位（固定值），如line-height: 1.5;。color:文字顏色。值：顏色，如color: red。text-align:對齊模式。值：left（靠左對齊）、right（靠右對齊）、center（置中對齊）、justify（對齊兩側）。text-decortion:文字裝飾，有許多效果，可參考MDN上的說明background-color:背景顏色。值：顏色，如background-color: white。background-image:背景圖片。要把要使用的圖片放入collection.media資料夾才能用。值：url(圖片檔名.副檔名)。如background-image: url(image.png)。（連結至MDN）- CSS文本、CSS字體、CSS背景
CSS盒模型與相關屬性
box-sizing:調整盒模型的模式。值：(1)content-box（預設值，不更動的話就是這個） 或者(2)border-box。兩者的差別如上兩張圖所示。border:可設定項目包含粗細、顏色、樣式(style)（包含solid實線、dotted虛線）如border: 2px dotted blue;（詳細可參考連結至MDN）border-radius:可以製造圓角邊框。值：長度單位，代表圓角半徑。例：border-radius: 3px。（可以簡寫設定四個角，順序是左上角開始順時針轉一圈，左上、右上、右下、左下）（詳細可參考連結至MDN）border:,padding:,margin:三項屬性可以使用簡寫設定四個邊，順序是順時針轉一圈，上、右、下、左。例：margin: 2px, 4px, 3px, 1px;。border:,padding:,margin:三項屬性也可以分別指定上下左右設定，方法是加上-upper:（上）、-bottom:（下）、-left（左）、-right（右）。而border不只設定粗細，顏色樣式一樣可以設定。例：border-bottom: 5px solid red;width:與height:是盒模型獨有的屬性，在span元素不適用。設定寬與高。
顏色
HSL或HSLA色碼系統：
- 色相（Hue）：0~360，色相環上的角度
- 彩度（Saturation）、明度（Lightness）：0%~100%
- 透明度（Alpha）：0~1，0為完全透明，1為完全不透明（用不到的時候透明度這項可以直接省略）
hsl(30, 70%, 85%)
hsla(30, 70%, 85%, 0.2)「collection.media」資料夾的找法
- (1)Mac「Anki/Preferences…（偏好設定）」；(2)Windows「Tools(工具)/Preferences…」。
- 來到Preferences（偏好設定）的視窗中，點選「Open backup folder」。
- 來到名為backup的資料夾，往上一層（進入的資料夾名稱為你的個人檔案名稱），就能看到「collection.media」資料夾了。
這份 Cheat Sheet有幫助嗎？任何的問題、回饋、心得都歡迎留言反應。如果你喜歡這篇文章，拍手、轉發對我言都是最大的鼓勵。感謝你的閱讀！
