一些值得注意的地方

 

在w3school上学习html&css，发现一些值得注意的地方，记录下来。

1.根据它们的意义使用元素，而不是根据它们的外观

我们中一些人已经陷在了一个坏习惯中，当我们仅仅需要一个大号字的文本时使用h1，或者在我们需要在前面加一个圆点符号时使用 li。就像我们在前面的章节讨论过的，浏览器一直都习惯于将设计属性强加于 HTML 元素之上。我们都一直习惯于认为，h1 意味着大号字，而li意味着圆点，或者 blockquote 意味着文本缩进。我们中的大多数人还在使用结构化元素模拟表现效果的方式来胡乱地写作 HTML。

同样地，假如设计师希望所有的标题使用相同的字号，她会将所有的标题设置为 h1，即使这么做毫无结构化语义可言。

<h1>这是主标题，在我将文本按照提纲格式组织的情况下。</h1>

<h1>这不是主标题，但是我希望它与上面的标题使用一样的字体，但是我不知该如何使用CSS。</h1>

<h1>这根本不是一个标题。但是我非常希望页面中的文字使用相同的字体，以达到我希望的，

如果我了解CSS，就可以在不打乱文档结构的情况下达到这个设计。</h1>

我们必须把我们的小把戏放到一边，然后开始根据元素的语义来使用它们，而不是根据它们看上去的样子。实际上，h1可以成为你希望的任何样子。通过 CSS，h1 可以成为非粗体的小号的罗马字体，而 p 文本可以成为粗体的大号字，li 也可以没有圆点（你或者可以使用小猫小狗或者公司标志的 PNG,GIF 或者 JPEG 图片取而代之）等等。

从今天开始，我们将要使用 CSS 来决定元素的外观。我们甚至可以根据元素在页面中或者在站点中所在的位置来改变它们的外观。 CSS 可以将表现从结构中彻底抽离，并且允许你按照你喜欢的样式来格式化任何元素。

 

 

2.使用结构化元素，而不是无意义的垃圾

由于我们已经忘记或者根本不知道 HTML 和 XHTML 的用途是传达结构化的意义，许多 HTML 争论者这样使用标签来插入列表：

项目一<br />

项目二<br />

项目三<br />

考虑一下使用有序或者无序列表取而代之：

<ul>

<li>项目一</li>

<li>项目二</li>

<li>项目三</li>

</ul>

"但是li给我一个圆点，而我不需要圆点！"你也许会这么说。根据上面的章节，CSS不对元素被期望的外观做任何假定。它等待你来告诉它你所期待的元素外观。关闭圆点是 CSS 的最基本的能力。它有能力使列表看起来和普通文本没有两样，也可以使列表看起来像图形导航栏，具有完整的反转效果。

所以，请使用列表元素来标记列表。相似地，使用 strong 来代替 b，使用 em 代替 i，等等。在大多数桌面浏览器缺省状态下，strong 的显示效果和 b 相同，而 em 和 i 相同，同时也可以在不破坏文档结构的情况下创建你期待的视觉效果。

 

 

3.和 id 一样，class 也可被用作派生选择器：

.fancy td {

         color: #f60;

         background: #666;

         }

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

元素也可以基于它们的类而被选择：

td.fancy {

         color: #f60;

         background: #666;

         }

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">

你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意，class 为 fancy 的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。

 

 

总结一下，td.fancy 可以理解为 td(s) which class = ‘fancy’

.fancy td可以理解为td(s) which there is a td’s class = ‘fancy’ in the table or div