Badst' weblog

记得刚接触电脑那会儿，就对windows的设置桌面背景特别感兴趣。 设置背景有3个选项：居中，平铺，拉伸。 居中就相当与css中background的：center no-repat 平铺是background的默认设置。 而拉伸这个功能终于在CSS3中千呼万唤始出来。 语法：background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain 说明：设置背景图片大小，指定背景图片大小或百分比显示。 实例：以下这张图片，原图大小：256px * 256px CSS: color:black; height: 350px; width: 350px; padding: 20px; border: 10px dotted #111; background: #80B3FF url(‘http://badst.org/wp-content/uploads/2012/01/256.jpg’) center no-repeat; background-size: 100%; text-shadow: 0 -1px 1px #fff; 这里是效果图，可以看到背景图片被拉伸到这个div的高度和宽度。 参考资料：http://www.zhangxinxu.com/css3/css3-background-size.php 相关属性：background-clip | background-origin

字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的 时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：1. 不可能大范围的使用该字体；2. 图片内容相对使用文字不易修改；3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。网络上有一些使用sIFR技术、或 javascript/flash hack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 第一步 获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。 .TTF，True Type Font 适用于Firefox 3.5、Safari、Opera OTF，Open Type Font 适用于Firefox 3.5、Safari、Opera .EOT，适用于Internet Explorer 4.0+ .SVG，适用于Chrome、IPhone .WOFF，适用于Firefox 3.6 +，支持Mozilla的text-rendering属性 下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的 是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站Font2Web，FontsQuirrel或onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点，它允许我们选择需要的字符生成字体文件（在服务的最后一个选 项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。选择一个字体文件后自动给你生成一个包含5种格式字体，一个demo.html演示，和一个字体声明文件的font.css，速度很快。

原来有个tag叫“css3.0″，别名是“css3-0”，想改成“css3”，但却被提示别名已经被使用。 于是输入网址：http://badst.org/css3 却跳到 CSS3:文字阴影知多少 这篇文章，我就想到可能是因为中文的问题。 在网上搜索解决方法，需要用到phpmyadmin修改数据库。 步骤 用phpmyadmin打开wordpress的数据库，打开wp_terms表，查找你要更改的别名，我的是dedecms2 删除掉以前的那个 下班再弄吧。

这是一个非常基础的属性了，但是能实际用好还是很需要经验的。 display属性非常多，多到记不住，仔细想想比较常用的也只有： block 块状，可以定义宽度高度等。 inline 并排，结尾不换行，常用来定义菜单横向排列。 none 完全隐藏。 但前几天一直在blueidea看到一个家伙发的帖子，让用div实现一个表格的效果，一个左边一栏右边两行的表格。 就想到前阵子搞的那个失败了的主题，因为评论的Ajax效果出错放弃了，那评论的样式可是花费了我不少心思。 于是乎想到似乎那里有实现过这个效果。于是翻来随便简化了下，果然可以了。 看那代码，关键两个字： 外面的DIV，display: table 里面的DIV，display: table-cell 演示页面：div-table —— 原来是ol/li的排版，我给改成了DIV的。

一个强大的例子：

定义和用法 text-transform 属性控制文本的大小写。 说明 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。如果值为 capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于用户代理如何识别出各个“词”。 lowercase定义无大写字母，仅有小写字母。 值 描述 none 默认。定义带有小写字母和大写字母的标准的文本。 capitalize 文本中的每个单词以大写字母开头。 uppercase 定义仅有大写字母。 inherit 规定应该从父元素继承 text-transform 属性的值。 http://www.w3school.com.cn/css/pr_text_text-transform.asp