小程序如何引入外部css-猿码集

在小程序开发中，我们有时需要引入外部的CSS文件来给小程序增加样式和美观度。本文将详细介绍小程序如何引入外部CSS。

1. 在小程序中引入外部CSS的原理

在小程序开发中，我们可以使用wxss语言来编写样式表（CSS）。这些样式将被编译成WXML中的样式代码。但是，有些样式可能无法用wxss实现，这就需要引入外部CSS文件来解决问题。

引入外部CSS的原理是在WXML文件中使用link标签引入外部样式表，写入的地址是相对于整个小程序项目的路径。

在WXML文件的head区域中添加link标签，用于引入外部CSS文件。


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

其中，href属性指定的是外部CSS文件的路径，"./"表示在和WXML文件同一目录下。

外部CSS文件的编写与普通的CSS编写相同，需要注意的是，与WXML一样，CSS文件也需要注意大小写和文件名后缀。

例如，我们可以在外部CSS文件中编写以下样式：


p {
  font-size: 14px;
  color: #333;
}

如上代码，将所有段落元素的字体大小设置为14px，颜色设置为#333。

为了更好的展示引入外部CSS文件后的效果，下面我们创建一个示例程序来进行说明。

首先，在小程序根目录下创建一个名为“style.css”的CSS文件，编写如下样式：


.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

例如，在WXML文件中，我们添加以下代码：


<head>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <div class="title">这是一个标题</div>
  <p>这是一个段落</p>
</body>

如上代码，我们创建了一个标题元素，使用了外部样式表中的.title样式，为标题设置了较大的字体大小并加粗，并设置了颜色和下边距；同时，我们也创建了一个段落元素，设置为普通的字体大小和颜色。

接下来就是程序的运行效果：

如上图，我们的标题元素与段落元素被成功渲染，由于我们为标题元素单独设置了样式，使其呈现较大的样式。

引入外部CSS文件可以为小程序增加更多功能和更好的用户体验。通过本文的讲解，我们已经了解了如何在小程序中引入外部CSS文件。在开发过程中，我们可以根据实际需要灵活运用，以满足项目的需求。