内部样式表

源码下载

前面课程讲过很多样式属性style的属性案例，平时常说的CSS层叠样式表Cascading Style Sheets就是关于网页样式的设计标准，就是具体的style属性。下面在《表格元素table》这一节课代码基础上修改。

代码解析

1.th元素添加样式

background-color: #777777;控制的tr元素背景颜色， color: white定义的是tr元素中文字的颜色，通过英文词组也可以判断两个颜色的区别。

 <th style="background-color: #777777;color: white">标签</th>
 <th style="background-color: #777777;color: white">含义</th>
 <th style="background-color: #777777;color: white">分类</th>

2.td元素添加样式

th元素有三个，一一去添加style属性还不算麻烦，td元素的数量比较多，一一添加style属性很麻烦，如果你是W3c组织你会怎么制定CSS样式标准？对于这种情况，就引入了内部样式表概念，像上面一样样式定义在标签里面称为内联样式表,向下面把style属性嵌在head标签里面的情形就称为内部样式表。

<head>
    <style>
        td{
            background-color: #999999;
            color: white;
        }
    </style>
</head>

首先在head标签里面嵌入一个style标签，告诉浏览器里面的代码都是样式属性。然后你想定义的是所有td元素，那就通过td元素名字告诉浏览器我下面的样式作用与所有td元素而不是别的元素，样式的属性都定义在一个大括号中，每一个属性定义的格式和内联样式表没什么不同，都是“属性名:属性值”，结尾添加分号结尾，注意冒号是英文输入模式。

3.把th元素样式重新定义在style标签中

th、td元素的样式属性写在各自大括号范围内

<style>
        td{
            background-color: #999999;
            color: white;
        }
        th{
            background-color: #777777;
            color: white;
        }
</style>

4.style边框属性

把frame="box"属性设置删除替换为style="border: 1px solid black"，你会发现与原来的效果一样。所有的块元素都具有style属性中的border边框属性，通过border可以设置边框的粗细、颜色，前面说过能用CSS样式属性style实现的，尽量不用元素自身用于外观样式的属性。border属性的三个值依次书写，空格间隔开，以后会遇到很多这种写法，1px表示线宽是一个像素，solid顾名思义是实线，那也就是说有其他虚线等样式线条，black定义线条颜色，当然你也可以自定义颜色，可以用十六进制的写法，也可以使用颜色对象的英文单词书写。

<table rules="all" style="border: 1px solid black">

CSS样式属性

属性	含义
background-color	背景颜色
color	内容颜色

总结

对于内部样式表，批量选择元素定义样式选择元素对象除了通过元素名还有很多其他的方式，没有案例作为依托，直接总结太空，所以就先不总结。