1.2　第二步：隐藏题目

游戏中通常会有一些可解锁的物件。比如可解锁的角色、可解锁的支线任务和可解锁的关卡等。对于本例来说，也许会有可解锁的题目。这听起来是不是有些小题大做呢？其实不是。只因为刚才问答设计得一目了然，所以不需要此功能而已。但有时就不同了，比方说，像Mario这样的游戏，玩家不可能同时去玩所有关卡，所以开发者也许会把某些关卡隐藏起来。同理，假设问答游戏有100道题，而不是10道题的话，那么你也许就会觉得不太应该把所有题目全都显示出来了。

如何隐藏网页中的内容呢？有很多办法，比如，可以把问题放在不同的页面中，但此处为了简单起见，我们采用的办法是：通过CSS文件，使某些内容不在网页上出现。新建一个文件，将程序清单1.3中的代码写进去，把它存为main.css，并放在与index.html相同的目录下。

程序清单1.3　隐藏网页内容所用的main.css文件

#quiz中所列的样式，会应用在所有id属性为quiz的容器元素及其内容之上，比如本例最外围的div元素及其中的全部内容都要受其影响。display:none的意思是，把id属性为quiz的这个div所含的全部内容都隐藏起来。如果想选定id属性为another-quiz的元素，那么可以把样式选择器写成#another-quiz。若要选取class属性为quiz的元素，则需要把选择器中的#号替换为圆点，也就是改成.quiz。

如果选择器是基于标签的，那么在标签名之前不用加字符，比如，要选择body标签，就不需要在body之前再写#号了。margin-left:50px;这行代码的意思是：给左边留出一定的空白，令网页内容靠右一些。注意这两个样式块的格式。首先写选择器，其次写左花括号，接下来写样式信息，最后写右花括号。在样式信息中，首先写css属性名，后面跟一个冒号，然后写css属性值，这个值会影响到相应元素的样式，最后，在行尾写一个分号。

对于刚接触网页开发的读者来说，这些语法可能有点复杂，尤其是它们还要和html文档中的标签相搭配，而且又要使用id、class等属性，同时掌握这么多内容，确实有些难。不过好在CSS与HTML的基础知识也就是这么多了。刚开始学的时候，也许会经常出错，比如把本该用圆点的地方误写为#号，比如忘了加分号或右花括号，比如其他各种拼写错误等。其实，高手也经常犯这些错误。如果某段代码无法正确运行，别着急，仔细检查，看看有没有写错的地方。

保存index.html文件并用浏览器将其打开之后，将会看到与图1.1差不多的画面，只是网页的缩进变了，因为我们为body元素运用了样式。