websim.ai HTML+CSS 基礎教學

學習單下載
https://docs.google.com/document/d/1FVwxhEc-sTyc0dqjTyFCVOCabTSA6Bx6ydtK7Exzo74/edit?usp=sharing 

學習單1

認識標題格式


這是標題1

這是標題2

這是標題3

這是標題4


這是標題1

這是標題2

這是標題3

這是標題4



貼上你的答案:











文字類相關屬性

文字類相關屬性

以下是常見的文字類 CSS 屬性,可應用於

元素:

font-size: 設定文字大小。

font-size: 16px;

font-weight: 設定文字粗細。

font-weight: bold;

文字內容 color: 設定文字顏色。

color: red;

font-family: 設定字型。

font-family: Arial, sans-serif;

font-style: 設定文字樣式(例如:斜體)。

font-style: italic;

font-variant: 設定小型大寫字母或其他變體。

font-variant: small-caps;

文字對齊 text-align: 設定文字對齊方式。

text-align: center; /* left, right, justify */

文字間距 letter-spacing: 設定字母之間的間距。

letter-spacing: 2px;

word-spacing: 設定單字之間的間距。

word-spacing: 5px;

line-height: 設定行高。

line-height: 1.5;


文字裝飾 text-decoration: 設定裝飾效果(如下劃線)。

text-decoration: underline; /* none, overline, line-through */

text-transform: 設定文字轉換為大寫、小寫或首字母大寫。

text-transform: uppercase; /* lowercase, capitalize */

文字陰影 text-shadow: 設定文字陰影效果。

text-shadow: 2px 2px 4px gray;

背景與邊框 background-color: 設定文字背景顏色。

background-color: yellow;

border: 設定邊框。

border: 1px solid black;


顯示與溢出 white-space: 控制空白與換行行為。

white-space: nowrap; /* normal, pre, pre-wrap */

overflow-wrap: 控制單字是否換行。

overflow-wrap: break-word; /* normal */

其他屬性 direction: 設定文字方向(從左到右或從右到左)。

direction: rtl; /* ltr */

visibility: 設定文字是否可見。

visibility: hidden;


以上屬性均可在 CSS 中應用到,以控制其文字相關的外觀和行為。



學習單2 基本預設格式


題目



貼上你的答案:










學習單3 自訂字體形式





學習單4 設計一個websim 數學小幫手

https://websim.ai/@Jovan123fuckgod/ai-text-generator/

請用對話方式生成數學小幫手