@import可以將一個style sheet 導入另一個style sheet
example:
匯入式:
連結式:
顧名思義，就是創造一個css的stylesheet，然後進行連結(link)
再來我們開啟***.css的頁面，再進行匯入
讀取順位請將@import放在css頁面的最前列。


學習

音樂藝文

職場產業

<div class="draft-block draft--p left">@import可以將一個style sheet 導入另一個style sheet</div>
<div class="draft-block draft--p left">example:</div>
<div class="draft-block draft--p left">匯入式:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">&lt;style&gt;</pre><pre class="draft--code-block">@import url('/***.css')</pre><pre class="draft--code-block">&lt;/style&gt;</pre></pre>


<div class="draft-block draft--p left">連結式:</div>
<div class="draft-block draft--p left">顧名思義，就是創造一個css的stylesheet，然後進行連結(link)</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">&lt;link rel=stylesheet type="text/css" href="***.css"&gt;</pre></pre>
<div class="draft-block draft--p left">再來我們開啟***.css的頁面，再進行匯入</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">@import url('***.css')</pre></pre>
<div class="hr__AtomHrContainer-sc-1afmttx-0 ZmUQI draft-block"><pre class="hr__HrWrapper-sc-1afmttx-1 bHwnUx draft--hr"><hr class="hr__Hr-sc-1afmttx-2 dTIYWL"></pre></div>
<div class="draft-block draft--p left">使用@import的好處在於我們能夠匯入已經製作好的stylesheet進以擴充自己的stylesheet。</div>
<div class="draft-block draft--p left">以google fonts為例，譬如說我想使用<a href="https://fonts.google.com/specimen/Poppins?query=poppins" target="_blank" class="draft--a">poppins</a>這個特殊字體我可以直接選擇我想要的樣式，直接匯入到我的stylesheet:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">@import url('https://fonts.googleapis.com/css2?fa<span style="font-weight: bold; ">mily=Pop</span>pins:</pre><pre class="draft--code-block"><span style="font-weight: bold; ">ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900</span></pre><pre class="draft--code-block"><span style="font-weight: bold; ">;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900</span>&amp;display=swap');</pre></pre>


<div class="draft-block draft--p left">poppins總共有18種風格，在這個範例，我將18種風格全選了，再依照css rule去指定你要的變化，以poppins Bold 700 italic為例：</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">* {</pre><pre class="draft--code-block">font-family: 'Poppins', sans-serif;</pre><pre class="draft--code-block">font-weight: 700;</pre><pre class="draft--code-block">font-style: italic;</pre><pre class="draft--code-block">}</pre></pre>




<div class="draft-block draft--p left">最後出現的字體風格就會是Bold 700 italic。</div>
<div class="draft-block draft--p left">讀取順位請將@import放在css頁面的最前列。</div>
<div class="draft-block draft--p left"></div>

<p>@import可以將一個style sheet 導入另一個style sheet</p>
<p>example:</p>
<p>匯入式:</p>
<pre><code>&lt;style&gt;</code></pre>
<pre><code>@import url('/***.css')</code></pre>
<pre><code>&lt;/style&gt;</code></pre>
<p>連結式:</p>
<p>顧名思義，就是創造一個css的stylesheet，然後進行連結(link)</p>
<pre><code>&lt;link rel=stylesheet type="text/css" href="***.css"&gt;</code></pre>
<p>再來我們開啟***.css的頁面，再進行匯入</p>
<pre><code>@import url('***.css')</code></pre>
<p><br></p>
<p>使用@import的好處在於我們能夠匯入已經製作好的stylesheet進以擴充自己的stylesheet。</p>
<p>以google fonts為例，譬如說我想使用<a href="https://fonts.google.com/specimen/Poppins?query=poppins">poppins</a>這個特殊字體我可以直接選擇我想要的樣式，直接匯入到我的stylesheet:</p>
<pre><code>@import url('https://fonts.googleapis.com/css2?family=<strong>Poppins:</strong></code></pre>
<pre><code><strong>ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900</strong></code></pre>
<pre><code><strong>;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900</strong>&amp;display=swap');</code></pre>
<p>poppins總共有18種風格，在這個範例，我將18種風格全選了，再依照css rule去指定你要的變化，以poppins Bold 700 italic為例：</p>
<pre><code>* {</code></pre>
<pre><code>font-family: 'Poppins', sans-serif;</code></pre>
<pre><code>font-weight: 700;</code></pre>
<pre><code>font-style: italic;</code></pre>
<pre><code>}</code></pre>
<p>最後出現的字體風格就會是Bold 700 italic。</p>
<p>讀取順位請將@import放在css頁面的最前列。</p>
<p><br></p>

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

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

再來我們開啟***.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為例：

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

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

CSS - @import的使用