◆ ◆ ◆
4 years ago @Edit 4 years ago
#Anki #CSS #HTML
#這邊只筆記styling基礎
只是想拿來背單字但花了一整天在寫語法
latest #22
◆ ◆ ◆
4 years ago @Edit 4 years ago
正確來說是:
讀完全知1&2->不行我要接著英文版看->但不想要被查單字打斷->先來複習之前存的300多個單字好了->來試試看傳說中的Anki->不行太醜了我要自己寫版面
◆ ◆ ◆
4 years ago @Edit 4 years ago
備份資料夾路徑:
/Users/Username/Application Support/Anki2
放背景圖片路徑:
/Users/Username/Library/Application Support/Anki2/使用者 1/collection.media
立即下載
◆ ◆ ◆
4 years ago @Edit 4 years ago
*電腦版應用而已,意在建立大概念大方向
*研究到差點睡掉萌夯時間,我真的盡力了
*超級不專業,用詞不精確,給自己的筆記
https://images.plurk.com/2qBIzcQ9QaZIcfb26cPtdB.jpg https://images.plurk.com/58gOVBiNJMWWCrMAnfgoEC.jpg
◆ ◆ ◆
4 years ago @Edit 4 years ago
HTML
1. 指派顯示對應的note資料
2. 負責卡片正反面的區塊分割
◆ ◆ ◆
4 years ago @Edit 4 years ago
在Anki常用語法
<br>:換行
<span class="???">行內元素</span>:命名行內元素
<div class="???">區塊元素</div>:命名區塊元素
<!——註解——>(噗浪會吃語法,實為半形)
◆ ◆ ◆
4 years ago @Edit 4 years ago
Anki內建語法
<hr id=answer>:橫向分隔線
{{欄位名稱}}:對應note欄位名稱
{{FrontSide}}:可直接插入卡片正面內容
{{type:欄位名稱}}:需同時出現在卡片正反面才能運作,{{FrontSide}}語法可行,自動比對輸入資料是否符合欄位資料,用於拼字練習

條件:
{{#欄位A}} 如果欄位A是空的,中間這段顯示 {{/欄位A}}
{{^欄位A}} 如果欄位A是空的,中間這段顯示 {{/欄位A}}
◆ ◆ ◆
4 years ago @Edit 4 years ago
注意
1. 核心為劃分區塊,讓之後的CSS去處理layout
2. 可一次給予多個class name,<div class="one er trois">,即該段落有one er trois這三個class
3. 去Atom檢查有沒有錯字或缺tag
◆ ◆ ◆
4 years ago @Edit 4 years ago
◆ ◆ ◆
4 years ago @Edit 4 years ago
CSS
總之就是排版。
指定特定區塊、字串等等的樣式。
◆ ◆ ◆
4 years ago @Edit 4 years ago
在Anki常用語法
/*註解*/ (噗浪會吃語法,實為半形)

針對整張卡片的設定:
.card{
background-image: url(image.png)
}
◆ ◆ ◆
4 years ago @Edit 4 years ago
CSS常用屬性
.class名稱{
font-family: 字體名稱;
font-size: 20px;
font-weight: bold;
font-style: italic;
letter-spacing: 1px;
line-height: 1.5;
text-align: center/left/right;
color: white/#ffffff;
◆ ◆ ◆
4 years ago @Edit 4 years ago
background-color: white/#ffffff;
background-color:
rgba(255, 255, 128, 0.5); hsla(50, 33%, 25%, 0.75);
}

漸層
linear-gradient(red, yellow) 預設為上到下
linear-gradient(180deg,red, yellow)
linear-gradient(to top, yellow, red)
linear-gradient(to bottom, red 0%, yellow 100%)
◆ ◆ ◆
4 years ago @Edit 4 years ago
CSS box常用屬性
https://images.plurk.com/dZgCpBL1iMrn3so1rJ3jx.jpg
.class名稱{
max-width: 35em;
margin: 10px 11px 12px 11px;(上右下左之外距)
margin: 2em auto;(上下留2em,水平置中)
border: 1px dotted red;(粗度 樣式 顏色)
border-style: dashed none(上下dashed 左右none)
border-style: solid dotted none(上solid 左右dotted 下none)
border-radius: 10px;
padding: 10px 11px 12px 11px;(上右下左之內距) }
◆ ◆ ◆
4 years ago @Edit 4 years ago
注意
1. 字體僅支援.ttf
2. 指定資料中間有空格前後引號起來,"font MT"
3. 可一次設定多個class,用,分隔,.one, .er{}
4. 每項設定後面要加; 分隔
5. margin/height/width僅適用於block level的div,無法用於span
6. 優先順序:大集合的值&集合內指定項目的值相衝突,會採用較後面者的設定
7. 在嘗試&調整時以註解代替刪除
◆ ◆ ◆
4 years ago @Edit 4 years ago
其他
1. 抓不到深色模式的換色邏輯,可能是在主CSS裡有看到的filter,現在用盒中盒的方式也繞不過那個深色背景會被ban掉的設定
2. vertically centered?(日文字卡)有力氣可以試試假table(但很荒謬為什麼會需要用畫蛇添足的方式去解決??)
◆ ◆ ◆
4 years ago @Edit 4 years ago
*更多HTML/CSS的新手友善教學
W3Schools Online Web Tutorials教學 | MDN*想不到配色去coolors
Coolors - The super fast color schemes generator!*需要色號去Google就有選色器超好用
*更多CSS的交集差集合集選擇邏輯
(Anki用不到啦) [技術分享] CSS中的多重選擇器(Multiple Selectors)包含空白或逗號
◆ ◆ ◆
4 years ago @Edit 4 years ago
目前先這樣,都是很基本的語法:
(第一個單字是rupture (rofl)
1. 熟悉字義
https://images.plurk.com/7jqEDEm6AyzufsO9oDw7Zz.jpg https://images.plurk.com/7y08L0iD5K8gyxukXyrHMP.jpg
2. Spelling
https://images.plurk.com/34jAVjfX0I3dpcKMavy1nU.jpg https://images.plurk.com/2XDncuVj88E7LBG0Jr4ngq.jpg
styling只加了一個front division,重點在type的運用
◆ ◆ ◆
4 years ago @Edit 4 years ago
日文ㄉ先這樣:
先隨便寫一個漸層阿捏
https://images.plurk.com/1vC8l0TBfXp7DARjn82TVc.jpg https://images.plurk.com/2xXBGyOWE77GtxYojq4MgL.jpg
◆ ◆ ◆
4 years ago @Edit 4 years ago
日文CSS (Plurk Paste)
日文 HTML (Plurk Paste)
追加圓角,不知道之前怎麼可以忍受他尖角
追加置中,垂直置中待研究
◆ ◆ ◆
4 years ago @Edit 4 years ago
寫到後來發現真的要備份,不然就是養成習慣加註解 (rofl) 已經數度不小心刪掉重要參數快瘋掉(rofl)
back to top