CSS

使网站图片变成黑白模式


.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,
#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

标签: 

table 宽度之 table-layout

  • 值: auto | fixed | inherit
  • 初始值: auto
  • 应用于: display值为 table 或 inline-table 的元素
  • 继承性: 有
  • 计算值: 根据指定确定

尽管这两种模型针对一个特定布局可能有不同的结果,但二者之间最显著的差异是速度。使用固定宽度表布局时,相对于自动宽度模型,用户代理可以更快地计算出表达布局。

固定布局

固定布局模型的速度之所以快,主要原因是布局不依赖于单元格的内容。其布局是根据该表以及表中列和单元格的 width 值决定的。

固定布局模型的工作包括以下简单步骤:

标签: 

CSS 样式表 media 属性

作用:说明这个样式表要应用于何种表现媒体.

  • all 用于所有表现媒体.
  • aural 用于语音合成器、屏幕阅读器和文档的其他声音表现.
  • braille 用 Braille 设备表现文档时使用.
  • embossed 用 Braille 打印设备打印时使用.
  • handheld 用于手持设备,如个人数字助理或支持web的蜂窝电话.
  • print 为视力正常的用户打印文档时使用,另外还会在现实文档的“打印预览”时使用.
  • projection 用于投影媒体,如发表演讲时显示幻灯片的数字投影仪.
  • screen 在屏幕媒体(如桌面计算机的监视器)中表现文档时使用. 在这种系统上运行所有的Web浏览器都是屏幕媒体的用户代理.
  • tty 在固定间距环境(如电传打字机)中显示文档时使用.
  • tv 在电视上显示文档时使用.

以上大部门媒体类型在当前的Web浏览器中并不支持. 其中3个得到最广泛支持的类型是all、screen和print.

标签: 

Drupal 主题开发 CSS / JS 调试

对于刚开始使用Drupal搭建网站的同学们来说,前端设计是一个很大的问题。CSS和JS的快速调试是Drupal主题设计的一大障碍。

Drupal的主题引擎需要一定的PHP基础,同时灵活的界面生成规则,复杂的Class样式命名,复杂的样式继承关系,让习惯按照自己XHTML+CSS的规则设计的设计者们头痛。

Chrome和FireFox+firebug(以下简称FFFB)能够为大家大大缓解这个问题。 Chrome和FFFB能够将所浏览的网页DOM、CSS、JS 抽离出来,并且可以在调试窗口中修改并立即呈现效果(当然,只是本地的)。这样就可以快速的调试CSS和JS。

对于HTML,这两个工具都提供了标准的树结构和快速搜索,可以很清晰的阅读文档结构,甚至可以自动分析出文档节点的style继承关系,避免设计CSS大量的覆盖属性产生无用的样式代码。

Chrome浏览器通过点击页面右键,选择审查元素打开该调试界面。Firebug则是Firefox浏览器的一个插件工具,安装好后在当前页面工具条栏就可以找到打开窗口的按钮。 至于选择使用Chrome还是FFFB,两个工具都能为你带来相同的效果,根据个人习惯选择。