`
conkeyn
  • 浏览: 1525127 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第1章 CSS和文档局 => link标记 P19

    博客分类:
  • CSS
阅读更多

对于<link>标签的属性详解:

      rel代表“关系”(relation),在这里,关系为stylesheet

      type总是设置为text/css

      media属性,一般使用all,这个属性有很多可取值,如:

           all:用于所有表现媒体;

           aural:用于语音合成器,屏幕阅读器和文档的其他声音表现。

           braille:用Braille设备表现文档时使用。

           embossed:用Braille打印设备打印时使用。

           handeld:用于手持设备,如个数字助理或支持WEB的蜂窝电话。

           print:为视力正常的用户打印文档时使用,另外还会在显示文档的“打印预览”时使用。

           projection:用于投影媒体,如发表演讲时显示幻灯片的数字投影仪。

           screen:在屏幕媒婆(如桌面计算机监视器)中表现文档时使用。在这种系统上运行的所有WEB浏览器都是屏幕媒体用户代理。

           tty:在固定间距环境(如电传打字机)中显示文档时使用。

           tv在电视上显示文档时使用。

Opera还支持projection,允许文档作为幻灯片显示。

可以在多个媒体中使用一个样式表,为此要提供应用此样表的媒体列表,各媒体用逗号分隔。例如,可以在屏幕和投影媒体中使用一个链接样式表:

<link rel="stylesheet" type="text/css" href="visual-sheet.css" media="screen,projection"/>


候选样式表

还可以定义候选样式表(alternate style sheet)。将rel属性的值置为alternate stylesheet,就可以定义候选样式表,只有在用户选择这个样式表时才会用于文档表现。

如果浏览器能使用候选样式表,它会使用link元素的title属笥值生成一个候选样式列表。可以设置以下元素:

<link rel="alternate stylesheet" title="Default" type="text/css" href="default-sheet.css" media="screen,projection"/>

<link rel="alternate stylesheet" title="Big text" type="text/css" href="big-text-sheet.css" media="screen,projection"/>

<link rel="alternate stylesheet" title="Crazy colors" type="text/css" href="crazy-colors-sheet.css" media="all"/>

 

在firefox中显示的效果如图:

可以在浏览器中选择你想要的样式效果。

  • 大小: 15.3 KB
分享到:
评论

相关推荐

    《CSS Mastery》《 精通CSS》 中文版高清晰 +英文版 +源码下载===>之4/6

    CSS Mastery 精通CSS 中文版高清晰 +英文版 +源码下载&lt;br&gt;CSS Mastery&lt;br&gt;作者: Andy Budd / Simon Collison / Cameron Moll&lt;br&gt;副标题: Advanced Web Standards Solutions (Solutions)&lt;br&gt;&lt;br&gt;简介 ······ ...

    HTML5&CSS3网页制作:HTML5文档头部相关标记.pptx

    常用的&lt;link&gt; 标记属性名和用法: * href:指定引用的外部文档的地址 * rel:指定当前文档与引用的外部文档的关系 * type:指定引用的外部文档的类型 四、&lt;style&gt; 标记 &lt;style&gt; 标记用于为 HTML 文档定义样式信息...

    css framework 漂亮的CSS

    &lt;link rel="stylesheet" href="../css/screen.css" type="text/css" media="screen, projection"&gt; &lt;link rel="stylesheet" href="../css/print.css" type="text/css" media="print"&gt; &lt;!--[if IE]&gt; &lt;link rel=...

    div+css技术文档

    【div+css技术文档】是关于网页布局与样式设计的基础教程,主要涵盖了CSS的基本概念、应用方式以及常用选择符。CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的...

    HTML登陆界面

    href="images/Default.css" type=text/css rel=stylesheet&gt;&lt;LINK href="images/xtree.css" type=text/css rel=stylesheet&gt;&lt;LINK href="images/User_Login.css" type=text/css rel=stylesheet&gt; &lt;META http-equiv=...

    HTML帮助文档CSS帮助文档CHM离线文档

    1. **CSS3.0(飘零雾雨版).chm**:这可能是一个由社区成员“飘零雾雨”编写的CSS3教程,涵盖了CSS3的新特性,如选择器扩展、边框和背景、布局模式、动画和转换等。用户可以通过这个离线文档学习如何使用CSS3来实现...

    解决ie9、ie10本地css加载不上的解决方法实例

    &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt; ``` 3. **使用条件注释**:IE浏览器支持条件注释,可以针对特定版本的IE加载特定的CSS。例如,为IE9和IE10编写专门的CSS文件,并通过条件注释引入: ...

    HTML5&CSS3网页制作:span标记.pptx

    * 内联元素:`&lt;span&gt;` 标记是一个内联元素,不像块状元素(如:`div` 标记、`p` 标记等)那样有换行的效果。 * 无显示效果:如果不对 `&lt;span&gt;` 元素应用样式,使用 `&lt;span&gt;` 标记没有任何的显示效果。 设置 id 或 ...

    css规范文档

    【CSS规范文档】是指导Web前端开发者遵循的一套标准规则,旨在提高开发效率,确保代码质量和易维护性。规范的核心原则是遵循Web标准,实现语义化的HTML,将结构、表现和行为分离,并保证良好的浏览器兼容性。以下是...

    初学者接触HTML了解一些HTML标记(2)

    25. `&lt;DEL CLASS=classname ID=value LANG=language LANGUAGE=JAVASCRIPT|JSCRIPT|VBSCRIPT|VBS STYLE=css1-properties TITLE=text EVENT=script&gt;`:这个标记用来标记文档中已被删除的文本,可以保留删除痕迹,显示...

    css 中文教程 帮助文档api

    css 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文apicss 中文教程 css帮助文档 css中文api

    html+css文档.zip

    DOCTYPE&gt;声明开始,定义文档类型,接着是&lt;html&gt;元素,它是整个文档的根元素,包含&lt;head&gt;和&lt;body&gt;两个部分。&lt;head&gt;中包含元信息,如字符集设置(&lt;meta charset="UTF-8"&gt;),而&lt;body&gt;包含用户可见的内容。 2. HTML...

    CSS API 文档 层叠样式表

    CSS API文档。层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以...

    css 导航菜单(标签页)设计

    title="Link 1"&gt;&lt;span&gt;Link 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;br&gt;&lt;li&gt;&lt;a href="#" title="Link 2"&gt;&lt;span&gt;Link 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;br&gt;...&lt;br&gt;&lt;/ul&gt;&lt;br&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;效果页面,css和html写得很清楚。&lt;br&gt;下载html打包文件&lt;br&gt;

    boostrap-table.rar

    &lt;link href="css/bootstrap.min.css" rel="stylesheet" /&gt; &lt;link href="css/bootstrap-table.min.css" rel="stylesheet"&gt; &lt;script src="js/jquery.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.min.js"&gt;&lt;/script...

    html+css+js个人博客网页

    &lt;link rel="stylesheet" href="css/common.css"&gt; &lt;link rel="stylesheet" href="css/login.css"&gt;&lt;/head&gt;&lt;body&gt; &lt;!-- 导航栏. nav 是 导航 这个词的缩写 --&gt; &lt;div class="nav"&gt; &lt;!-- logo --&gt; &lt;img src="images/1.jpg...

    css+div技术参考手册

    你可以在你的HTML文档的&lt;HTML&gt;和&lt;BODY&gt;标记之间插入一个&lt;STYLE&gt;...&lt;/STYLE&gt;块对象。 定义方式请参阅样式表语法。示例如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;文档标题&lt;/title&gt; &lt;style type="text/css"&gt; &lt;!-- body {font: 10...

    日历控件js(有很多好看的样式)

    type="text/css" href="css/calendar-green.css" title="green" /&gt;&lt;br&gt;&lt;link rel="stylesheet" type="text/css" href="css/calendar-win2k-1.css" title="win2k-1" /&gt;&lt;br&gt;&lt;link rel="stylesheet" type="text/css" ...

Global site tag (gtag.js) - Google Analytics