<!DOCTYPE html> <html> <title>線上 CSS 編輯器</title> <head> <style> div{ width:200px; height:125px; padding:10px; background-color:red; border:1px solid black; } #box{ transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -moz-transform:rotate(30deg); /* Firefox */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ -o-transform:rotate(30deg); /* Opera */ background-color:yellow; } </style> </head> <body> <div>即時 CSS 編輯器</div> <div id="box">你好，世界！</div> </body> </html>
使用該線上 CSS 編輯器（CSS-3 版本）編輯、執行和直接在瀏覽器中線上共享 CSS 程式碼。該線上編譯器可以讓你使用最新版本 CSS-3 舒適地編輯和編譯 CSS 程式碼。
如何使用線上 CSS 編輯器？
編寫和執行程式碼
- 在“原始碼”選項卡下直接編寫程式（或貼上進去）。
- 如果你想儲存程式，請轉到“專案”選單並儲存它。
- 你無需儲存程式即可直接執行它，只需點選“執行”按鈕即可。
如何輸入使用者輸入資訊？
最新版本的線上 CSS 編輯器允許在執行時從終端視窗提供程式輸入，與你在自己的計算機上執行程式的方式完全相同。因此，只需執行程式，並從右側的終端視窗提供程式輸入資訊（如果需要）。
鍵盤快捷鍵
以下是我們編輯器的關鍵字快捷鍵
| 快捷鍵 | 描述 |
|---|
| ⌘ + Enter | 執行程式 |
| ⌘ + S | 儲存專案（需要登入） |
| ⇧ + ⌘ + S | 另存為專案 |
| ⌘ + P | 新建專案 |
| ⌘ + G | 共享專案 |
| ⌘ + Z | 撤消編輯 |
| ⌘ + Y | 恢復編輯 |
| ⌘ + A | 選擇所有文字 |
| ⌘ + X | 剪下所選文字 |
| ⌘ + C | 複製所選文字 |
| ⌘ + V | 貼上複製的文字 |
| ⌘ + F | 搜尋文字 |
| ⌘ + ⌥ + F | 替換文字 |
| 快捷鍵 | 描述 |
|---|
| Ctrl + Enter | 執行程式 |
| Ctrl + S | 儲存專案 |
| Shift + Ctrl + S | 另存為專案 |
| Ctrl + G | 共享專案 |
| Ctrl + Z | 撤消編輯 |
| Ctrl + Y | 恢復編輯 |
| Ctrl + A | 選擇所有文字 |
| Ctrl + X | 剪下所選文字 |
| Ctrl + C | 複製所選文字 |
| Ctrl + V | 貼上複製的文字 |
| Ctrl + F | 搜尋文字 |
| Ctrl + H | 替換文字 |
儲存和共享專案程式碼
線上儲存 CSS 專案
你可以將 CSS 專案儲存在我們這裡，以便以後訪問該專案。要儲存專案，你需要向我們建立登入 ID。因此，在你儲存專案之前，請使用本頁面右上角給出的連結建立登入 ID。
線上共享 CSS 專案
你可以使用此功能將 CSS 程式碼與你的老師、同學和同事分享。只需點選分享按鈕，它就會建立一個短網址，該網址可以透過電子郵件、WhatsApp 甚至社交媒體進行共享。共享的連結將在三個月內未啟用時被刪除。
編輯器的更多特性
- 主題 - 您可以在“設定”選單下的“編輯器主題”選項中更改當前編輯器的主題。
- 字型大小 - 您可以在“設定”選單下的“字型大小”選項中更改編輯器/編譯器的字型大小。
- Tab 大小 - 您可以在“設定”選單中的“Tab 大小”選項中更改 Tab 大小。
- 顯示/隱藏行號 - 您可以使用“設定”選單中的“顯示行號”或“隱藏行號”選項來顯示/隱藏程式碼行號。
- 還有許多其他功能。
為什麼要使用線上 Css 編輯器？
使用線上 Css 編輯器執行 Css 程式碼有許多好處
- 平臺獨立性：您可以從任何裝置執行程式碼，無需作業系統支援。
- 便利性：使用本軟體時無需安裝任何軟體。
- 無需設定：執行程式碼無需進行額外設定。
- 最新版本：我們的線上編譯器/編輯器/終端始終是最新的。
