HTML文档中应用css样式的方法总结

  在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 时,就可以定义候选样式表,只有在用户选择这个样式表时才会用于文档表现。例如:

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

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

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

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

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

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

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

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

    

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

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

三.内联样式

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

时间: 2024-10-24 17:06:24

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

HTML文档中嵌入CSS的几种方法

HTML中嵌入CSS的方法有三种:嵌入式.内联式.引用式. 一.嵌入式 在HTML文档中使用style元素,定义CSS样式. 1 <head> 2 <style type="text/css"> 3 h1{color:red} 4 h2{color:blue} 5 </style> 6 </head> 二.内联式 在每个HTML的元素中都可以定义style属性,该属性只可以对本元素起作用.对于其它元素不起作用. 1 <p style

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

有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样式表或链接到一张外部的样式表. 1  内嵌样式表 样式可以使用style属性内联,该属性可以应用于任意body元素(包括body本身),除了basefont.param和script标记.这个属性将任意数量的CSS声明当作自己的值,而每个声明用分号隔开,如下所示: <p style="colo

JS中获取CSS样式的方法

1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" style="width: 100px;height: 200px;background-color: pink; border: 1px solid green;"></div> <script> var dv = document.getElementB

用JS读写CSS样式的方法总结

为了日后方便查询,本人翻阅了一些资料总结了以下方法,如有不对的地方欢迎指出! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式    如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性    如

用原生JS读写CSS样式的方法总结

一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式    如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性    如:elm.setAttribute('style','color:red;li

删除空白行+删除不可见内容+删除文档中某个样式+阻止快速样式切换

一.删除空白行 操作:编辑组中的替换---选择更多---特殊格式---点击两次 段落标记(替换行中)----点击一段落标记(被替换为) 二.删除不可见内容 操作:文件---检查问题---检查文档---是---检查(检查器对话框)---不可见内容  全部删除---重新检查确认是否删除完,然后再关闭 三.删除文档中某些样式 样式功能组---管理样式---导入/导出---选中所有需要删除的样式---删除 四.阻止快速样式切换 样式组功能---管理样式---限制---勾选阻止样式自动切换 原文地址:ht

html5 中的 css样式单 的 两种调用方式的区别

在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有的样式单,推荐使用这种方式. 2.导入外部样式文件:此方式与第一种方式类似,但是需要用@import来引入外部样式单.由于某些浏览器(如 internet explorer)会在导入外部样式单时导致闪屏,所以不推荐用这种方式,而是尽量考虑使用第一种方式. 3.使用内部样式定义:这种方式是通过在htm

Jquery对象的文档处理,CSS和事件

文档处理 append:向每个匹配的元素内部追加内容.这个操作与对指定的元素执行appendchild方法,将它们添加到文档中的情况类似 <p>i would like to say</p> $("p").append("<b>hello</b>"); 结果: [<p>i would liek to say:<b>hello</b></p>] appendTo:把所有匹配

在文档中添加标签名、ID、类名

使用 Brackets 实时预览功能调试 CSS 样式时,添加如下代码到页面,可以帮助制定选择器. CSS样式: <style> small { display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px; font-weight: normal; line-height: 1; color: #468847; text-align: center; white-space: nowrap; vertica