软件发布| 专题库| 优优资讯| 苹果专区| 安卓专区| 软件下载| 首页
优优资讯 电脑教程 安卓教程 安卓攻略 苹果教程 苹果攻略 新闻资讯

Dreamweaver入门之CSS样式表的关联方法详解

时间:2015-02-13 来源:本站整理 我要评论

  CSS是目前能够真正做到网页表现与内容分离的一种样式设计语言,我们可以通过三种方法在站点网页上使用样式表,接下来小编就为大家介绍CSS样式表的三种关联方法。

  内部样式表

  内部样式表需要在网页的<head>部分定义,格式如下:

  <head>

  <style type="text/css">

  /*符合CSS语法结构的CSS语句,例如*/   body { background-color: blue; }

  </style>

  </head>

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

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

  <标签 style="符合CSS语法结构的CSS语句">

  例如:

  <p style="text-indent:24px;">段落内容</p>

  外部样式表

  使用外部样式表时,CSS文件与网页文件(html)是分离开来的。要让某一个网页调用一个外部CSS文件,你需要在网页的<head>部分插入以下内容:

  <head>

  <link rel="stylesheet" type="text/css"   href="文件位置/你的CSS文件名.css" />

  /*文件位置就是所处在的文件夹相对与当前网页的相对路径*/

  </head>

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

  link标签为网页链入了一个CSS样式表文件“waibu.css”,HTML文档和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">

  <head>

  <title>我真惨!被用来演示CSS!</title>

  <meta http-equiv="Content-Type"  content="text/html; charset=gb2312" />  <link rel="stylesheet" type="text/css" href="waibu.css">

  </head>

  <body>

  <h1>我是页面最上端的标题1</h1>

  <h1 id="daohang">我是页面左侧的标题1,用来导航</h1>

  <h1>我是页面新闻的标题1</h1>

  <p>我是新闻的内容。</p>

  </body>

  </html>

  提示:此例中,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!可用于浏览器兼容的问题,等以后再学习。
 

用户评论

(已有0条评论)
表情
注:您的评论需要经过审核才能显示哦,请文明发言!
还没有评论,快来抢沙发吧!
快速检索
0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z