css文件合并

WordPress网站将多个CSS文件合并成一个

为什么要将多个CSS文件合并为一个？ 你的WordPress很可能有四五个CSS文件，这样浏览器在加载你的网页时，光是加载CSS文件就得发出四五个请求。我们知道，浏览器在加载一个网页时发出的请求越多，那么加载的速度就越慢。另外，有些CSS文件可能不是存储在你的服务器上，而是存储在另外一个服务器上，而这时又会增加DNS查询的次数。在DNS查询完成之前，浏览器是不能加载任何元素的。而且，也许你的服务器上的CSS文件加载得快，但你不能保证其他服务器上的CSS文件也加载得快。 所以把多个CSS文件合并成一个，合并后的CSS文件缓存在CDN服务器上，既可以减少浏览器发出的请求次数，又可以减少DNS查询次数，从而加快网页的加载速度。 找出网站有多少个外部CSS文件 首先，打开网站主页，然后右击鼠标，选择“查看源码”。再按CTRL＋F快捷键调出搜索框，在搜索框中输入stylesheet后回车。选择“高亮全部”，你就能看见网页中有多少个外部CSS文件了。 在你登录WordPress后，你还会看到下图中间三个外部CSS文件，open-sans-css，dashicons-css和admin-bar-css是登录WordPress后才会加载的外部CSS样式。我们不需要合并这三个CSS文件，因为普通浏览者不会登录你的WordPress后台，所以他们的浏览器不会请求这三个CSS文件。 合并多个CSS文件的方法 创建main.css文件 首先在网站根目录下面创建一个文件，命名为main.css。然后编辑main.css文件。我们需要将外部CSS文件的内容全部粘贴到main.css文件中。在网页的源码页面，点击CSS文件的地址，也就是上图中 href 后面的地址。打开了CSS文件，按CTRL＋A选择全部内容，然后CTRL＋C复制全部内容，将内容粘贴到main.css文件中。再点击下一个CSS文件的href地址，依次它们的内容粘贴到main.css文件中。最后保存。 引用main.css文件 main.css创建好以后，我们需要在wordpress主题文件夹的header.php文件中引用main.css。header.php文件的路径一般为/var/www/html/wp-content/themes/themename/header.php。 在<title>标签下一行，其他<link>标签的上一行，粘贴下面的<link>标签，将域名替换成你自己的域名。保存文件。  <link rel="stylesheet" href="http://www.linuxdashen.com/main.css" type="text/css" media="screen" />...