逍遥老鬼继续扯淡

　　很久以前，他们给我一张图片，关于css的速记卡，上面很多css的一些常用的属性等东西，而我只会用editplus敲代码，而且是不定时的，什么时候想法来了就搞一段，当然也仅限于很简单的那种，所以，所有的css的这些标签了属性了什么的，我记得并不清楚，那张图片对我的帮助很大，帮我记住了很多东西。最近，图片找不到了，后来千辛万苦再网上让别人帮我又找了一张，为了方便我自己，并且方便别人，我用了一上午的时间，把图片上面的那些东西都敲到了网页上并上传到我的空间，放服务器上面，估计会相对的稳定一点，而且更加方便自己的使用吧，只要服务器不挂并且我能上网。速记卡的地址在这里。

　　这个网页的格式，依然是采用图片的布局，毕竟以前自己查的时候看着也习惯了，网页代码写的相当的简单，没有过多的考虑什么标准什么兼容，就是写着玩的，所以希望来这里看的人要求不要过高了。有需要这个图片的人可以到我的图片链接的google相册去下载或者直接去作者的网站下载。你也可以直接把我的网页复制过去。网上搜索css cheat sheet的话你可以找到针对这个图片上面css详细的中文翻译文章，有需要的人可以直接去百度一下。

　　经过这个网页，我找到了原作者的网站，找到后我才发现我真是坐井观天了，人家这个css速记卡的东西是很久以前发出来的，今年又搞了一个2.0的版本出来，对目前的这个版本进行了重新的布局并修改了一些东西。另外，在他那里我不止找到了css的速记卡，还有php、html、JavaScript、asp、mysql等等网页编程相关的速记卡，我还在他的网站上面找到了魔兽世界的速记卡……关于魔兽世界的速记卡上面记录的全部都是对话相关的快捷方式，比如怎么喊话怎么密语等等，没想到人家作者兴趣爱好也还是很广泛的吗。

　　既然说到了魔兽世界，顺便说一下，今天我的小德升级到70了，到目前为止，我70的号有牧师、盗贼、圣骑士、德鲁伊这四个了，下个帐号的话，估计我会选择萨满或者法师，或者放弃游戏。

　　在平时网页设计中，有些小的地方，自己并没有注意到，今天看到一篇文章，特别摘录过来。

• CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
• 无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
• 不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。
• 慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
• 样式放头上，脚本放脚下。不内嵌，只外链。
• 坚决不用 CSS 表达式。
• 使用 <link> 引用样式表，而不是通过 @import 导入。
• 一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。
• 千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
• 正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
• block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
• 段落之间，至少要有一倍行距。
• 强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。
• 中文标点用全角。英文夹杂在中文中，左右空格，半角。
• 中文字体的粗体和斜体，远离较好，利民利己。

　　本文摘录自Wordzine。

　　昨天用手机上QQ，偏偏这个时候ding跟老蛇说起了a这个标签的那些伪类，碰巧，我又不会，靠，在手机QQ上偷学了半天，别提多费事了。ding那里把昨天说的东西都整理出来了，我也就省事了，直接搬过来用用算了。

　　注：由于CSS优先级的关系(后面比前面的优先级高)，在写a的CSS时，link>visited>hover>active，Ding那里有几个地方visited写错了。

　　现在开始引用他整理的东西：

　　伪类的2种用法。我就常用最简单的那种，另外的那种方法真没用过。。写出来今天也刚学的知识点。

　　普通的伪类：

　　selector:pseudo-class {property: value}

　　例如：

• .ooxxoo a:link {}   /* 未被访问的链接 */
• .ooxxoo a:visited {}  /* 已被访问过的链接 */
• .ooxxoo a:hover {}  /* 鼠标悬浮在上的链接 */
• .ooxxoo a:active {}  /* 鼠标点中激活链接 */

　　第二种用法的伪类：

　　selector.class:pseudo-class {property: value}

　　例如：

• a.ooxxoo :link {}  /* 未被访问的链接 */
• a.ooxxoo :visited {}  /* 已被访问过的链接 */
• a.ooxxoo :hover {}  /* 鼠标悬浮在上的链接 */
• a.ooxxoo :active {}   /* 鼠标点中激活链接 */

　　今天碰到一个问题，关于display的，不会用，就在网上查了一遍，摘录了点文章放这里你看我看大家看。

