通过使用CSS对元素进行样式化，可以有多种方式来表示数值的、图表式的数据。使用CSS样式你的数据防止您依赖静态图像，并增加您的内容的可访问性。
下面< >强，您将阅读8个优秀的技巧，将元素样式化为美丽的，易于理解的图表和图形．
1.条形图的CSS
视图演示
本教程将展示三种绘制数据图形的方法。的< em >基本CSS柱状图例子包括一个< div >来包含图形，并样式化< >强元素作为块元素，并使用百分比宽度来调整宽度。< em >这是对这项技术的很大改进是用一段话吗< p >元素而不是< >强标记以获取语义正确的HTML。
另外两个示例使用定义列表和无序列表来绘制多个条形图。
2.使用Web标准访问数据可视化
查看演示#1 -查看演示#2 -查看演示#3
作者威尔逊矿工讨论了可访问的、符合标准的数据可视化技术的概念，简要介绍了其优点、限制和替代方案。A List Apart文章展示了使用无序列表的基本结构的三种数据可视化技术。
3.CSS垂直条形图
Eric Meyer向我们展示了另一种使用无序列表绘制垂直条形图的技术，类似于从苹果到橘子的“条形图的CSS”技术。
4.使用百分比背景图像创建图表
在这种技术中，您使用预先制作的背景图像在适当的数据中添加阴影。这种技术的缺点是，您会受到预先填充的背景图像的限制，并且为满足您的需求而制作更多的背景图像将增加分配给数据的类的数量——增加CSS和HTML文件的文件大小，以及由于背景图像而增加渲染页面所需的HTTP连接的数量。
5.纯CSS数据图
本例使用定义列表进行标记。一个< span >元素在< dd >定义列表项作为调整高度的元素，以遮蔽适当的区域。一个< em >元素用于显示阴影区域的数值表示，绝对位于条的中间。
6.CSS散点图
一个散点图是另一种绘图二维数据的好方法。在本例中，每个数据点都是可单击的，因此对该技术的一种可能的修改是使用模态窗口它显示关于特定数据点的额外信息。
7.定义列表柱状图
该技术展示了将定义列表样式化为水平柱状图的两个示例。为每个定义列表项分配一个类，该类使用百分比单位调整其宽度。
8.可访问的条形图
该技术展示了一种语义的、可访问的柱状图方法，它使用表格作为柱状图的基本结构，并使用CSS将背景图像拉伸到适当的宽度。
