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頁面的最前列。