CSS层叠样式的学习[1]

css

1.连接到一个外部的样式表

将一个外部的样式表加入到HTML网页中使用下列的格式:

<LINK REF=  HREF=  TYPE=   MEDIA=>

<LINK>标记放置到文档的head部分。

其中REF属性用于定义的连接文件与HTML文档之间的联系。REL=StyleSheet指定一个固定的首选样式。固定样式在样式表被激活时总是被应用。网页制作者不能指定多于一个的首选样式。

交互样式通过REL="Alternate StyleSheet"指出。例子中的第三个<LINK>标记定义一个交互样式,用户可以选择用来代替首选样式表。

注意现在的浏览器一般都缺乏选择交互样式的能力。

单一的样式也可以通过多个样式表给出

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">
<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

在这个例子中,三个样式表组合成一个"Contemporary"样式,作为一个首选样式表被应用。要组合多个样式表成一个单一样式,必须在每个样式表中使用相同TITLE。

可选的TYPE属性用于指定媒体类型--text/css是一个层叠样式表--允许浏览器忽略它们不支持的样式表类型

<LINK>标记也有一个可选的MEDIA属性,用于指定样式表被接受的介质或媒体。允许的值有

screen (缺省值),提交到计算机屏幕;
print, 输出到打印机;
projection,提交到投影机;
aural,扬声器;
braille,提交到凸字触觉感知设备;
tty,电传打字机 (使用固定的字体);
tv,电视机;
all,所有输出设备。
当样式被应用到很多的网页时,一个外部样式表是理想的。网页制作者使用外部样式表可以改变整个网站的外观而仅仅通过改变一个文件。同样的,大多数浏览器会保存外部样式表在缓冲区,从而如果样式表在缓冲区就避免了在展示网页时的延迟。

2.嵌入一个样式表一个样式表可以使用STYLE元素在文档中嵌入:

一个样式表可以使用STYLE元素在文档中嵌入:
<STYLE TYPE="text/css" MEDIA=screen><!--  BODY  { background: url(foo.gif) red; color: black }  P EM  { background: yellow; color: black }  .note { margin-left: 5em; margin-right: 5em }--></STYLE>STYLE元素放在文档的HEAD部分。必须的TYPE属性用于指定媒体类型,LINK元素也一样。同样地,TITLE和MEDIA属性也可以用STYLE指定。
旧版本的浏览器,并不能识别STYLE元素,会将其当作BODY的一部分照常展示其内容,从而使这些样式表对用户是可见的。要防止这样做,STYLE元素的内容要包含一个SGML注解(<!-- comment -->)在里面,像上述例子那样。
嵌入的样式表可用于当一个文档具有独一无二的样式的时候(即只有少数网页需要这样的样式时)。如果多个文档都使用同一样式表,那么外部样式表会更适用。(当一个网站需要统一样式时,则用连接一个外部的样式表(方法一)比较方便,更能优化网站的速度与维护)

时间: 2024-10-30 14:08:51

CSS层叠样式的学习[1]的相关文章

CSS层叠样式的学习[2]

css 1.规则 选择符 任何HTML元素都可以是一个CSS1的选择符.选择符仅仅是指向特别样式的元素.例如, P { text-indent: 3em } 当中的选择符是P. 类选择符 单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式.例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 : code.html { color: #191970 }code.css { color: #4b0082 } 以上的例子建立了两个类,css和html,供HTML的CODE元

CSS层叠样式的主次顺序

css 当使用了多个样式表,样式表需要争夺特定选择符的控制权.在这些情况下,总会有样式表的规则能获得控制权.以下的特性将决定互相对立的样式表的结果. 正如以前所提及的,网页制作者和读者都有能力去指定样式表.当两者的规则发生冲突,网页制作者的规则会凌驾于读者的其它相同权重的规则.而网页制作者和读者的样式表都超越浏览器的内置样式表. 网页制作者应该小心地使用! important 规则,因为它们会超越用户任何的! important 规则.例如,一个用户由于视觉关系,会要求大字体或指定的颜色,而且这

XHTML+CSS:调用样式表

css|xhtml|样式表 web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的.这就要求所有网页设计师必须熟练掌握CSS,如果你以前不常用,那么现在就开始学习吧.要制作符合web标准的网站,不懂CSS是设计不出漂亮的页面的.    事实上,所有表现的地方都需要用CSS来实现.我们以前都习惯用table来定位和布局,现在要改用DIV来定位和布局.这是思维方式的变化,一开始有些不习惯.呵呵,任何变革都会有阻力的,为了享受标准带来的"益处",放弃一些老的传统

CSS的倡导者:学习CSS的10大理由

css 作为一个热门技术,CSS的发展的确有些缓慢.CSS最早被提议在1994年,最早被浏览器支持在1996年,CSS一直被力捧为传统的以HTML为基础的web代码的继承者.CSS使用样式表来控制整个站点字体和布局的能力,使它看起来非常有效率.易于设计和有远见.然而,也一直有荒诞的说法围绕着CSS,阻碍了网页设计师学习和掌握这种语言.究竟是什么让人们大惊小怪呢? 我们访问了大学教师Christopher Schmitt,他是CSS的倡导者之一.Christopher深信CSS将成为网页设计师必备

CSS常用样式效果

虽然CSS样式的学习需要我们动手多实践,需要多做案例,思致思考,但有时候注意资料的收集与整理也是非常重要的,在实际开发中往往会起到事半功倍的效果.在www.3lian.com的文档中,也提供了丰富的内容.下面一些关于按钮.文本框.表单的常用CSS样式.大家可以参考. 一.按钮样式.buttoncss { font-family: "tahoma", "宋体"; /*www.3lian.com*/ font-size:9pt; color: #003399; bord

如何掌握CSS精要,学习网页布局教程

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 CSS是不是真的很难学?其实不难,只是缺少了掌握的经验,拿着一本书硬肯,有没有收获?有!但可能成效不大,作为过来人我觉得被动学习想要记住的东西是很难的,学习它我的经验是可以先掌握精要(重要属性开始),待掌握精要自然而然这些属性远远不够满足自己的需求引起自己求知的欲望,自动延伸其他相关的属性从而自然掌握和加深对CSS的认识.这是我认为的一种方法

css应用样式的顺序-CSS应用层次及顺序的问题

问题描述 CSS应用层次及顺序的问题 本人的代码如下 : asp:gridview -- asp:gridview <div class="goto"> <a href="BasicData.aspx">基础信息维护</a> </div> 问题如下图: ![图片说明](http://img.ask.csdn.net/upload/201508/15/1439639940_44076.png) ![图片说明](http:

Jquery date picker z-index 问题,Timepicker,层叠样式z-index

在使用 Jquery date Timepicker 时候 由于还使用了其他弹出层,导致层叠样式出现些问题. 总结下解决方法 方法一:css里加入这么一行  代码如下 复制代码 .ui-datepicker { z-index:9999 !important} 方法二:  代码如下 复制代码 $('#timepicker').datetimepicker({     beforeShow: function() {         setTimeout(function(){          

火狐-老问题没人理 新发一下 为什么css父样式无法正确显示?

问题描述 老问题没人理 新发一下 为什么css父样式无法正确显示? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" la