　　发现我以前犯了一个毛病，而且有的严重，关于列表的，本来，用列表做网站的menu的话，要做成横向排列的话，我总是用float再加上宽度，但是鉴于float用多了经常出问题，所以能避免最好还是避免。今天找到了替代的办法就是加上li{display:inline;}，li这个标签就成了内联的元素了，就可以在一行了，应该是不错的，有时间的话可以尝试下。目前还不知道这个支持的浏览器，是不是所有的都支持，希望是支持吧，因为display:block;好像都支持的。

　　以下文章引用自网络：

　　首先我们要明确，display:inline;和float:left;正确含义。display:inline;(内联)《CSS权威指南》中文字显示:任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。假如是块级元素那么所显示的的黑线只会在块的下方出现。

　　当然这看起来不像是display:inline;和float:left;的区别所在，但是当理解了float:left;的特性那么我们就清楚到底是怎么回事了。float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。

　　那么我们很清楚了，内联(display:inline;)元素不能配置宽高，因为内联属于行布局，其特性是在一行里进行布局，所以不能被设定宽高。

　　以前也经常遇到未知高度的图片或者文字垂直居中的问题，搞一堆代码，最后才使的图片垂直居中了，太麻烦，甚至现在我的博客上面的rss的图标，还没有垂直居中。

　　今天怿飞的博客上发表了一篇关于图片垂直居中的日志，代码很简单，对我说帮助不小，转载记录下，方便以后自己的使用。

　　在曾经的 淘宝UED 招聘 中有这样一道题目：

　　“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

　　当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。

　　题目的难点在于两点：

1. 垂直居中；
2. 图片是个置换元素，有些特殊的特性。

　　至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

　　当然还有其他的解决方法，在此不深究，有兴趣的可以阅读下：

• 《Vertical centering using CSS》
• 《Vertical centering using CSS》（标题和上同，内容不同）
• 《CSS List Grid Layout》

　　下午研究了下伪类里面的before，搞了半天，不能用，后来才发现不是不能用，是在ie中不能用，在firefox中调试了下，可以，但是仍然存在问题，比如排序的那个，最后，支持的最好的就是opera了。比较实用的一个伪类，可惜现在还不能用呢，希望以后支持会好一点吧。

　　:before

　　语法：Selector : before { sRules }

　　说明：用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容。

　　:after

　　语法：Selector : after { sRules }

　　说明：用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容。

　　content

　　语法：content : attr(alt) | counter(name) | counter(name , list-style-type) | counters(name , string) | counters(name , string , list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url(url)

　　取值：

　　attr(alt) :　 使用对象的 alt 属性的文字

　　counter(name) :　 使用已命名的计数器

　　counter(name, list-style-type) :　 使用已命名的计数器并遵从指定的 list-style-type 属性

　　counters(name, string) :　 使用所有已命名的计数器

　　counters(name, string, list-style-type) :　 使用所有已命名的计数器并遵从指定的 list-style-type 属性

　　no-close-quote :　 并不插入 quotes 属性的后标记。但增加其嵌套级别

　　no-open-quote :　 并不插入 quotes 属性的前标记。但减少其嵌套级别

　　close-quote :　 插入 quotes 属性的后标记

　　open-quote :　 插入 quotes 属性的前标记

　　string :　 使用用引号括起的字符串

　　url(url) :　 使用指定的绝对或相对 url 地址

　　说明：用来和 :after 及 :before 伪元素一起使用，在对象前或后显示内容。对应的脚本特性为 content 。

摘录：Loveyuki`blog

　　很多人都有这个问题，就是博客中的图片把网页撑的老大老大的，其实不止是图片，还有代码，一连串的字母或者标点，很难完美的解决，至少我还不能，有人能了，我也懒得找了，去loveyuki的博客上看他那里写的关于图片的缩放的代码，就拿过来记录下了，方便自己以后做模板的时候用下，以下是正文：

　　一直以来有个很头疼的问题困扰着我，那就是图片缩放的问题，写到 JS 里面吧，不太容易修改。写到 CSS 里面吧，IE 6 又不支持 max-width，今天用了很久时间终于解决了这个问题，基本完美了，唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小，不过聊胜于无，总比进入页面后看到长长的横向滚动条舒服的多，这里使用了 expression，但是利用了一次加载，所以 expression 不会造成内存泄漏。当然，如果你有更好的解决方案，希望能与我交流。代码如下：

摘录自：Snake`blog

区别IE6与FF：
      background:orange;*background:blue;

 

	IE6	IE7	FF
*	√	√	×
!important	×	√	√

---

另外再补充一个，下划线”_“,
IE6支持下划线，IE7和firefox均不支持下划线。(推荐)

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。