初探CSS 中篇

本来想好怎么偷懒了，正巧看到初探CSS上篇有同学催更，感谢支持。

这次更新的初探CSS下篇，我们介绍一下CSS的表格、边框、填充。CSS的这些功能，让你的页面更加的美观、实用。

CSS表格：

默认的表格是没有边框的，如果想要给页面的表格加上边框可以使用border，即：

table, th, td
{
	border:1px solid black;
}

意思是给表格加上了1px粗细的边框。

运行上面的代码，我们可以看到这个边框是两层的，如果想用一根线对表内元素进行分离的话，这种边框叫做折叠边框，使用border-collapse实现，例如：

table
{
	border-collapse:collapse;
}

另外，我们最常用的就是设置表格的宽度和高度了：使用width在table中设置宽度、使用height在th中设置高度，例如：

table
{
	width:100%;
}
th
{
	height:50px;
}

注意，这里的宽度是适应页面的，当你扩大和缩小页面，宽度一直为页面的100%。

表格内文字可以设置对齐方式，和其他文本一样：在td中使用text-align。或者设置垂直对齐vertical-align。表格内容与边框的距离使用padding设置填充。表格颜色在边框宽度后加相应颜色，填充背景色在td中可以使用background-color设置。

和表格类似的就是CSS的边框，通过设置border-style的值，可以选择不同类型的边框，例如none无边框、dashed虚线边框、solid实线边框、还有三D边框groove、inset等等。

其中，边框的宽度使用border-width设置。颜色通过border-color设置。还可以控制单独一个边的状态，使用：border-top-style、border-right-style等等。

在边框再向外一层，叫做CSS模型的轮廓outline。使用使用和border同等级的outline定义边框外的轮廓。

在轮廓之外，还可以定义外边距margin，margin的本意是草稿纸边上的空白区域，是没有内容的，定义了夸张的margin，就像给元素建立了一个空气墙一样，margin的四个方向使用top、bottom、right和left定义宽度。

刚才我们说的填充padding，与margin相对，也叫做内边距。

以上就是CSS的盒子模型，整个结构就像把内容放在一个盒子里面。说完CSS盒子模型，我们再说一下关于分组和嵌套。

如果想给多个元素设置为相同的格式，可以使用分组选择器，即：

h1,h2,p
{
	color:green;
}

这样的效果就是用很少的代码把三个元素设置为了相同的颜色格式。

此外，还有一个工具叫做嵌套选择器。

例如，我们定义：

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

那么，文档中的<p>就是蓝色的文本字体，居中的段落格式。而在<div class=“marked”>中的<p>就是白色字体，红色背景，居中格式。而<p class=“marked”>的格式则是带了下划线。