您当时的方位:主页 > 言语编程 > CSS

CSS入门教程——款式表参加网页办法

2014-10-22  

在上两节中咱们现已为网页添加过简略的款式表了,咱们也了解了款式表的语法根底。本节将介绍将款式表参加到页面中的几种不同办法。

内部款式表

    其实咱们在前两节现已应用了内部款式表。内部款式表需求在网页的<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>

下面咱们以一个实例来看看怎么运用外部款式表:

请看下面这个网页文件,赤色部分的内容为网页链入了一个CSS款式表文件“waibu.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">
<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 class="dabiaoti">我是页面最上端的标题1</h1>
<h1 id="daohang">我是页面左边的标题1,用来导航</h1>
<h1 class="xinwen">我是页面新闻的标题1</h1>
<p>我是新闻的内容。</p>
</body>
</html>
 
h1dabiaoti {
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; }

    终究页面中的阶段将是左对齐,也便是说假如你企图对同一标签的同一特点屡次界说,那么内部款式表的界说即将掩盖外部款式表的界说。这是由于内部款式表的优先级高于外部款式表。三种款式表的优先级由高到低摆放如下:

  1. 行内款式表(内嵌款式表)
  2. 内部款式表
  3. 外部款式表
  4. 弥补规矩:优先级相同的情况下,后界说的特点会掩盖从前界说的。
  5. 其他高档规矩:CSS中的important!是比较运用的技巧,这儿就不多说了。将在后续的CSS技巧中评论。