2022-03-14|閱讀時間 ‧ 約 2 分鐘

CSS - @import的使用

@import可以將一個style sheet 導入另一個style sheet

example:

匯入式:

<style>

@import url('/***.css')

</style>

連結式:

顧名思義，就是創造一個css的stylesheet，然後進行連結(link)

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

再來我們開啟***.css的頁面，再進行匯入

@import url('***.css')

使用@import的好處在於我們能夠匯入已經製作好的stylesheet進以擴充自己的stylesheet。

以google fonts為例，譬如說我想使用poppins這個特殊字體我可以直接選擇我想要的樣式，直接匯入到我的stylesheet:

@import url('https://fonts.googleapis.com/css2?family=Poppins:

ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900

;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

poppins總共有18種風格，在這個範例，我將18種風格全選了，再依照css rule去指定你要的變化，以poppins Bold 700 italic為例：

* {

font-family: 'Poppins', sans-serif;

font-weight: 700;

font-style: italic;

最後出現的字體風格就會是Bold 700 italic。

讀取順位請將@import放在css頁面的最前列。

分享至

成為作者繼續創作的動力吧！

Yi-Ming Ou的沙龍的其他內容