这些css关联方式

CSS关联有三种方式:

  • link标记,外部样式表

必须在<head>中

简单例子:<linkrel="stylesheet" type="text/css" href="" media="" />

上述例子中,rel代表着relation关系,type描述了link标记加载的数据类型,而media属性说明该文件应用于什么媒体,很多属性值。

候选样式表(alternate stylesheet),如果浏览器能使用候选样式表,会使用link元素的title属性生成一个候选样式列表。

例子:

<link rel="stylesheet"type="text/css" href="" media=""title="default" />

<link rel="alternate stylesheet" type="text/css"href="" title="black bgc"/>

通过link的title属性来设置候选样式表。IT热门行业

  • style元素,内部样式表

<style type="text/css">

Style元素必须以此开头,以</style>结束

两者之间的样式被成为文档样式表(document style sheet),或者是嵌套样式表(embedded style sheet)

  • 内联样式

例子:

<p style="color: sienna;margin-left: 20px">This is a paragraph</p>

不推荐使用,影响结构和表现分离。

  • @import指令

这是个人没用过的方式。

@import url(sheet2.css)

和link标记类似,用来指示浏览器加载一个外部样式表。区别在于命令的具体语法和位置。

@import用在style容器中,放在其他css规则前面,否则不起作用。

每个@import指令的样式表都会加载并使用,无法指定候选样式表,但是可以限制应用的媒体类型。

例子:

@import url(sheet.css); all;

@import url(sheet1.css) print;

不过@import最有效的地方是,外部样式表需要使用其他外部样式表中的样式,而外部样式表不能包含任何文档标记,不能使用link标记

@import url(basic.css);

@import url(http://example.com/sheet.css)

@import ur(low.css) print;

body{color:red;}

h1{color:blue}

import指令的处理是不同的,可是适当利用这点来针对浏览器“隐藏样式”。

书上说,ie不会忽略任何@import样式,其他浏览器会忽略不当的@import指令。

本人实测

例子:

<body>

// 将h1标题背景设为红

<styletype="text/css">@import url(red.css);body{color:blue};</style>

<h1> 二浪真二,骚蹂真骚</h1>

</body>

时间: 2024-10-13 15:56:21

这些css关联方式的相关文章

CSS hack方式

史上最全的CSS hack方式一览 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的C

史上最全的CSS hack方式一览

做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应

CSS 引入方式

HTML 中引入 CSS 的方式 有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件.下面我们就来看看这些方式和它们的优缺点. 内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS. 示例: <div style="background: red"></div> 这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <

CSS引入方式,高级选择器

css引入方式:  1.内部样式      style标记      在head标记中     应用范围:当前整个页面中应用  2.行内样式      style属性      <p  style="color:black; font-size:24px">行内样式</p>    应用范围:指定的标签内应用,优先级高于内部样式     不太推荐用这种方式  3.外部样式      声明:.css样式文件       引入:         链接方式:<li

项目复习期总结3:CSS引入方式,注释,命名规范,背景,行高,文本属性

目录: 1.CSS注释的书写 怎么写?好处? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等所有属性 ① CSS注释书写规范: 1.单行注释:    直接写在属性值的后面,如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .wr

热烈庆祝UE4完全免费Free---GitHub的关联方式

热烈庆祝UE4完全免费Free---GitHub的关联方式 时间:2015-03-03 18:38:52      阅读:3007      评论:0      收藏:0      [点我收藏+] 声明:所有权利保留. 转载请说明出处:http://blog.csdn.net/cartzhang/article/details/44040317 IF YOU LOVE SOMETHING, SET IT FREE 我真是喜欢这句啊! Unreal Engine 4 is now availabl

CSS引入方式的区别详解

在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外部引入,那么这三者有何区别?本文给大家讲解了从不同的角度分析他们的优势与劣势. 1.外部引入: 在HTML的head部分<link rel="stylesheet" type="text/css" href="css文件路径">,引入外部

项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性

文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ① CSS凝视书写规范: 1.单行凝视:    直接写在属性值的后面.如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .w

css引入方式

1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link rel="stylesheet" href="./Untitled-2.css"/> 3.直接在html标签里面写入对这个标签的css控制如:<div style="color:green;">css引入方式 </div>