如果我们启动应用程序，您将看到它的功能没有改变。一切都照常进行。这在软件开发中很少发生。在继续之前，让我们先体验一下这种感觉。
在渲染器进程中添加样式
当我们在Electron应用程序中引用样式表时，很少会发生意外。稍后，我们将讨论如何使用Sass而不是Electron。 在电子应用程序中添加样式表与在传统web应用程序中添加样式表没有多大不同。尽管如此，一些细微差别还是值得讨论的。
让我们从将style.css文件添加到应用程序目录开始。我们将以下内容添加到style.css中。
列表2.10 添加基础样式: ./app/style.css
html { box+sizing: border+box; } *, *:before, *:after { box+sizing: inherit; +使用页面所运行 } |的操作系统的 body, input { |默认系统字体 font: menu; <------+ }最后一项声明可能看起来有点陌生。它是Chromium独有的，允许我们在CSS中使用系统字体。这种能力对于使我们的应用程序与其原生本机程序相适应非常重要。在macOS上，这是使用San Francisco的唯一方法，该系统字体附带El Capitan 10.11及以后版本。
在Electron应用程序中使用CSS，这是我们应该考虑的另一个重要的区别。我们的应用程序将只在应用程序附带的Chromium版本中运行。我们不必担心跨浏览器支持或兼容性考虑。正如在第1章中提到的，电子与相对较新版本的Chromium一起发布。这意味着我们可以自由地使用flexbox和CSS变量等技术。
我们像在传统浏览器环境中一样引用新样式表，然后将以下内容添加到index.html的<head>部分。 我将包含链接到样式表的HTML标记—因为，在我作为web开发人员的20年里，我仍然不记得如何第一次尝试就做到这一点。
列表2.11 在HTML文档中引用样式表: ./app/index.html
<link href="http://www.likecs.com/style.css" type="text/css">实现用户界面
我们首先使用UI所需的标记更新index.html。
列表2.12 为应用程序的UI添加标记: ./app/index.html
<h1>Bookmarker</h1> <div></div> <section> <form> <input type="url" placeholder="URL"size="100" required> <input type="submit" value="Submit" disabled> </form> </section> <section></section> <section> <button>Clear Storage</button> </section>
我们有一个用于添加新链接的部分，一个用于显示所有精彩链接的部分，以及一个用于清除所有链接并重新开始的按钮。你的应用程序中的<script>标签应该和我们在本章早些时候讨论时一样，但是以防万一，我在下方给出代码:
<script> require('./renderer'); </script>
标记就绪后，我们现在可以将注意力转向功能。让我们清除app/renderer.js中的所有内容，重新开始。在我们一起学习的过程中，我们将需要处理添加到标记中的一些元素，所以让我们首先查询这些选择器并将它们缓存到变量中。将以下内容添加到app/renderer.js。
列表2.13 缓存DOM元素选择器: ./app/renderer.js
const linksSection = document.querySelector('.links'); const errorMessage = document.querySelector('.error-message'); const newLinkForm = document.querySelector('.new-link-form'); const newLinkUrl = document.querySelector('.new-link-url'); const newLinkSubmit = document.querySelector('.new-link-submit'); const clearStorageButton = document.querySelector('.clear-storage');
回顾清单2.12，您会注意到在标记中我们将input元素的type属性设置“url”。如果内容不匹配有效的URL模式，Chromium将把该字段标记为无效。不幸的是，我们无法访问Chrome或Firefox中内置的错误消息弹出框。这些弹出窗口不是Chromium web模块的一部分，因此也不是Electron的一部分。现在，我们在默认情况下禁用start按钮，然后在每次用户在URL输入框内中键入字母时检查是否有一个有效的URL语法。
如果用户提供了一个有效的URL，那么我们将打开submit按钮并允许他们提交URL。让我们将这段代码添加到app/renderer.js中。