首先,大家在HTML文件头部使用link标签来引入CSS文件,如下所示:
<link rel="stylesheet" type="text/css" href="style.css">
其中,href属性指定CSS文件的路径,type属性指定文件类型为text/css。此外,大家可以通过在head标签中使用style标签来定义内部样式表。
<head>
<style type="text/css">
p {color:red;font-size:16px;}
</style>
</head>
接下来,大家来看一下外部样式表的使用场景。假设大家的网站有很多页面,每个页面都需要使用相同的样式表,就可以使用外部样式表。大家可以将样式代码写在独立的.css文件中,然后在每个页面中引入该文件,这样可以减少代码冗余,并方便维护。
下面是一个简单的例子,大家将背景色和字体颜色定义在style.css中,然后在HTML文件中引入样式表:
// style.css文件内容
body {background-color: #f2f2f2;}
h1 {color: red;}
//HTML文件内容
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>这是标题</h1>
<p>这是段落内容</p>
</body>
</html>
通过上述代码,大家可以将背景色和字体颜色样式定义在一个独立的文件中,并在需要的地方进行引入,这样整个页面就可以具有统一的风格。
综上所述,外部样式表是一种非常实用的CSS样式应用方式,可以有效减少代码重复和维护难度,提高网页设计效率。