我们来实践上一节所说的一套，一共分为两步：
第一步叫做开辟一个区域， 写一段公共样式， 然后在引用。怎么写公共样式呢？
我们就在head标签中，加一对style标签，然后在style首尾标签之间，写我们需要的公用样式。
公用样式的写法，首先我们在style标签里面，我们写一个.nav之后加一个花括号{}，在花括号里面写各种各样的样式。
这样我们就完成了第一步，就是开辟一个空间写公用样式。
第二步的引用就在我们的body标签中，我们在每个a标签中通过class来引用公用样式名nav，就达到样式重用的效果了。
如果细心的同学一定发现了样式的写法有多种。
一种是写在标签内部
<h1 style="font-size: 20px; color: #f14e42;display: inline;">课后帮</h1>
另外一种就是写在head标签中的style样式标签中
<style>.nav{float: right;color: #999999;}</style>
现在我们抛出一个问题：那种样式更好呢？
那种样式更好呢？我们先不说，我们先顾左右而言他。
在HTML中，用户可以看到的部分有两类，第一部分叫内容结构（简称结构），第二部分叫样式表现（简称表现）。
这两类分别指的是什么呢？我们用现在的代码来举例子。
以上是我们现在所有写的代码，其中有些用户看的到，有些用户看不到。现在我把所有用户看不到的，都标注成灰色的颜色。
图中的黑色部分是用户可以看到的，最上面是style标签里的，都是用户看到的。然后在body部分，肯定都是用户看的到的部分了。
这些用户看的到的内容又分了两类：
其中绿色的就叫做样式表现，而红色的我们就叫做内容结构。什么意思呢？我们现在把绿色的全部都去掉。
去掉绿色的部分之后，我们发现内容一样都没少，只是样式变得难看了。所以留下来的红色部分，其实都是内容的结构。
那么我们所去掉的绿色部分，就都算作样式表现了。
我们在前面内容当中已经提到，Don't Repeat Yourself，这是我们程序设计的原则，html的设计也有一个原则，叫什么呢？
什么叫结构与表现分离？我们现在有没有做到结构与表现分离？以及为什么要结构与表现分离？
我们通过两段代码为例子，来讲述结构与表现分离。
我们主要关注在红绿的部分，这是我们说的代码1，其实就是结构表现混合了。
我们发现样式写在标签内部，期间省略100行，省略两字用绿色，表示仍然是结构表现混合的这么一个状态。
上图的代码就完全不一样了，这是结构表现分离。绿色的部分是表现部分，红色部分是结构部分。
绿色的部分大概写了30行，红色的部分大概写了100行。我们怎么去对比着两个代码的优劣呢？ 我们说我们要改版。
这是一个非常常见的情况，就是结构不变，表现大变。那么怎么做到结构不变，然后改表现呢？
那这个时候我们分别来看看这两段代码应该如何自处。
首先来看看代码1，如果我们的需求改变，需要改变某个样式，那么我们需要在整个结构表现中找需要修改的地方，
期间还有省略的100行，那可是大海捞针，但我们在来看看代码2。
代码2我们发现就会好一些，如果我们只想修改样式，不更改结构的话。那红红的那些代码，我们就不需要关系。
我们只需要在绿绿的代码中找我们需要修改的代码就ok了。那么结构与表现分离有什么好处呢？
结构与表现分离的好处就很明显了，我们叫分开管理，便于修改。所以呢？我们的问题就有答案了。
样式写法哪家强？答案非常明确了，当然是结构表现要分离。所以我们不要把样式和结构混合在一起，至少将样式写在style样式中。
那我们现在就把代码整理一下，将样式进行重用。
此时我们就将样式进行重用了，我们首先在style标签内部写一个.nav，并且将a标签后面的样式复制过来了。
紧接着我们写了一个.log样式，并且将h1标签后面的内容拷贝过去了。这就是有效的利用了样式的重用。