前言：

大家有没有注意到在有些网站中，当我们打开F12的时候，里边会有console内容，这些内容还是有样式的，如果之前没有见到过，你可以打开百度首页，按下F12，里边会有百度的招聘信息，

我们自己写的console.log()，

在浏览器中是没有样式的，这是怎么做到的呢？

内容：

1、在console.log();中在要打印的内容前加上‘%c’，然后在内容后边用逗号隔开，写自己样式，这样就可以实现带样式的打印，代码如下

console.log('%c 这是一个测试','color:red;font-size:50px')

这样写就会打印出一行红色的，字体大小是50px的文字，效果如下：

2、我们也可以在这个console中添加背景图片，代码如下：

1. console.log('%c 这是一个测试','color:red;font-size:50px;width:300px;height:80px;background:url("http://nowre.com/uploads/feature/feature_header_1435686903_FEATURE-TOP17.jpg");background-size:100%')  

这样就添加了一个背景图片， （ps：关于background-size这个属性，在接下来的文章中会为大家解释）

3、其实按照上面的写法一点问题都没有，但是一般严谨的写法是：

 

if (window.console) {    

    console.log('%c 这是一个测试','color:red;font-size:50px;width:300px;height:80px;background:url("http://nowre.com/uploads/feature/feature_header_1435686903_FEATURE-TOP17.jpg");background-size:100%')  

}  

总结：

在%c后写自己要打印的东西，然后逗号后面的就是它的样式，也就是css的写法，这些样式按需求添加；

再加一个动图：