<!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 代码有许多好处
- 平台独立性：您可以从任何设备运行代码，无需操作系统支持。
- 便利性：使用本软件时无需安装任何软件。
- 无需设置：运行代码无需进行额外设置。
- 最新版本：我们的在线编译器/编辑器/终端始终是最新的。
