打印JSON字符串并使用HTML和CSS格式化它

可以通过以下步骤实现：

首先，将JSON字符串解析为JavaScript对象。可以使用JSON.parse()方法将JSON字符串转换为JavaScript对象。
接下来，创建一个HTML页面，包含一个<div>元素用于显示格式化后的JSON数据。
使用JavaScript将解析后的JSON对象转换为格式化的字符串。可以使用JSON.stringify()方法将JavaScript对象转换为JSON字符串，并添加缩进和换行符以增加可读性。
将格式化后的JSON字符串插入到<div>元素中。可以使用innerHTML属性将字符串插入到<div>元素中。
最后，使用CSS样式对格式化后的JSON数据进行美化。可以使用CSS选择器和属性来设置字体、颜色、边框等样式。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        .json-container {
            font-family: Arial, sans-serif;
            font-size: 14px;
            color: #333;
            border: 1px solid #ccc;
            padding: 10px;
            background-color: #f5f5f5;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div id="json-container" class="json-container"></div>

    <script>
        var jsonString = '{"name": "John", "age": 30, "city": "New York"}';
        var jsonObject = JSON.parse(jsonString);
        var formattedJsonString = JSON.stringify(jsonObject, null, 4);

        var jsonContainer = document.getElementById('json-container');
        jsonContainer.innerHTML = formattedJsonString;
    </script>
</body>
</html>

在上面的示例中，我们首先将JSON字符串{"name": "John", "age": 30, "city": "New York"}解析为JavaScript对象。然后，我们创建一个带有id="json-container"的<div>元素，用于显示格式化后的JSON数据。接着，我们使用JSON.stringify()方法将JavaScript对象转换为格式化的字符串，并将其插入到<div>元素中。最后，我们使用CSS样式对<div>元素进行美化，使其具有合适的字体、颜色、边框和背景颜色。

这是一个简单的示例，你可以根据需要自定义CSS样式和JSON数据。