在編寫網頁時，CSS 是不可或缺的一部分。它使網頁上的元素如文字、圖片、布局等方面都可以通過樣式進行呈現，從而幫助我們實現網頁的美化及排版等工作。Vue.js 作為一個流行的前端框架，可以協助我們更好地管理網頁的各元素，同時， Vue.js 也允許我們從外部文件中調用 CSS 樣式表。
在 Vue.js 中調用外部 CSS 樣式表十分簡單。我們只需要在 HTML 文件中插入一個<link>標簽，并指定對應的 CSS 文件即可。
<head>
<link rel="stylesheet" href="style.css">
</head>這里指定的文件名是 style.css，可以看出我們需要事先準備好一個名為 style.css 的文本文件，并將其中的 CSS 樣式規則寫入其中。然后，我們通過上述的 HTML 代碼將其鏈接到我們的 Vue.js 程序中使用。
同時，也可以在 Vue.js 中使用內聯 CSS 樣式表，只需用style屬性設置即可：
<div id="app">
<p style="color: red">這是一段紅色的文字</p>
</div>
<script>
var app = new Vue({
el: '#app'
});
</script>在這個例子中，我們在<p>標簽中通過stylecolor: red屬性設置了內聯樣式表，使文字顯示為紅色。這種方式雖然簡單，但如果在很多地方使用可能會導致 HTML 文件不易維護。
除了設置全局的 CSS 樣式表外，我們也可以為 Vue.js 中的組件設置局部的 CSS 樣式表。這種方式非常適合于大型網頁應用程序的情形，因為這樣我們可以按需加載 CSS 樣式表，縮短頁面加載時間，加速頁面渲染。
為了實現這種功能，我們可以在 Vue.js 組件的代碼中使用一個特殊的選項<style>來定義局部樣式表：
<template>
<div class="message">
{{ title }}
</div>
</template>
<script>
export default {
data () {
return {
title: 'Hello, World!'
}
}
}
</script>
<style scoped>
.message {
color: red;
}
</style>在這個例子中，我們為組件<div>添加了一個名為 message 的 CSS 類。并且，在<style>元素中使用了 scoped 屬性，表示這是一個應用于當前組件內的局部 CSS 樣式表。
總的來說，Vue.js 為前端程序員提供了豐富的功能及便利，使我們在編寫網頁時可以更加靈活、高效地管理 CSS 樣式表，提高我們的開發效率。