CSS简介-IGI

时间：2020-01-09 10:34:37 　来源:igfitidea点击:

级联样式表(CSS)是一种用于对HTML文档进行样式设置的机制。样式意味着设置文本和HTML元素的外观。样式包括诸如是否在HTML元素(例如表格)周围显示边框，以粗体显示文本，选择字体以显示文本等决定。

级联样式表通常与HTML文档本身分开。将HTML文档的外观与文本和HTML元素本身分开具有一些优点：

在HTML文档中包含CSS样式的方法有以下三种：

本文将显示所有三种方法。本文不会涵盖CSS的所有详细信息，而仅提供CSS的介绍。我们将需要查阅其他资源(书籍或者网站)以了解有关CSS的更多信息。

CSS属性

CSS样式设置由一个键值对组成。关键是要为其设置值(样式)的CSS属性的名称。这是一个简单的示例：

font-family : arial;

这个CSS属性名为font-family，其值(样式)为arial。该属性以分号结尾。

CSS可以使用style属性包含在任何HTML元素中。这是一个例子：

<p style="font-family: arial;"> </p>

本示例将p元素的字体系列设置为名为arial的字体系列。

可以在style属性值内设置多个CSS属性。为此，我们可以在分号结束第一个CSS属性之后编写第二个属性。这是一个例子：

<p style="font-family: arial; font-size: 12px;"> </p>

这个例子设置了p元素内的文本的字体系列和字体大小。

通过将样式属性收集在一个style元素中，我们可以设置样式以应用于特定类型的所有元素。这是一个例子：

<style>
p {
    font-family: arial;
    font-size  : 12px;
}    
</style>

本示例为HTML文档中的所有p元素设置了字体系列和字体大小。这样，我们只需设置页面中p元素的样式即可。

通过将p与其他元素的名称交换，例如b或者h1，h2等。我们也可以为其他HTML元素设置样式。例如：

<style>
p {
    font-family: arial;
    font-size  : 12px;
}

h1 {
    font-familly: arial;
    font-size   : 18px;
}
</style>

这个例子为p和h1元素设置CSS属性。

我们可以将它们放在CSS样式表文件中，而不是将CSS属性放置在style元素中。顺便说一句，样式表文件不应包含style元素。仅样式定义本身。

通过将样式定义放在自己的样式表文件中，我们不必为每个HTML文档重新定义CSS样式。我们可以只引用HTML文档中的CSS文件。以下是这种参考的外观：

<link rel="stylesheet" type="text/css" href="/stylesheet.jsp" >

这个示例引用了一个名为stylesheet.jsp的CSS样式表文件，该文件位于网站根目录(/ stylesheet.jsp)中。

这个link元素应该放在HTML文档的head元素内。看起来是这样的：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="/stylesheet.jsp" >
</head>
<body>
</body>
</html>