前往顾页
以后地位: 主页 > 收集编程 > 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="http://lv-brand.com/dhtmlet.css" type="text/css">
  </head>
  而在XML中,你应当以下例所示在声明区中插手:
  <? xml-stylesheet type="text/css" href="http://lv-brand.com/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
------分开线----------------------------
保举内容
猜你感兴趣