css如何嵌入外部样式表

CSS嵌入外部样式表是Web开发中非常重要的一部分。通过嵌入外部样式表，可以大大提高Web页面的可维护性。

css如何嵌入外部样式表

外部样式表通常以.css为文件扩展名，并与HTML文档分开保存。它可以包含所有需要应用于网站中所有页面的样式。

下面是如何将外部样式表嵌入到HTML文档中：

<head>
  <link rel="stylesheet" href="style.css">
</head>

在<head>标签中，使用<link>元素来引用样式表文件。其中，href属性指定样式表的文件路径，rel属性定义了Media类型，并可选地指定样式表的Title。

当样式表与HTML文档位于同一目录中时，可以只指定文件名。否则，必须在href属性中指定完整路径。

以下是一个具有外部样式表的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>欢迎来到我的Website！</h1>
  <p>这是一个样式表示例。</p>
  <p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nullam aliquet lobortis lorem,vel pulvinar magna gravida nec. Phasellus in erat varius,pretium nunc id,lacinia tortor. Ut varius nisi vitae blandit egestas. Aliquam vel felis ac ligula dignissim maximus. Duis gravida commodo consectetur. Aenean volutpat libero non dapibus vulputate. Donec vel dolor vel tortor elementum posuere non eget mauris. Quisque soDales eros in ultrices sollicitudin. Suspendisse ante magna,bibendum vitae purus eu,mattis tincidunt arcu. Vivamus luctus consectetur mollis. Nulla euismod sagittis viverra.</p>
</body>
</html>

CSS代码：

h1 {
  color: blue;
}
p {
  font-size: 16px;
  color: #333;
}

在该示例中，<h1>和<p>元素分别用CSS样式更改了颜色和字体大小。

css如何嵌入外部样式表

相关推荐