返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

如何将css样式表加入到网页?

时间:2011-09-30 01:21来源:知行网www.zhixing123.cn 编辑:麦田守望者

可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 !important 声明。
  链入外部样式表文件 (Linking to a Style Sheet)
  你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:
  <head>
  <title>文档标题</title>
  <link rel=stylesheet href="dhtmlet.css" type="text/css">
  </head>
  而在XML中,你应该如下例所示在声明区中加入:
  <? xml-stylesheet type="text/css" href="dhtmlet.css" ?>
我们推荐采用这种引用外部样式表的方法。
链入外部样式表是把样式表保存为一个样式表文件,也就是一个扩展名为css的文本文件然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:

<head>
……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……
</head>

上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。media是选择媒体类型,这些媒体包括:屏幕,纸张,语音合成设备,盲文阅读设备等。

这个链接告诉浏览器:在显示该HTML文件时,应使用给出的CSS文件进行布局。
这种方法的优越之处在于:多个HTML文档可以同时引用一个样式表。换句话说,可以用一个CSS文件来控制多个HTML文档的布局。
一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时,所有页面的样式都随之而改变。在制作大量相同样式页面的网站时,非常有用,不仅减少了重复的工作量,而且有利于以后的修改、编辑,浏览时也减少了重复下载代码。

样式表文件可以用任何文本编辑器(例如:记事本)打开并编辑,一般样式表文件扩展名为.css。内容是定义的样式表,不包含HTML标记,mystyle.css这个文件的内容如下:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
/*定义水平线的颜色为土黄;段落左边的空白边距为20象素;页面的背景图片为images目录下的back40.gif文件*/

打开记事本(或其他文本编辑器),创建两个文件——一个HTML文件,一个CSS文件——它们的内容如下:

index.html
<html>
<head>
<title>我的文档</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>我的第一个样式表</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
然后,把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名(分别为“html”和“css”)。

用浏览器打开index.html,你所看到的页面应该具有红色背景。恭喜!你已经完成了自己的第一个样式表!
  定义内部样式块对象 (Embedding a Style Block)内嵌样式表,也叫内部样式表(style元素)
  你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。 定义方式请参阅样式表语法。示例如下:
  <html>
  <head>
  <title>文档标题</title>
  <style type="text/css">
  <!--
  body {font: 10pt "Arial"}
  h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
  h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
  p {font: 10pt/12pt "Arial"; color: black}
  -->
  </style>
  </head>
  <body>
  请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。
有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生,我们用加HTML注释的方式(<!-- 注释 -->)隐藏内容而不让它显示。
  内联定义 (Inline Styles)内联式样式表,也叫行内样式表(style属性)
  内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
内联式样式表是用于元素标签的STYLE属性定义,设置某段文字和其他段落的文字显示风格。它就是修饰某个标签,适用于单个标签。使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值,如下例:

<p style="color: sienna;margin-left: 20px;">
这是一个段落
</p>
<!--这个段落颜色为土黄,左边距为20象素-->

通过行内样式表将页面背景设为红色:
<html>
<head>
<title>例子</title>
</head>
<body style="background-color: #FF0000;">
<p style="font-size:15px;">这个页面是红色的</p>
</body>
</html>

在style参数后面的引号里的内容相当于在样式表大括号里的内容。
注意:style参数可以应用于任意BODY内的元素(包括BODY本身),除了BASEFONT、PARAM和SCRIPT。
 

------分隔线----------------------------
标签(Tag):css
------分隔线----------------------------
推荐内容
猜你感兴趣
博聚网