200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 把css样式表与html网页关联的方法 Dreamweaver 教程-CSS样式表的3种关联方法

把css样式表与html网页关联的方法 Dreamweaver 教程-CSS样式表的3种关联方法

时间:2021-11-06 09:59:30

相关推荐

把css样式表与html网页关联的方法 Dreamweaver 教程-CSS样式表的3种关联方法

下面我们来讲讲如何为一个网页添加CSS样式。

内部样式表

内部样式表需要在网页的

部分定义,格式如下:

行内样式表(内嵌样式表)

它的使用方法我们在前两节也已经使用过了。行内样式表直接在标签内部定义,使用style属性,格式如下:

例如:

段落内容

外部样式表

使用外部样式表时,CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件,你需要在网页的

部分插入以下内容: /*文件位置就是所处在的文件夹相对与当前网页的相对路径*/

下面我们以一个实例来看看如何使用外部样式表:

link标签为网页链入了一个CSS样式表文件“waibu.css”,HTML文档和CSS文件的源代码分别如下。htmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd">

我真惨!被用来演示CSS!

我是页面最上端的标题1

我是页面左侧的标题1,用来导航

我是页面新闻的标题1

我是新闻的内容。

提示:此例中,HTML文档和外部CSS文件要保存在同一个文件夹。h1.dabiaoti{ font-weight:bolder; text-align:center; } h1#daohang{ font-size:12px; font-weight:bolder; text-align:left; } .xinwen{ font-size:16px; font-weight:bold; text-align:center; color:green; } p{ text-align:center; }

层叠的意义

当我们为同一个标签多次设置样式表的时候,这些样式表会最终层叠成一个样式表来作用于标签。例如,你在外部样式表中为p定义了如下样式:p{text-align:left;}

而在内部样式表中又定义了如下样式:p{text-indent:24px;}

那么最终网页内p标签的样式将为: p { text-align: left;text-indent: 24px;}。

几种样式表的优先级

上面的两个样式表的层叠比较好理解,两个样式表分别定义了一个标签的不同属性。但是如果外部样式表与内部样式表同时定义了一个属性呢?看下面的例子。

外部样式表的内容:p{text-align:center;}

内部样式表的内容:p{text-align:left;}

最终页面中的段落将是左对齐,也就是说如果你试图对同一标签的同一属性多次定义,那么内部样式表的定义将要覆盖外部样式表的定义。这是因为内部样式表的优先级高于外部样式表。三种样式表的优先级由高到低排列如下:行内样式表(内嵌样式表)

内部样式表

外部样式表

补充规则:优先级相同的情况下,后定义的属性会覆盖先前定义的。

其他高级规则:CSS中的important!可用于浏览器兼容的问题,等以后再学习。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。