使用CSS设置表格隔行变色

html-css021

使用CSS设置表格隔行变色,第1张

在CSS中可使用:nth-child()选择器来实现表格隔行变色效果。:nth-child()选择器用于根据元素在一组兄弟中的位置来匹配元素；它匹配第n个子元素。语法：其中arg是表示匹配元素的模式的参数；它可以是一个数字（number）、一个关键字（odd 或 even）或一个函数式。想要隔行设置表格的行颜色需要使用到关键字（odd 或 even），下面就来介绍一下： ●  odd ：表示位置为奇数的元素，即1,3,5等。 ●  even： 表示位置为偶数的元素，即2,4,6等。示例1： 为在表中交替的偶数行设置颜色 效果图：示例2： 为在表中交替的奇数行设置颜色 效果图： 更多 web开发 知识，请查阅 HTML中文网 ！！

<style>

tr{ width: 200px height: 40px border:1px #000 solid display: block}

/* 双行颜色 */

tr:nth-child(2n){ background: red}

/* 单行颜色 */

tr:nth-child(2n+1){ background: yellow}

</style> <body>

      <table border="0">

         <tr></tr>

         <tr></tr>

         <tr></tr>

         <tr></tr>

        </table>

</body>

在CSS中，line-height被用来控制行与行之间垂直距离。也可以使用letter-spacing:*px来控制文字间距，*px是指间距像素。

不过，行间距与半行间距，还是取决于CSS中的line-height。

默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。可以定义line-height属性来覆盖初始值：p｛line-height:140%｝。

那5种line-height写法，可以在font属性中缩写。line-height的值紧跟着font-size值使用斜杠分开，如：<font-size>/<line-height>。

实例：body{font:100%/normal  arial} , body{font:100%/120%  arial} ,body{font:100%/1.2  arial}  ,body{font:100%/25px  arial}