CSS:<link>标签rel和media的解释

代码:

media = "screen" rel = "stylesheet"

rel:relations的缩写,是指的关联到的文件是什么。此处是指关联到一个stylesheet

rel = "shortcut icon"和"icon"的区别:

shortcut icon特指浏览器地址栏左侧显示的图标,一般大小为16 x 16, 后缀名为.icon

icon指的是图标,格式可为png,gif,jpeg,尺寸一般为16x16, 24x24, 36x36等

应用代码:

<link rel="shortcut icon" href="..." type="image/x-icon">

rel="apple-touch-icon":是IOS设备的私有标签,使得添加到主屏幕上的网站图标使用指定的图片

各尺寸自适应代码:

默认(老设备):57x57,iPad:72x72,iPhone 4,Retina屏:114x114(原尺寸的2倍)

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

media = ‘screen‘:媒体 = 全屏幕

media用于指定这个CSS用于何种设备

screen:缺省值,计算机屏幕

print:打印机

projection:投影机

aural:扬声器

braille:凸字触觉感知设备

tty:电传打字机

tv:电视机

all:所有输出设备

时间: 2024-09-30 22:08:22

CSS:<link>标签rel和media的解释的相关文章

CSS:&lt;link&gt;标签rel和media的解释(转)

代码1: <link href="css/main.css" rel="stylesheet" type="text/css" media="all"> href-----地址 rel--------rel:relations的缩写,是指的关联到的文件是什么.此处是指关联到一个stylesheet(必须) stylesheet------stylesheet英文的意思就是样式表的意思.就是引入css样式的意思 ty

&lt;link&gt;标签的rel属性详解

<link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,<link> 标签没有结束标签.在 XHTML 中,<link> 标签必须被正确的关闭. 除了HTML的标准通用属性之外,link元素还包括很多可选属性: charset, href, hreflang, media, rel, rev, target, title和type.这些属性中,ta

link标签的rel属性

<link>标签定义了当前文档与 Web 集合中其他文档的关系.link 元素是一个空元素,它仅包含属性.此元素只能存在于 head 部分,不过它可出现任何次数.在 HTML 中,<link> 标签没有结束标签.在 XHTML 中,<link> 标签必须被正确的关闭. 除了HTML的标准通用属性之外,link元素还包括很多可选属性: charset, href, hreflang, media, rel, rev, target, title和type.这些属性中,ta

link标签的rel等属性属性的作用简单介绍

link标签的rel等属性属性的作用简单介绍:大家知道通过<link>标签可以引入外部样式表,例如: <link rel="stylesheet" type="text/css" href="style.css" /> 属性解析:1.href:规定引入文件的路径.2.type:规定被链接文件的格式类型.3.rel:用来规定当前文档与被连接文档的关系.如果rel的值是stylesheet,也就是说引入的文件可以作为当前文件的

link 标签中“rel=stylesheet”的作用

最近在用link标签引入外部css文件的时候,忘记加上rel=stylesheet,结果css样式显示不出来,疑惑万分.加上这个css效果就出现了. 首先,我们要知道Link标签有两个作用:1. 定义文档与外部资源的关系:2. 是链接样式表. link标签是用于当前文档引用外部文档的,其次,这个标签的rel属性用于设置对象和链接目的间的关系,说白了就是指明你链进来的对象是个什么东西的, rel各个属性值配置的意思:              Alternate -- 定义交替出现的链接 Styl

Meta,Link标签详解

META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间,它提供用户不可见的信息.下面介绍一些有关标记的例子及解释. META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). ★HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容.常用的HTTP-EQUIV类型有: 1.Content-Type和Content

移动前端工作的那些事---前端制作篇之link标签篇

上文的meta标签中,提到了部分功能要结合link标签进行使用.下面详细的解释一下移动端的link标签.link标签主要是存放CSS文件的地方,同时还有一些专属的移动端设置在这里体现.结合以下代码进行说明: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=d

html 基础之 &lt;link&gt;标签

实例 链接一个外部样式表: <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> 在用于样式表时,<link> 标签得到了几乎所有浏览器的支持.但是几乎没有浏览器支持其他方面的用途. 定义和用法 <link> 标签定义文档与外部资源的关系. <link> 标签最常见的用途是链接样式表

html+css实现标签墙的特效

Html代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="http://fonts.googleapis.com/css?fa