内部样式表
先学习《内部样式表》这一节内容。然后思考如果标签栏td元素、含义栏td元素、分类栏td元素的内经颜色不同，如何去定义。 具体代码如下。
class属性
style标签里面定义class样式
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
td元素定义class属性
<tr> <td class="red">table</td> <td class="green">最外层标签</td> <td class="blue">闭合标签</td> </tr> <tr> <td class="red">tr</td> <td class="green">创建行</td> <td class="blue">闭合标签</td> </tr> <tr> <td class="red">th</td> <td class="green">创建表格单元(表头)</td> <td class="blue">闭合标签</td> </tr> <tr> <td class="red">td</td> <td class="green">创建表格单元(内容)</td> <td class="blue">闭合标签</td> </tr>
观察上面的代码你应该能够看出规律，首先在style标签里面定义样式属性的时候，每一个大括号前面的名字和上节课有所不同，不是元素的标签名，而是自定义命名，然后名字前面加一个标记符号点(.)。 然后在td元素标签里面，引入一个class属性，属性值就是你在style标签里面自定义使用点符号标记的名字。这样的话，浏览器解析代码的时候就会知道，一个元素通过class属性引用了style标签中的那一个大括号中样式集合。
大家可以注意代码里面td元素通过td元素名字和class属性方式同时定义了背景样式background-color，但是通过标签名字定义的灰色背景颜色并没有起作用，三部分td区域的颜色分别是红绿蓝，显示的是来自class的定义。 这其实是优先级的问题。通过class属性定义的样式会覆盖通过元素名（标签名）定义的样式，这一点也好理解，如果让你规定优先级你也应该把杀伤面积小的定义为更高优先级，通过元素名字定义的样式，整个html文档中所有的该类元素都会被约束。 但实际的工程中，尤其复杂的页面使用同一种元素的的地方很多，不可能样式都一样。class属性恰恰可以解决这个问题，通过class方式定义一个属性，哪个元素引用class名字，哪个元素就会有对应的样式，覆盖原来的元素名字定义的属性和浏览器默认的 元素属性。
id属性
id属性和class属性类似，都可以用来标记一个元素，区别在于，所有的元素可以有共同的class属性，也就是属性值相同，而W3c规定id属性元素的id属性值不能重复，元素的id顾名思义就像人的身份证号码是唯一的。 它也可以用于定义样式，不过一般大的工程中都是使用class而非id定义的样式，如果不理解，也没关系，只有你体验过从原生代码逐步封装构建一个网站就会明白，也许有一天你会回来看这一句话。id岂不是多余了，那肯定不是，在其他的方面， 也有很大用途。
使用id属性方式定义第一个td元素的字体颜色。
style样式部分代码
#black{
color: black;
}
在样式style标签中，class属性使用符号点标记，id属性使用符号(#)标记，都是英文状态下的输入。
td部分代码
<td class="red" id="black">table</td>
和添加class属性一样引入id属性。每种元素基本都有自己的专有属性，class和id属性属于通用属性非专用属性，只要你进行定义，所有的元素都可以拥有。
优先级总结
style标签里面通过元素名td方式定义了所有td元素字体颜色为白色，通过id的方式#black定义了第一个td元素字体颜色为黑色，第一个td元素的字体显示为黑色，这里同样可以看出id的优先级高于class。你可以测试一下，
就可以发现三种方式定义样式的优先级顺序是：