为了使表格更易于阅读,使用交替背景色设置行的样式通常很有帮助。设置表格样式的最常用方法之一是设置每行的背景色。这通常被称为“斑马条纹”
您可以通过使用CSS类设置每隔一行,然后定义该类的样式来实现这一点。这是可行的,但不是最好或最有效的方法。使用此方法时,每次需要编辑该表时,可能必须编辑表中的每一行,以确保每一行与更改一致。例如,如果在表中插入新行,则其下的每一行都需要更改类。
CSS使得用斑马条纹设计桌子样式变得很容易。您不需要添加任何额外的HTML属性或CSS类,只需使用:nth类型(n)CSS选择器。
:nth of type(n)选择器是CSS中的一个结构化伪类,它允许您根据元素与父元素和同级元素的关系来设置元素的样式。可以使用它根据源顺序选择一个或多个图元。换句话说,它可以匹配父元素的特定类型的第n个子元素。
字母n可以是关键字(如奇数或偶数)、数字或公式。
例如,要使用黄色背景色设置其他段落标记的样式,CSS文档将包括:
p:nth-of-type(odd) {background: yellow;}首先,按照通常用HTML编写的方式创建表。不要向行或列添加任何特殊类。
在样式表中,添加以下CSS:
tr:nth-of-type(odd) {background-color:#ccc;}这将从第一行开始,每隔一行设置一个灰色背景色的样式。
您可以对表中的列执行相同的样式设置。为此,只需将CSS类中的tr更改为td。例如:
td:nth-of-type(odd) {background-color:#ccc;}选择器中使用的公式语法为a+b。
例如,如果要为每第三行设置背景色,则公式应为3n+0。CSS可能如下所示:
tr:nth-of-type(3n+0) {background: slategray;}如果您对使用类型选择器的伪类nth的公式方面感到有点害怕,请尝试使用:nth Tester站点作为一个有用的工具,它可以帮助您定义语法以实现所需的外观。使用下拉菜单选择类型的第n个(您也可以在这里试验其他伪类,例如第n个child)。
...长一段时间了,所以是时候学习基本知识了。它是什么,如何工作,以及如何在HTML中编写一些常用元素。 ...
...如果想要修改布局和网站,也必须简单地理解某些代码是如何工作和行为的&书信电报;表>和<部门>是一个人在设计网站时发现的两种不同类型的标签。这两个标签用于控制网站的布局和外观。 现在,当一...
在我们关于如何创建网站的夜校系列的第一部分中,我们学习了一些关于网页的基本知识:HTML。在今天的课程中,我们将开始使用样式和CSS将衣服放到我们的网站上。上面的视频将引导您了解将样式应用于HTML文档中元素的三种...
...使用浏览器对其进行解析都很好,但是查看文档时文档将如何显示?XML不是一种表示语言。用XML编写的文档将完全没有格式。 如何查看xml 在浏览器中查看XML的关键是级联样式表。样式表允许您定义XML文档的各个方面,从文...
...多数标准web浏览器中,摘要不会显示在网页上。 下面是如何编写带有摘要的简单表格: summary="This is a sample table that contains filler information. The purpose of this table is to demonstrate a summary."> 第1列第1行 第2列第1行 ...
浏览器处理空白的方式一开始不是很直观,特别是当您比较超文本标记语言相对于文字处理程序处理空白的方式时。在文字处理软件中,您可以在文档中添加大量间距或制表符,这些间距将反映在文档内容的显示中。这种所见...
动态HTML实际上并不是一种新的HTML规范,而是一种查看和控制标准HTML代码和命令的不同方式。 在考虑动态HTML时,您需要记住标准HTML的特性,特别是一旦从服务器加载页面,它将不会更改,直到服务器收到另一个请求。动态HT...
如果您熟悉CSS如何设置HTML页面的样式,您将了解格式化的概念。在XML标记语言出现之初,显示数据有点复杂,但随着样式表的出现,情况发生了变化。 通过添加样式表引用,可以将XML代码格式化并显示为网页。如果没有CSS或...
...网页吗?也许你没有。如果是这样,你有一些选择。 如何阻止使用css打印网页 使用CSS很容易防止人们打印您的网页。您只需创建一个名为“print.css”的单行样式表,其中包括以下一行css。 body { display: none; } 这一样式将...