几个平时不太用到的css

1. HTML元素legend域标题

 

Inserts a caption into the box drawn by the fieldset object.

在fieldset对象绘制的方框内插入一个标题。

legend元素必位于fielset内的第一个元素。在 Internet Explorer 4.0 及以上版本的 HTML 和脚本中可用。legend元素是块元素。并且需要关闭标签，即必须成对出现：<legend></legend>。

 

例子：

<fieldset> 
  <legend>CSS网页布局</legend> 
   <ul> 
     <li>Div+CSS教程 系统的讲述了关于CSS布局的知识</li> 
     <li>CSS布局实例 向你呈现了一些实例</li> 
     <li>CSS模板下载 你可以查看一些模板</li> 
     <li>CSS酷站欣赏 高手与大师的作品定会让你有所收获</li> 
   </ul> 
</fieldset>

 

2.基于内容的(abbr)、(acronym)样式标签

这两个标签的大致用途是一样的，但是也还是有细节上的不同。总结如下：

<abbr></abbr>的作用是表明标签中的内容为缩写形式。例如：
<abbr title=”World Wide Web”>WWW</abbr >
<acronym></acronym>的作用是表明标签中的内容是首字母缩写词。例如：
<acronym title=”Radio detecting and ranging”> Radar</acronym>

 

3.<link>标签的rel属性

<1>. 调用外部样式表

(1). 显示器样式表

link标签最多的使用就是用来调用外部样式表，例如下面这样:

<link rel="stylesheet" href="http://paranimage.com/wp-content/themes/v5/style.CSS" type="text/css" media="screen" />

 其中href是目标文档的URL， type则规定了目标URL的MIME类型，而media规定了文档将显示在什么设备上。

 

(2)打印设备样式表

下面这个webdesignerwall的样式表调用就规定了文档显示在打印设备上时的CSS样式 :

<link rel="stylesheet" href="http://www.webdesignerwall.com/wp-content/themes/wdw/print.css" type="text/css" media="print" />

 

(3)可替换样式表

你可能还会在一些网页中看到诸如下面的样式表调用代码:

<link rel="alertnate stylesheet" href="http://paranimage.com/wp-content/themes/v5/red.css" type="text/css" media="screen" />

 

这段代码定义了一个可替换的样式表，它和第一个link元素同时使用，第一个定义了首选样式，而这个则让用户可选择替换的样式。但这个替换操作需要浏览器支持，但很多浏览器比如IE都是不支持的。

所以使用到替换样式的网页，一般都用一些样式表切换的JS，让用户可以自由切换界面样式。这个应该大家都见过，一些网站会给网页定义多种配色。WordPress用户有兴趣的话，可以下载Small Potato的WPDesigner7这款wordpress主题试用研究一下(或查看DEMO)，它利用一个简单的JS和多个可替换样式，让用户可对网页改变配色。稍高阶的一些，还可以利用JS弄成随时间变化样式的，比如白天的时候显示成明色，晚上的时候显示成暗色。

注释: 为首选样式指定media=”all”，再添加一个打印样式，会比较符合Web标准(尽管对于普通网站来说，不会有几个人想要打印你的网页)。帕兰映像就没有定义打印样式，稍后抽时间搞搞

注释: 是否使用可替换样式是个值得斟酌的问题。如果仅改变配色，整体主调还是不变，那可以接受。但有一些朋友，比如WordPress用户，会启用多个完全不同风格的主题，再利用插件让用户自由变换。这看上去似乎挺酷的，但我的建议是千万别这么做。是否影响seo且不谈，但会让人对你的网站缺乏一种固定形象的认知感。

 

<2>定义网站收藏夹图标

关于favicon/收藏夹图标的详细介绍可以查看百度百科(1, 2)，使用下面的代码调用即可。

<link rel="shortcut icon" href="http://paranimage.com/wp-content/themes/v5/images/favicon.ico" type="images/x-icon"/>
<link rel="icon" href="http://paranimage.com/wp-content/themes/v5/images/favicon.png" type="images/png"/>

 关于这个调用我自己也还有些迷糊，我实验的结果是:

IE只支持ico格式的favicon;
rel属性必须包含shortcut, 才会在IE下显示;
我在制作透明格式的ico时总出问题，总会出现黑底，就算弄了IE下非黑底了，在Chrome下又变成黑底。
于是，制作一个透明的ico和一个透明的png, 第一段供IE浏览器调用，第二段供其它浏览器调用;
注释: 你也可以不使用这个link元素，而直接制作一个favicon.ico文件，并放到网站根目录。

顺定分享: 为你的网站添加Apple Touch图标

iphone或iPod Touch设备允许用户添加网站的链接到主屏上，使用下面的代码可以为你的网站指定一个Apple Touch图标:

<link rel="apple-touch-icon" href="http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png" />