Angular2 是一種流行的前端框架,它基于 TypeScript 和 JavaScript。在 Angular2 中,樣式不僅限于單個組件,還可以應用于整個應用程序。這意味著我們可以使用全局 CSS 文件樣式來設置整個應用程序的樣式。
要在 Angular2 中使用全局 CSS 樣式,我們需要在angular-cli.json
文件中設置全局 CSS 文件。在這個文件中搜索styles
,然后將全局 CSS 文件的路徑添加到數組中:
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
在這個例子中,我們將 Bootstrap CSS 庫添加為全局 CSS 樣式,并將我們自己的樣式表文件添加為最后一項。
然后,我們需要將我們的樣式文件命名為styles.css
。現在,我們可以在我們的應用程序中使用全局 CSS 樣式:
/* 全局樣式 */ body { font-size: 14px; font-family: Arial, sans-serif; } /* 組件樣式 */ .app-header { background-color: #f1f1f1; }
在這個例子中,我們設置了全局樣式為頁面的默認字體和文本大小。我們還設置了一個組件樣式app-header
,用于設置頭部的背景顏色。注意,全局樣式表修改了body
標記的樣式,因此所有組件都會受到影響。
總之,在 Angular2 中使用全局 CSS 樣式可以為我們的應用程序提供易于維護和一致的樣式。我們只需要設置angular-cli.json
文件中的全局 CSS 文件路徑,然后在樣式文件中設置全局樣式。