手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜Qcloud , 注册 | 登陆
浏览模式: 标准 | 列表Tag:css

CSS中media标签的作用

在网页中,看到使用CSS的地方,大多数都会有这么一句:

XML/HTML代码
  1. <link rel="stylesheet" type="text/css" href="global.css" media="screen">    

那么,究竟这个media有什么作用呢?通过查下资料了解到:

XML/HTML代码
  1. all-- 用于所有设备类型  
  2. aural-- 用于语音和音乐合成器  
  3. braille-- 用于触觉反馈设备  
  4. embossed-- 用于凸点字符(盲文)印刷设备  
  5. handheld-- 用于小型或手提设备  
  6. print-- 用于打印机  
  7. projection-- 用于投影图像,如幻灯片  
  8. screen-- 用于计算机显示器  
  9. tty-- 用于使用固定间距字符格的设备。如电传打字机和终端  
  10. tv-- 用于电视类设备   

虽然media有10个值,但我们经常看到的也就print,和screen两种。当然也会有没有media标签的情况,这个时候其实就是默认media="all"。
既然如此,那我们也就相当于了解了,如果你需要打印,那么你在按下打印的时候,系统就会默认调用media="print"所对应的CSS文件了。也因此这样可以让你更好的整理你的打印页面,比如把一些不需要打印的内容屏蔽掉、优化打印页面(让内容更利于被打印)等等

虽然我不是前端,但。。了解一下这些内容还是有点用处的。

Tags: css, media, screen, print

写HTML和CSS的新方法

Zen Coding 一个用来简化编写 HTML,XML, XSL (或是其它一些诸如此类格式的编辑器)。其主要是用一种缩写方式的语法来书写大量重复和无味的HTML,很像CSS语法。下面是一个例子:div#page>div.logo+ul#navigation>li*5>a

效果就是:

XML/HTML代码
  1. <div id="page">  
  2.         <div></div>  
  3.         <ul id="navigation">  
  4.                 <li><a href=""></a></li>  
  5.                 <li><a href=""></a></li>  
  6.                 <li><a href=""></a></li>  
  7.                 <li><a href=""></a></li>  
  8.                 <li><a href=""></a></li>  
  9.         </ul>  
  10. </div>  

 

这玩意是我在PHPRPC群里缘起缘灭推荐的,看了一下,效果还不错。。再去官网看了一下,居然有支持notepad++,很兴奋的下载下来使用了。效果还不错。

如果你一直是在用手写HTML代码而不是用IDE,确实 推荐一下。

上面的演示内容来自:http://coolshell.cn/?p=2406,官网请点击:Zen Coding

 PS:如果你真的不会用,没关系,这里还有一个PDF下载下来看看就行了:zencodingcheatsheet.pdf

Tags: xpath, html, css

Rel与CSS的联合使用

说实话,rel在我眼里除了link CSS的时候用过,其他时候我还真没用过。根本不知道REL是用来干嘛 的。看了这篇文章才知道原来Rel还可以这么用。

原文是

Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。

Wordpress很早就引入了rel标准,在我们添加新链接的时候就可以看到“关系”属性。

早期某些社交类搜索引擎可根据这个标签来判断人与人之间的关系,但它对网页开发来说并无意义,值得庆幸的是随着浏览器的逐渐升级,我们可以利用 CSS属性选择器以及REL来做一些有意思的功能。

这是一段带有REL属性的HTML结构。

XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  

页面中他呈现这个样子

大小: 3.47 K
尺寸: 238 x 148
浏览: 659 次
点击打开新窗口浏览全图

因为局长和小李是两个不同的阶级,所以我们应该有区分他们,我打算在小李和局长后面增加两张图片让他表现出这个样式。

大小: 5.38 K
尺寸: 169 x 115
浏览: 669 次
点击打开新窗口浏览全图

过去,我们需要在两个链接标签上增加不同的class来实现这种样式,并且我们需要针对不同的样式书写不同的CSS

XML/HTML代码
  1. <style>  
  2.  .c,.b {background:url(01.png) right center no-repeat;}  
  3.  .b {background-image:url(02.png);}  
  4. </style>  
  5. <ul>  
  6. <li><a href="#" rel="civil" class="c">小李</a></li>  
  7. <li><a href="#" rel="party" class="b">局长</a></li>  
  8. </ul>  
现在,我们可以利用REL属性以及属性选择器来完成这个工作。
CSS代码
  1. a[rel~="civil"]{background:url(01.png) rightright center no-repeat;}  
  2. a[rel~="party"]{background:url(02.png) rightright center no-repeat;}  
同时,我们的HTML结构也可以剔除那些多余的样式了。
XML/HTML代码
  1. <ul>  
  2. <li><a href="#" rel="civil">小李</a></li>  
  3. <li><a href="#" rel="party">局长</a></li>  
  4. </ul>  
另外:ie6不支持属性选择器,但我们可以用JS来修复这个问题。

--EOF--

最后一句话实在让人寒心,不过总算也可以这样的做了,再过一两年,还有IE6的存在吗?IE6的时间够长了吧?好象从02年开始到现在,都经历了8年左右的时间了,居然还没有被消亡。习惯这东西真害人。。。。

原文地址为:rel与CSS的联合使用,不过其实我更喜欢第二幅图后面的小图标

 

Tags: 前端, css, rel

CSS Position Fixed for IE6

我对CSS的了解少之又少,还好公司有美工,非常精通这些。但偶尔在自己写的时候可就没有人帮助了。所以,看到点资料,都会想着记下来。。

想来司徒正美的英文比我好多了,他还能经常去国外的网站,我就不行。。。

以下就来自他的博客了:

逛mootools核心成员Thomas Aylott的 博客看到,不过有点标题党了,实际效果并没有那么灵光,只是定义四个类,分别用来固定视口的上下左右。很遗憾,它无法解决与 top,bottom,left,right并用的问题(见例子)。它利用到IE8已经废弃的expression来计算页面的大小,从而固定我们想固定 的元素。里面用到一技巧,就是给html或body元素添加一张背景图片,并设置background-attachment:fixed,用于强制在页 面重绘之前执行CSS,也就是执行它里面的expression。另,我们也不需要一张真的图片,我们给它一个about:blank命令就可以,就像平 时对付链接一样,仅仅就是想要一个hover效果非得塞给它一个href。

CSS代码
  1. .fixed-top    {position:fixed;bottombottom:auto;top:0px;}  
  2. .fixed-bottombottom {position:fixed;bottombottom:0px;top:auto;}  
  3. .fixed-left   {position:fixed;rightright:auto;left:0px;}  
  4. .fixed-rightright  {position:fixed;rightright:0px;left:auto;}  
  5.   
  6. * html,* html body   {background-image:url(about:blank);background-attachment:fixed;}  
  7. * html .fixed-top    {position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop));}  
  8. * html .fixed-rightright  {position:absolute;rightright:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)));}  
  9. * html .fixed-bottombottom {position:absolute;bottombottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}  
  10. * html .fixed-left   {position:absolute;rightright:auto;left:expression(eval(document.documentElement.scrollLeft));}  
原文中还有例子,而且用他的话来说:要真正解决IE6的这个bug,就需要用到Dean Edwards大神的IE7.js。我是没用过啦。。。。毕竟不做前端

原文来自于:http://www.cnblogs.com/rubylouvre/archive/2009/11/14/1603113.html

 

Tags: css

CSS让你的IE浏览器崩溃

真的从来没有想过,CSS也能够让浏览器崩溃,看到本文的时候,说老实话是吃了一惊。好意外啊。
在测试了几个链接后才发现,现实是残酷的。。让我们看原文吧。

严格来说不单是CSS就能令IE浏览器崩溃(crash),而要配合相应的XHTML架构。到现时为止发现有两种正常写法及一种错误结构分别导致会 IE6、IE7崩溃(crash),至于原因我尝试寻找过答案但至今还没找到…如你有这方面的认识或更详细的资料很希望你能分享

更多请看详细内容

» 阅读全文

Tags: css, xhtml, 崩溃

Records:15123