CSS - @import的使用
更新於 2022/03/14閱讀時間約 2 分鐘
@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頁面的最前列。
0會員
3內容數
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
相信大家對於 sticky 這個效果不陌生，網頁上方的導覽列、文章側邊的相關閱讀等，諸多網頁都能看見它的身影，不過這篇不是 sticky 的使用教學，而是我自己的踩雷紀錄😅💣
這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code:
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
在當今日新月異的數位時代，網站已經不僅僅是一個給人們提供資訊的平臺，更是一個互動性、視覺吸引力和功能性兼具的數位體驗。而CSS（Cascading Style Sheets）正是網站設計中的一個重要元素，扮演著關鍵的角色。
CSS Box Model
是在 CSS 裡面，html 的每個元素都可被視作為一個盒子，然後可以針對這個盒子去做調整，看以下圖片:
簡單來說margin就是一個是外邊距，與外層元素的間距
Margin 用於控制元素與其周邊元素的間隔，可以設定為正數（增加與其他元素的距離）、負數（減少與其他
今天來介紹一下比較常用的4種定位方式
其中讓我最搞混的是relative跟absolute
position: relative
還未定top, bottom, left, right 的屬性時，預設會套用position:static，但如果你去設定了top, bottom, left, ri
避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。
相信大家對於 sticky 這個效果不陌生，網頁上方的導覽列、文章側邊的相關閱讀等，諸多網頁都能看見它的身影，不過這篇不是 sticky 的使用教學，而是我自己的踩雷紀錄😅💣
這是一篇關於 CSS 動畫屬性的學習筆記，如果你剛好也在學習的話，歡迎進來看看！
不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。
source code:
E
提供兩個範例，其實before, after就如同字面上的意思，會在前後加上內容。
範例1簡單的在前後加上文字，如下所示，需特別注意，是在div內的範例1前後加上文字。
before/after除了可以加上文字以外，還可以作為裝飾效果。如範例2，利用position調
css display grid可以達到類似table span的排版效果，但還是有些差異，table的span其實是合併，css grid比較像是要佔幾格的意思。
如下程式碼為例，colspan是要往右合併的意思，因此會少一個td。
E
css grid colspan sample code: