在HTML文档中应用css样式大致有三种方法:1.link标签链接外部样式表;2.使用style元素包含样式表;3.使用style属性,即内联样式

一.link标签链接外部样式表

  先看一条较为标准的link标记语句:

<link rel="stylesheet" type="text/css" href="main.css" media="all" />

  link标记必须放在head元素中,且不能放在其他元素(如title)内部。至于其属性,rel 代表“关系“(relation),在这里,关系为stylesheet,即文档的外部样式表,至于其他值以及含义详情见 http://www.w3school.com.cn/tags/att_link_rel.asp 。type总是设置为text/css,描述了使用link标记加载的数据的类型。href那么简单的就不多说了。media 属性规定被链接文档将显示在什么设备上。当然,link标记还有其他的一些属性,比如title(除了说的这五个,其他的属性貌似都没啥作用了),接下来就说聊到这个title属性的作用。

  外部样式表之候选样式表将rel属性设置为alternate stylesheet 时,就可以定义候选样式表,只有在用户选择这个样式表时才会用于文档表现。例如:

 <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" />
 <link rel="alternate stylesheet" type="text/css" href="bigtext.css" tile="BigText"/>
 <link rel="alternate stylesheet" type="text/css" href="crazy.css" tile="CrazyText"/>

    貌似目前Chrome还不支持这种候选样式表,我也没有找到Chrome的菜单栏,不过IE、FF均支持此功能(切换样式表的方法:按下Alt键打开菜单栏->查看->样式->选择样式表)。注意:①这些样式表只有一个会用于文档显示,不会发生重叠;②并且每个样式表都得有title属性,不然菜单栏里面没有显示;③默认样式表(也叫首选样式表)是rel为stylesheet的样式表,与title属性的值没有关系。

    还可以为候选样式表指定同样的title,把它们分组在一起。例如:

 <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen" />
 <link rel="stylesheet" type="text/css" href="print-sheet1.css" title="Default" media="print" />
 <link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="BigText" media="screen" />
 <link rel="alternate stylesheet" type="text/css" href="print-bigtext.css" title="BigText" media="print" />

    这样以来用户就可以在屏幕和打印媒体中为网站选择不同的样式表。

二.使用style元素包含样式表

  style标记之间的样式称为文档样式表,或嵌套样式表。注意:①一定要使用type属性,其值为"text/css",也可以指定media属性;

  在这里介绍一个@import指令,它用于指示Web浏览器加载一个外部样式表,不过这条指令要放在其他css规则之前,否则不起作用。例如:

    

 <style type="text/css">
     @import url(main.css);
     @import url(sheet1.css) all;
     @import url(print.css) print;
     h1{color:blue;}
 </style>

    @import指令的一个显著作用就是:如果有一个外部样式表,它需要使用其他外部样式表中的样式时就可以在开头使用这条指令导入其他样式表。

三.内联样式

  除了在body外部出现的标记,style属性可以与任何其他HTML标记关联来设置其内联样式。注意:①不能在style属性中使用@import指令

HTML文档中应用css样式的方法总结的更多相关文章

  1. JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...

  2. 【转发】JQuery中操作Css样式的方法

    JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

  4. 将表格添加到Word文档中 ,包括表格样式设置

    创建 Table 对象并设置其属性 在您将表格插入文档之前,必须创建 Table 对象并设置其属性. 要设置表格的属性,请创建TableProperties对象并为其提供值. TablePropert ...

  5. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  6. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...

  7. JavaScript之向文档中添加元素和内容的方法

    一.非DOM方法添加 1.document.write() <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  8. Paragraph 对象&#39;代表所选内容、范围或文档中的一个段落。Paragraph 对象是 Paragraphs 集合的一个成员。Paragraphs 集合包含所选内容、范围或文档中的所有段落。

    Paragraph 对象'代表所选内容.范围或文档中的一个段落.Paragraph 对象是 Paragraphs 集合的一个成员.Paragraphs 集合包含所选内容.范围或文档中的所有段落. 方法 ...

  9. [No00005B] word快速插入当前时间&amp;怎样一次性删除文档中的全部链接

    按Alt+Shift+D键来插入系统日期 按Alt+Shift+T键则插入系统当前时间 同时,在插入的时间上右键->编辑域 一次性删除文档中的全部链接: 方法1:一劳永逸法(推荐) 因为链接大多 ...

随机推荐

  1. 图片浏览(CATransition)转场动画

    Main.storyboard ViewController.m // //  ViewController.m //  8A04.图片浏览(转场动画) // //  Created by huan ...

  2. css 中字体大小

    css属性font-size可以用来设置字体的大小, 可是有时候看到大小的设置是font:bold 20px/24px Verdana, Geneva, sans-serif; 这里的20px/24p ...

  3. wpf 在引用外部的资源字典

    启动的APP.xaml

  4. [Java] List / ArrayList - 源代码学习笔记

    在阅读 List / ArrayList 源代码过程中,做了下面的笔记. LinkedList 的笔记较多,放到了另一篇博文 LinkedList / Queue- 源代码学习笔记 List List ...

  5. Swing JDialog监听回车键

    在做项目时,发现在JDialog中,直接通过addKeyListener来监听回车键不起作用,无法监听到回车键,后面在网上查了些资料,终于解决了.方法如下: KeyStroke stroke = Ke ...

  6. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  7. 冲刺Two之站立会议4

    在完成了对主界面的设计之后,我们对自己的聊天室界面进行了优化,添加了一些标签和图片按钮等组件让界面更加美观一些.然后还查询了一些关于改进视频和音频质量的资料,准备开展相关工作.

  8. 三步轻松搞定delphi中CXGRID手动添加复表头(多行表头,报表头)

    网上有代码动态生成cxgrid多行表头的源码,地址为:http://mycreature.blog.163.com/blog/static/556317200772524226400/ 如果要手动设计 ...

  9. dede 添加自定义函数

    include/extend.func.php里添加函数 function GetTopTags($str){$dsql = new Dedesql(false);$row = $dsql->G ...

  10. Wap版

    Wap版:又叫h5.M版.移动网页版: Mobile:存储wap版调用的接口