• CSS3 transform的一些细节

    之前虽然用CSS3 transform做过动画相关项目,目的就是让元素动起来,看着比较酷炫,仅此而已。但是最近想用transform实现小于12px文字的时候却发现transform并未将由于文字过长而换行的文字改为单行,那正好趁着这个机会小小的研究一把。

    用transform实现小于12px大小时的一些细节

    众所周知Chrome里面(据说只有中文版,未测试)文字最小为12px,那么要实现10px的文字大小,就会用到transform

    transform:scale(.5)

    这对于正常的应用来说是没问题的,比如下面的例子

    See the Pen font-size smaller than 12px demo1 by Bane Lee (@zenoven) on CodePen.

    例1

    .a是正常的20px大小,.b用font-size设置为10px但是chrome下无效,.c用transform实现10px大小。 但是当遇到空间小而数据多并且要求不换行的时候,用scale来缩小文字就会有一定的问题,如下例无论缩放多小,文字始终还是两行。

    See the Pen transform has no effect by Bane Lee (@zenoven) on CodePen.

    例2

    那怎么解决呢?目前想到的一种方案是将元素包起来,宽度增加到足够容纳元素,然后整体scale,效果如下

    See the Pen transform works by Bane Lee (@zenoven) on CodePen.

    例3

    问题是解决了,但是这是为什么呢?同样是用transform来scale,一个作用在父元素,一个作用在子元素,差别怎么就这么大呢?

    transform不改变元素实际宽高及定位

    直接上例子也许看的更清楚~

    See the Pen CSS3 transform position and dimension test by Bane Lee (@zenoven) on CodePen.

    例4

    上例中.target被.wrapper包裹并左浮动、设置scale及translate后.target变化了,如果transform改变了元素的实际宽高就必然会导致.wrapper变化,但是实际的效果显示.wrapper没有任何改变,证明transform不会改变元素实际宽高及定位,也就是说transform并不会对相邻元素造成影响。

    如何获取transform之后的视觉宽高及定位

    其实例4中已经提供了一种方法,就是用getBoundingClientRect()这个方法,可以获取到transform后的尺寸及定位,具体可点此查阅MDN

  • ASP.NET使用母版页后动态加载JS/CSS

    ASP.NET中使用母版页最大的好处就是当有许多相似的页面时只用加一个母版页,每个页面用这个母版页生成内容页,然后根据情况修改每个内容页中的内容,保持页面布局的统一,同时也减少了代码量。

    但另一个突出的问题是使用母版页后,每个内容页中没有了<head></head>标记,因为这都在母版页中有了,而这对修改标题、加载JS/CSS等文件都有影响,前面我已经说过在ASP.NET中使用母版页后统一网页标题,那这篇就来说说如何加载JS/CSS等文件。

    ASP.NET中使用母版页后统一网页标题中修改标题的原理一样,加载JS/CSS等文件可以在内容页中加,也可以在母版页中统一加载。

    1、在单个内容页中加载

    将下面两段段代码放入内容页的Page_Load中即可,很简单了,也不再多解释。

    • 加载JS文件
    #region 加载JS文件
    HtmlGenericControl JSControl = new HtmlGenericControl("script");
    JSControl.Attributes.Add("type", "text/javascript");
    JSControl.Attributes.Add("src", "JS/js.js");
    Page.Header.Controls.Add(JSControl);
    #endregion
    
    • 加载CSS文件
    HtmlLink CssControl = new HtmlLink();
    CssControl.Href = "/CSS/Style.css";
    CssControl.Attributes.Add("rel", "stylesheet");
    CssControl.Attributes.Add("type", "text/css");
    Page.Header.Controls.Add(CssControl);
    

    2、在母版页中统一加载

    string requestContentType = this.ContentPlaceHolder1.Page.GetType().ToString();
    if (requestContentType == "ASP.admin_c2c_user_management_aspx")//获取请求的内容页类型,格式如ASP.目录名_文件名_aspx(好像文件名中的“-”都会被转换成了“_”)
    {
        //加载JS文件
        HtmlGenericControl JSControl = new HtmlGenericControl("script");
        JSControl.Attributes.Add("type","text/javascript");
        JSControl.Attributes.Add("src", "JS/js.js");
        Page.Header.Controls.Add(JSControl);
        // 加载CSS文件
        HtmlLink CssControl = new HtmlLink();
        CssControl.Href = "/CSS/Style.css";
        CssControl.Attributes.Add("rel", "stylesheet");
        CssControl.Attributes.Add("type", "text/css");
        Page.Header.Controls.Add(CssControl);
    }
    
  • CSS中的块级元素与内联元素

    块元素(block element)

    块级元素,形象点说就是一个四方块,可以放在页面上任何地方,一般都会另起一行显示。

    有以下元素。

    * address – 地址
    * blockquote – 块引用
    * center – 举中对齐块
    * dir – 目录列表
    * div – 常用块级容易,也是css layout的主要标签
    * dl – 定义列表
    * fieldset – form控制组
    * form – 交互表单
    * h1 – 大标题
    * h2 – 副标题
    * h3 – 3级标题
    * h4 – 4级标题
    * h5 – 5级标题
    * h6 – 6级标题
    * hr – 水平分隔线
    * isindex – input prompt
    * menu – 菜单列表
    * noframes – frames可选内容,(对于不支持frame的浏览器显示此区块内容
    * noscript – 可选脚本内容(对于不支持script的浏览器显示此内容)
    * ol – 排序表单
    * p – 段落
    * pre – 格式化文本
    * table – 表格
    * ul – 非排序列表

    内联元素(inline element)

    内联元素,所有不是块级元素的都是内联元素。

    * a – 锚点
    * abbr – 缩写
    * acronym – 首字
    * b – 粗体(不推荐)
    * bdo – bidi override
    * big – 大字体
    * br – 换行
    * cite – 引用
    * code – 计算机代码(在引用源码的时候需要)
    * dfn – 定义字段
    * em – 强调
    * font – 字体设定(不推荐)
    * i – 斜体
    * img – 图片
    * input – 输入框
    * kbd – 定义键盘文本
    * label – 表格标签
    * q – 短引用
    * s – 中划线(不推荐)
    * samp – 定义范例计算机代码
    * select – 项目选择
    * small – 小字体文本
    * span – 常用内联容器,定义文本内区块
    * strike – 中划线
    * strong – 粗体强调
    * sub – 下标
    * sup – 上标
    * textarea – 多行文本输入框
    * tt – 电传文本
    * u – 下划线
    * var – 定义变量

    可变元素

    可变元素为根据上下文语境决定该元素为块元素或者内联元素。

    * applet – java applet
    * button – 按钮
    * del – 删除文本
    * iframe – inline frame
    * ins – 插入的文本
    * map – 图片区块(map)
    * object – object对象
    * script – 客户端脚本

    写CSS的时候这个还是挺需要的,因为我之前对这个不是很了解,有的本来就是块级元素的还让我给加了个display:block,真是多此一举,呵呵,知道了这个以后就不会犯同样错误了。

    PS:文章整理于网络,原作者不详,如作者看到请联系我。

  • 各种HTML标签CSS属性默认值汇总

    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 }
    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 }
    h1              { font-size: 2em; margin: .67em 0 }
    h2              { font-size: 1.5em; margin: .75em 0 }
    h3              { font-size: 1.17em; margin: .83em 0 }
    h4, p,
    blockquote, ul,
    fieldset, form,
    ol, dl, dir,
    menu            { margin: 1.12em 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 }

    /* Begin bidirectionality settings (do not change) */
    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 }

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

    此文来源于网络

  • CSS Sprites技巧:单个图片插入多个链接

    平时我们做网页的时候会用到img标签来插入图片,再结合a标签可以给图片加上链接,但是其实单独用a标签就可以实现这样的效果,而且可以在单个图片中插入多个链接。

    本文的基本做法就是用CSS Sprites将多个图片合并为1个,用CSS中的background属性代替img标签,用background-position来实现多个图片链接的最终效果。

    例如原来3个图片链接的HTML代码如下

    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    <a href="#"><img src="#" /></a>
    

    现在用CSS Sprites时HTML代码为

    <a id="a"href="#">链接名称1</a>
    <a id="b"href="#">链接名称2</a>
    <a id="c"href="#">链接名称3</a>
    

    CSS代码为

    #a,#b,#c{
    	display:block;
    	width:250px;
    	margin:5px auto;
    	text-indent:-999em;
    	background:url(img.png) no-repeat;
    }
    #a{
    	height:100px;
    	background-position:0 0;
    }
    #b{
    	height:90px;
    	background-position:0 -100px;
    }
    #c{
    	height:70px;
    	background-position:0 -190px;
    }
    

    注:本例中的图片为250*260(a,b,c的高度分别为100px,90px,70px),我的小站这样做修改后的实际效果如下图,具体效果可以参看http://www.zenoven.com首页右下角处的图片链接。

    那么有朋友要问,这样做的好处是什么呢?

    1、3个图片合为1个,减少了HTTP请求数量,在图片大小没有大的变化时可以加快网页加载速度。

    2、a标签中的<img />没有了,取而代之的是链接名称,有利于SEO。

    3、DIV+CSS的一个要求是内容与表现形式的分离,这样做可以在不修改HTML的情况下直接通过修改CSS更换图片。

  • 回顾下自己以前的作品

    今天无意中翻到了自己以前做的那些网页,感触甚多啊。

    虽然当时的作品有很多缺点,甚至当时都不懂DIV ,CSS,更不懂什么浏览器兼容性,但是当时也是花了很大功夫去做,而且那时这样的作品也算是不错的。。。哈哈,自恋下。

    这里共有两个作品,截图如下。

    ssite

     

     myzone

    第一个里面的flash导航是在网上下载的然后改了下。第二个作品里面的flash感觉搭配起来还是挺漂亮的,还有myzone那个logo当时也做了很久,PS不行哎。。。还有导航栏的图片过渡效果现在想下,用CSS很容易就搞定了,害我我当时用了那么多图片。。。

    如果想看看里面是啥样子的,那就下载下来看看吧,呵呵~~

    下载地址>>sstie   myzone

  • CSS代码命名及书写规范篇

    一直以来我的CSS都是参考人家的,看着人家的怎样写然后自己一点点模仿,也没有注意什么规范,这并不是长久之计,学习下一些规范还是很有必要的,这份规范也是在网络上搜集的,目的是方便自己,方便大家,如果其中有错误请大家指正。

    CSS命名规范

    一.文件命名规范

    全局样式:global.css;
    框架布局:layout.css;
    字体样式:font.css;
    链接样式:link.css;
    打印样式:print.css;

    二.常用类/ID命名规范

    页 眉:header
    内 容:content
    容 器:container
    页 脚:footer
    版 权:copyright 
    导 航:menu
    主导航:mainMenu
    子导航:subMenu
    标 志:logo
    标 语:banner
    标 题:title
    侧边栏:sidebar
    图 标:Icon
    注 释:note
    搜 索:search
    按 钮:btn
    登 录:login
    链 接:link
    信息框:manage
    ……

    常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”……

     

    CSS书写规范及方法

    一. 常规书写规范及方法

    1. 选择DOCTYPE:

    XHTML 1.0 提供了三种DTD声明可供选择:

    过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

    严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

    框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

    理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

    2. 指定语言及字符集:

    为文档指定语言:

    <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

    为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;如:
    常用的语言定义:

    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    标准的XML文档语言定义:
    <?xml version=”1.0″ encoding=” utf-8″?>
    针对老版本的浏览器的语言定义:
    <meta http-equiv=”Content-Language” content=” utf-8″ />
    为提高字符集,建议采用“utf-8”。

    3. 调用样式表:

    外部样式表调用:

    页面内嵌法:就是将样式表直接写在页面代码的head区。 如:

    <style type=”text/css”><!– body { background : white ; color : black ; } –> </style>
    外部调用法:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

    <link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />

    在符合web标准的设计中,推荐使用外部调用法,可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件,那么改一个样式表文件,可以改变所有文件的样式。

    4、选用恰当的元素:

    根据文档的结构来选择HTML元素,而不是根据HTML元素的样式来选择。例如,使用P元素来包含文字段落,而不是为了换行。如果在创建文档时找不到适当的元素,则可以考虑使用通用的div 或者是span;

    避免过渡使用div和span。少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式;

    尽可能少地使用标签和结构嵌套,这样不但可以使文档结构清晰,同时也可以保持文件的小巧,在提高用户下载速度的同时,也易于浏览器对文档的解释及呈视;

    5、派生选择器:

    可以使用派生选择器给一个元素里的子元素定义样式,在简化命名的同时也使结构更加的清晰化,如:

    .mainMenu ul li {background:url(images/bg.gif;)}

    6、辅助图片用背影图处理:

    这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理,可以在不改动页面的情况下通过CSS样式来进行改动,如:

    #logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

    7、结构与样式分离:

    在页面里只写入文档的结构,而将样式写于css文件中,通过外部调用CSS样式表来实现结构与样式的分离。

    8、文档的结构化书写:

    页面CSS文档都应采用结构化的书写方式,逻辑清晰易于阅读。如:

    <div id=”mainMenu”>
    <ul>
    <li><a href=”#” >首页</a></li>
    <li><a href=”#” >介绍</a></li>
    <li><a href=”#” >服务</a></li>
    </ul>
    </div>

    /*=====主导航=====*/
    #mainMenu {
    width:100%;
    height:30px;
    background:url(images/mainMenu_bg.jpg) repeat-x;
    }
    #mainMenu ul li {
    float:left;
    line-height:30px;
    margin-right:1px;
    cursor:pointer;
    }
    /*=====主导航结束=====*/

    9、鼠标手势:

    在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,即“cursor:pointer;”

    二.注释书写规范

    1、行间注释:

    直接写于属性值后面,如:

    .search{
    border:1px solid #fff;/*定义搜索输入框边框*/
    background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
    }

    2、整段注释:

    分别在开始及结束地方加入注释,如:

    /*=====搜索条=====*/
    .search {
    border:1px solid #fff;
    background:url(../images/icon.gif) no-repeat #333;
    }
    /*=====搜索条结束=====*/

    三.样式属性代码缩写

    1、不同类有相同属性及属性值的缩写:

    对于两个不同的类,但是其中有部分相同甚至是全部相同的属性及属性值时,应对其加以合并缩写,特别是当有多个不同的类而有相同的属性及属性值时,合并缩写可以减少代码量并易于控制。如:

    #mainMenu {
    background:url(../images/bg.gif);
    border:1px solid #333;
    width:100%;
    height:30px;
    overflow:hidden;
    }
    #subMenu {
    background:url(../images/bg.gif);
    border:1px solid #333;
    width:100%;
    height:20px;
    overflow:hidden;
    }

    两个不同类的属性值有重复之处,刚可以缩写为:

    #mainMenu,#subMenu {
    background:url(../images/bg.gif);
    border:1px solid #333;
    width:100%;
    overflow:hidden;
    }
    #mainMenu {height:30px;}
    #subMenu {height:20px;}

    2、同一属性的缩写:

    同一属性根据它的属性值也可以进行简写,如:

    .search {
    background-color:#333;
    background-image:url(../images/icon.gif);
    background-repeat: no-repeat;
    background-position:50% 50%;
    }
    .search {
    background:#333 url(../images/icon.gif) no-repeat 50% 50%;
    }

    3、内外侧边框的缩写:

    在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的,当这四个属性值不同时也可直接缩写,如:

    .btn {
    margin-top:10px;
    margin-right:8px;
    margin-bottom:12px;
    margin-left:5px;
    padding-top:10px;
    padding-right:8px;
    padding-bottom:12px;
    padding-left:8px;
    }

    则可缩写为:

    .btn {
    Margin:10px 8px 12px 5px;
    Padding:10px 8px 12px 5px;
    }

    而如果当上边与下边、左边与右边的边框属性值相同时,则属性值可以直接缩写为两个,如:

    .btn {
    margin-top:10px;
    margin-right:5px;
    margin-bottom:10px;
    margin-left:5px;
    }

    缩写为:

    .btn {margin:10px 5px;}

    而当上下左右四个边框的属性值都相同时,则可以直接缩写成一个,如:

    .btn {
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
    }

    缩写为:

    .btn{margin:10px;}

    4、颜色值的缩写:

    当RGB三个颜色值数值相同时,可缩写颜色值代码。如:

    .menu { color:#ff3333;}

    可缩写为:

    .menu {color:#f33;}

    四.hack书写规范

    因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。

    1、 IE6、IE7、Firefox之间的兼容写法:

    写法一:

    IE都能识别*;标准浏览器(如FF)不能识别*;
    IE6能识别*,但不能识别 !important,
    IE7能识别*,也能识别!important;
    FF不能识别*,但能识别!important;
    根据上述表达,同一类/ID下的CSS  hack可写为:
    .searchInput {
    background-color:#333;/*三者皆可*/
    *background-color:#666 !important; /*仅IE7*/
    *background-color:#999; /*仅IE6及IE6以下*/
    }
    一般三者的书写顺序为:FF、IE7、IE6.

    写法二:

    IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:
    .searchInput {
    background-color:#333;/*通用*/
    _background-color:#666;/*仅IE6可识别*/
    }

    写法三:

    *+html 与 *html 是IE特有的标签, Firefox 暂不支持。
    .searchInput {background-color:#333;}
    *html .searchInput {background-color:#666;}/*仅IE6*/
    *+html .searchInput {background-color:#555;}/*仅IE7*/

    屏蔽IE浏览器:

    select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

    *:lang(zh) select {font:12px  !important;} /*FF的专用*/
    select:empty {font:12px  !important;} /*safari可见*/

    IE6可识别:

    这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

    select { display /*IE6不识别*/:none;}

    IE的if条件hack写法:

    所有的IE可识别:

    <!–[if IE]> Only IE <![end if]–>
    只有IE5.0可以识别:
    <!–[if IE 5.0]> Only IE 5.0 <![end if]–>
    IE5.0包换IE5.5都可以识别:
    <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
    仅IE6可识别:
    <!–[if lt IE 6]> Only IE 6- <![end if]–>
    IE6以及IE6以下的IE5.x都可识别:
    <!–[if gte IE 6]> Only IE 6/+ <![end if]–>
    仅IE7可识别:
    <!–[if lte IE 7]> Only IE 7/- <![end if]–>

    2、清除浮动:

    在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

    select:after {
    content:”.”;
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

    注:此文转载于网络

  • WordPress折腾记-精简CSS及JS在插件中的调用

    爱折腾WP是我的一个习惯,不折腾就会手痒,哈哈~~此文仅作为一个精简CSS及JS在插件中调用的范例,其他插件的精简可以按照此文的方法来做。

    众所周知,减少HTTP请求次数的一个途径是将CSS JS文件合并在一块,减少HTTP请求次数可以在一定程度上加快网页访问速度。为了速度,我就更加爱折腾了,呵呵。废话不多,下面是我今天的记录。

    先提醒一下,在修改前一定做好备份,这是个绝对无害处的好习惯,下文不再提醒。

    1、修改PageNavi的CSS调用,将其合并在主题目录中的style.css中(PageNavi是个WP分页插件,使用的人数还是不少的)。

    首先打开wp-pagenavi.php,找到下面的代码

    ### Function: Enqueue PageNavi Stylesheets
    add_action(‘wp_print_styles’, ‘pagenavi_stylesheets’);
    function pagenavi_stylesheets() {
    if(@file_exists(TEMPLATEPATH.’/pagenavi-css.css’)) {
    wp_enqueue_style(‘wp-pagenavi’, get_stylesheet_directory_uri().’/pagenavi-css.css’, false, ‘2.50’, ‘all’);
    } else {
    wp_enqueue_style(‘wp-pagenavi’, plugins_url(‘wp-pagenavi/pagenavi-css.css’), false, ‘2.50’, ‘all’);
    }
    }

    删除之(这些就是加载pagenavi-css.css的代码)

    然后将pagenavi-css.css 中的内容,全部复制到你的主题目录中的style.css 中,保存即可。另外将其复制到style.css的时候,最好做好备份和注释

    2、修改wp-easyarchives的CSS及JS调用。 搜索下面代码

    // — head START

    将head START 和 head END中的代码都删除掉,即删除下面的代码

    function easyarchives_head() {
    $options = get_option(‘wp_easyarchives_options’);

    $script_html = ”;
    if($options[‘js_type’] == ‘normal’) {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives.js”></script>’;
    } else if($options[‘js_type’] == ‘custom_jquery’) {
    if($options[‘jquery_url’] == ”) {
    $script_html = ”;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . $options[‘jquery_url’] . ‘”></script>’;
    }
    $script_html .= ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    } else {
    $script_html = ‘<script type=”text/javascript” src=”‘ . get_bloginfo(‘wpurl’) . ‘/wp-content/plugins/wp-easyarchives/js/wp-easyarchives-jquery.js”></script>’;
    }

    echo “\n” . ‘<!– START of script generated by WP-EasyArchives –>’;
    echo “\n” . ‘<!– END of script generated by WP-EasyArchives –>’ . “\n”;
    }
    add_action(‘wp_head’, ‘easyarchives_head’);

    现在wp-easyarchives的CSS和JS调用都没有了,但是我们还需要啊,下面我们可以将wp-easyarchives的CSS文件及JS文件都嵌入到别的CSS和JS文件中。比如我的主题是iNove的,对于CSS文件我将wp-easyarchives.css中的内容全部复制到了sytle.css中,对于JS文件,由于wp-easyarchives 插件提供了不止一个JS,我们可以选择一个,将其复制到inove/js/base.js 中。

    现在经过我们这样做之后,其实wp-easyarchives.php的下面这部分代码已经没有作用了(我们在wp-easyarchives的后台设置中虽然可以看到设置,但是设置已经没有作用了,因为前面我们已经删过别的代码了),可以将其删除。

    <form action=”#” method=”post” enctype=”multipart/form-data” name=”wp_easyarchives_form”>
    <div>
    <h2><?php _e(‘WP-EasyArchives Options’, ‘wp-easyarchives’); ?></h2>

    <table>
    <tbody>
    <tr valign=”top”>
    <th scope=”row”><?php _e(‘JavaScript Library’, ‘wp-easyarchives’); ?></th>
    <td>
    <label style=”margin-right:20px;”>
    <input name=”js_type” type=”radio” value=”normal” <?php if($options[‘js_type’] != ‘custom_jquery’ && $options[‘js_type’] != ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use normal JavaScript library that is supported by this plugin.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”wp_jquery” <?php if($options[‘js_type’] == ‘wp_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Use jQuery library that is supported by WordPress.’, ‘wp-easyarchives’); ?>
    </label>
    <br />
    <label>
    <input name=”js_type” type=”radio” value=”custom_jquery” <?php if($options[‘js_type’] == ‘custom_jquery’) echo “checked=’checked'”; ?> />
    <?php _e(‘Custom jQuery.’, ‘wp-easyarchives’); ?>
    </label>
    <label>
    <?php _e(‘Please input the URL of jQuery:’, ‘wp-easyarchives’); ?>
    <input type=”text” name=”jquery_url” size=”40″ value=”<?php echo($options[‘jquery_url’]); ?>” />
    </label>
    </td>
    </tr>
    </tbody>
    </table>

    <p>
    <input type=”submit” name=”wp_easyarchives_save” value=”<?php _e(‘Save Changes’, ‘wp-easyarchives’); ?>” />
    </p>
    </div>
    </form>

    OK,折腾到此结束。其实很多插件如果涉及到了在前台的显示,都会增加一些CSS和JS文件,我们的方法都是找到其调用的代码,然后删除之,接着将被调用到的那些代码添加到我们主题里面的CSS和JS文件中。

第1页,共2页12