显示标签为“CSS”的博文。显示所有博文
显示标签为“CSS”的博文。显示所有博文

wordpress合并css和js文件 加快网站速度

虽然现在本站首页、独立文章页等都已经静态化,但由于服务器在美国的DH上,所以有的时候响应速度还是有点让人受不了。在网上搜了很多关于Wp优化的文章,这里推荐一篇优化合集:优化Wordpress-wp终极优化手册。其实很早就看了这篇文章,但是一直懒得动手。

查看了下Ks Home首页的源文件,发现里面有很多条载入js和css文件的html语句。也就是说系统在显示首页的时候,会读取这些文件,而这个时候会产生大量的http requests,其中产生的延时约为0.2秒/个,这将使得读取速度大大降低!

因此,今天主要合并了wp插件中的css和js文件,但我这里并没有使用阅微堂的手动合并的方法中新建一个all.js.php的方法。对于css文件,我的做法是直接手动合并,简单的将几个css文件里的样式全部Copy到Theme的style.css中,然后删除相应的css文件,并删除插件中调用该css文件的相应php语句。

 

至于对js文件的处理,我是先新建一个all.js文件,然后将插件调用的js代码全部copy到all.js中,然后删除相应的js文件和调用该js文件的php语句,上传all.js到适当位置,最后在head.php中添加载入all.js的语句。

 

这种方法修改和删除的地方很多,而且容易出错,所以修改或删除之前请做好备份!

效果嘛,好像还是很明显的。我用PingDom测试了下,和以前的数据对比,时间上确实相差很多。其实我自己感觉好像快了些,还访问速度有所提高。

HTML标签的默认CSS样式汇总

在html中,即使我们没有指定页面元素显示的css样式,元素也会按照默认的的标准css样式去显示。因此掌握基本的html标签可以在一定程度上精简你的css代码,现将html标签的默认属性进行一定的汇总如下:

[php]
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell; }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px; line-height: 1.12 }
html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
h4, p,blockquote, ul,fieldset, form,ol, dl, dir,menu { margin: 1.12em 0 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em, var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }
td, th { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: “\A” }
:before, :after { white-space: pre-line }

center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }

@media print {
h1 { page-break-before: always }
h1, h2, h3,h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}

BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
[/php]

当我们预想的css样式和默认样式一致时,我们就不必浪费不必要的css代码在那些页面元素上了,从而达到css代码的精简!

分享10款实用的免费CSS在线工具

对于Web开发人员来说,找到有用的CSS工具很重要,CSS工具能帮助开发人员创造更加时尚且更有创意的网站。在这篇文章中收集了10个实用强大的CSS工具,希望能有所帮助。


1. Border Radius


http://border-radius.com/


2. ZURB CSS Grid Builder


http://www.zurb.com/playground/css-grid-builder


3. CSSMate


http://cssmate.com/csseditor.htm


4. EM Calculator


http://riddle.pl/emcalc/


5. CSS Portal


http://www.cssportal.com/online-css-editor/


6. The Box Office


http://www.theboxoffice.be/


7. Contrast-A


http://www.dasplankton.de/ContrastA/


8. 0 to 255


http://0to255.com/


9. Typester


http://www.typetester.org/


10. Boxes


http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

分享10款实用的免费CSS在线工具

对于Web开发人员来说,找到有用的CSS工具很重要,CSS工具能帮助开发人员创造更加时尚且更有创意的网站。在这篇文章中收集了10个实用强大的CSS工具,希望能有所帮助。


1. Border Radius


http://border-radius.com/


2. ZURB CSS Grid Builder


http://www.zurb.com/playground/css-grid-builder


3. CSSMate


http://cssmate.com/csseditor.htm


4. EM Calculator


http://riddle.pl/emcalc/


5. CSS Portal


http://www.cssportal.com/online-css-editor/


6. The Box Office


http://www.theboxoffice.be/


7. Contrast-A


http://www.dasplankton.de/ContrastA/


8. 0 to 255


http://0to255.com/


9. Typester


http://www.typetester.org/


10. Boxes


http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html