css样式表的简介与用法

发布时间:2019-08-02编辑:脚本学堂
本文主要讲了样式表的应用,包括其属性和植入网页里的四种方法,有兴趣的朋友学习一下.

下面看一下关于css样式表的介绍:
1、H1 { color: green } 每一条规则包含一个选择及说明。在例中H1就是选择,是一个具有样式功能的HTML标签。用于定义实际的样式,包括两部分:属性(本例中即color)和参数(green)。

2、可以归类和有继承性。
 H1, P, BLOCKQUOTE { font-family: arial }
这项规则设定所以位于 、 和的标签将用Arial字体显示。
B { color: blue } 这项规则告诉浏览器将所有之内的文字用蓝色显示。下列情况下,浏览器该怎么样处理呢?
All my Web pages will use cascading stylesheets within four weeks.

3、样式表怎么被应于网页当中呢?下面来介绍下将样式表加到网页的4种方法。每种方法各有利弊。

(1)将样式表植入HTML文件中。所有的样式表信息都列于HTML文件的顶部,例:
 

复制代码 代码示例:
<STYLE type=text/css>
<!--
H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }
-->
</STYLE>

(2)将一个外部样式表链接到HTML文件上。
 

复制代码 代码示例:
<LINK href="mystyles.css" type=text/css rel=stylesheet>

(3)将一个外部样式表输入到HTML文件中。 输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用,但输入法则可以。例:
 

复制代码 代码示例:
<STYLE type=text/css>
<!--
@import url(company.css);
H1 { color: orange; font-family: impact }
-->
</STYLE>

(4)将样式表加入到HTML文件行中。
 

复制代码 代码示例:
<H1 style="COLOR: orange; FONT-FAMILY: impact">Stylesheets: The Tool of the Web Design Gods</H1>
<P style="BACKGROUND: yellow; FONT-FAMILY: courier">Amaze your friends! Squash your enemies!</P></B>
</H1>

以前就是简单介绍了css样式表使用方法。