我对编码非常陌生，所以请温文尔雅。我正在学习的一所大学给了我一个项目。构建一个在线交互式教程，与codecademy等非常类似。问题是我没有太多使用javascript或jquery的经验，因为我还没有学过它们。在项目结束时，他们想要的是一个在线互动教程，带有html和css的实时预览。问题是，如果没有任何帮助，我不知道如何去做这一切，这就是我在这里的原因。
我已经做了相当多的研究，并发现了一些非常好的前景来帮助我实现这一点。他们是王牌编辑器和codemirror，问题是我找不到可以帮助我的教程。
我已经能够让html与现场预览，但不是css的工作。这是我的jquery代码。
代码语言：javascript
复制
//initializing ace editor
var htmleditor = ace.edit("htmleditor");
htmleditor.setTheme("ace/theme/twilight");
htmleditor.session.setMode("ace/mode/html");
var csseditor = ace.edit("csseditor");
csseditor.setTheme("ace/theme/twilight");
csseditor.session.setMode("ace/mode/css");
//html editor
function showHTML() {
$('#return').html(htmleditor.getValue());
}
function showHTMLInIFrame() {
$('#return').html("");
}
htmleditor.on("input", showHTMLInIFrame);
//css editor
function showCss() {
$('#return').css(csseditor.getValue());
}
function showCssInIFrame() {
$('#return').css("");
}
csseditor.on("input", showCssInIFrame);我已经将所有必需的js文件附加到我的html中。任何帮助都会非常感谢，即使你只是给我指明了正确的方向。不过，如果有人能想出解决我所面临的问题的办法，请让我知道。
问候
菲尔
html5新手入门：【科普】CSS超链接伪类是什么？
91.2%的童鞋已前往
本周及上周福利（回复“书”领取）：
1、《html教程》（入门科普，非常非常适合新手！）
2、《HTML.5与CSS.3权威指南》（赶紧收藏，以后用得着）
一、超链接伪类简介
在所有浏览器中，超链接的样式如下：
我们可以看出链接在鼠标点击不同时期的样式是不一样的。
（1）默认情况：字体为蓝色，带有下划线；
（2）鼠标点击时：字体为红色，带有下划线；
（3）鼠标点击后：字体为紫色，带有下划线；
注：点击时，指的是点击超链接的一瞬间，字体是红色的。这个样式变化是一瞬间的事情。
1、如何去除超链接下划线
超链接默认情况下带有下划线，看起来挺难看的，而且用户体验也不好。在CSS中，一般使用“text-decoration:none”来去除超链接下划线，我们在“下划线、删除线和顶划线”这一节已经详细讲解了text-decoration属性。
语法：
text-decoration:none;
举例：
课栈网
课栈网
在浏览器预览效果如下：
分析：
由于第二个a标签应用了“text-decoration:none”，因此它的下划线被去掉了。
2、如何定义超链接伪类
在CSS中，我们使用超链接伪类来定义超链接在不同时期的不同样式。
语法：
a:link{CSS样式}
a:visited{CSS样式}
a:hover{CSS样式}
a:actived{CSS样式}
说明：
表1 使用伪类定义动态超链接
定义这四个伪类，必须按照“link、visited、hover、active”的顺序进行，不然浏览器可能无法正常显示这4种样式。请记住，这4种样式定义顺序不能改变！
大家可能觉得比较难把这个样式顺序记忆。没关系，对于掌握俺有一个挺好的方法。“lovehate”，看到了么，这样就记住了。我们把超链接伪类的顺序规则称为“爱恨原则”。大家以后写代码的时候想起“爱恨原则”，自然而然就写出来了。
举例：
课栈网
在浏览器预览效果如下：
鼠标经过样式如下：
点击链接时样式如下：
注：点击链接是一瞬间的事情，大家请留意一下超链接的样式变化。
在此学习了CSS超链接伪类，我们可以使用CSS伪类向文本链接添加复杂而多样的样式。
3、深入了解超链接伪类
大家可能开始有疑问了，是不是每一个超链接都必须要定义4种状态的样式呢？答案是否定的。一般情况下，我们只用到2种状态：未访问状态和鼠标经过状态。大家仔细观察一下绿叶学习网的导航就知道了，绿叶导航也只是定义了这2种状态。
未访问状态，我们直接在a标签定义就行了，没必要使用“a:link”。
语法：
a{CSS样式}
a:hover{CSS样式}
举例：
课栈网
在浏览器预览效果如下：
鼠标经过时样式如下：
提示：
1、很多人觉得按照正常人思维来说，超链接样式的定义顺序应该是“未访问样式、鼠标经过样式、点击时样式、访问后样式”，但是为什么定义超链接样式必须要按照“未访问样式、访问后样式、鼠标经过样式、点击时样式”才能在浏览器中正常显示这4种样式呢？
这个问题是新手经常问到的问题，其实这是W3C官方规定的，也许官方的思维跟我们的不一样。规则这种东西嘛，一般都是官方定的，就像交通规则一样，我们只需要遵守就行了，没必要纠结为什么绿灯走而红灯停。
不过我们也有很好的记忆方法，大家不用担心。那就是“爱恨原则”。爱她，是因为超链接伪类让超链接变得更“美丽”；恨她，是因为顺序太难记。所以我们对她又爱又恨。
