自由人博客
之前虽然用CSS3 transform做过动画相关项目，目的就是让元素动起来，看着比较酷炫，仅此而已。但是最近想用transform实现小于12px文字的时候却发现transform并未将由于文字过长而换行的文字改为单行，那正好趁着这个机会小小的研究一把。
众所周知Chrome里面（据说只有中文版，未测试）文字最小为12px，那么要实现10px的文字大小，就会用到transform
transform:scale(.5)
这对于正常的应用来说是没问题的，比如下面的例子
ASP.NET中使用母版页最大的好处就是当有许多相似的页面时只用加一个母版页，每个页面用这个母版页生成内容页，然后根据情况修改每个内容页中的内容，保持页面布局的统一，同时也减少了代码量。
但另一个突出的问题是使用母版页后，每个内容页中没有了<head></head>标记，因为这都在母版页中有了，而这对修改标题、加载JS/CSS等文件都有影响，前面我已经说过在ASP.NET中使用母版页后统一网页标题，那这篇就来说说如何加载JS/CSS等文件。
与ASP.NET中使用母版页后统一网页标题中修改标题的原理一样，加载JS/CSS等文件可以在内容页中加，也可以在母版页中统一加载。
块元素(block element)
块级元素，形象点说就是一个四方块，可以放在页面上任何地方，一般都会另起一行显示。
有以下元素。
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 }
平时我们做网页的时候会用到img标签来插入图片，再结合a标签可以给图片加上链接，但是其实单独用a标签就可以实现这样的效果，而且可以在单个图片中插入多个链接。
本文的基本做法就是用CSS Sprites将多个图片合并为1个，用CSS中的background属性代替img标签，用background-position来实现多个图片链接的最终效果。
例如原来3个图片链接的HTML代码如下
今天无意中翻到了自己以前做的那些网页，感触甚多啊。
虽然当时的作品有很多缺点，甚至当时都不懂DIV ，CSS，更不懂什么浏览器兼容性，但是当时也是花了很大功夫去做，而且那时这样的作品也算是不错的。。。哈哈，自恋下。
这里共有两个作品，截图如下。
一直以来我的CSS都是参考人家的，看着人家的怎样写然后自己一点点模仿，也没有注意什么规范，这并不是长久之计，学习下一些规范还是很有必要的，这份规范也是在网络上搜集的，目的是方便自己，方便大家，如果其中有错误请大家指正。
CSS命名规范
一．文件命名规范
爱折腾WP是我的一个习惯，不折腾就会手痒，哈哈~~此文仅作为一个精简CSS及JS在插件中调用的范例，其他插件的精简可以按照此文的方法来做。
众所周知，减少HTTP请求次数的一个途径是将CSS JS文件合并在一块，减少HTTP请求次数可以在一定程度上加快网页访问速度。为了速度，我就更加爱折腾了，呵呵。废话不多，下面是我今天的记录。
先提醒一下，在修改前一定做好备份，这是个绝对无害处的好习惯，下文不再提醒。