基礎知識

CSS是定義HTML頁面在瀏覽器中的視覺外觀的語言。從基礎到彈性盒子(Flexbox)、CSS網格(Grid)和CSS變數，學習關於CSS的一切。 CSS是一個令人驚嘆的工具，在過去幾年中它得到了很大的發展，引入了許多絕對出色的功能，如CSS網格(Grid)、彈性盒子(Flexbox)和CSS變數。 在你查看這些酷炫功能之前，請退後一步，通過我的CSS入門文章瞭解CSS的基礎知識。 以下是有關現代CSS布局構建的一些更高級主題: 彈性盒子(Flexbox) CSS網格(Grid) 有時，有些東西你以為自己懂，但當你開始實現時，它們可能有些混淆，尤其是當你在網上搜索時，你真的可以找到任何東西: 使用CSS居中 CSS邊距屬性 變量是一個非常重要的主題，它可以使CSS非常接近SCSS和其他預處理器: CSS變量 現在，動畫。動畫是非常重要的。 CSS動畫是執行簡單動畫的最佳方法。更複雜的事情需要使用JavaScript來完成，但CSS非常強大！查看： CSS過渡效果 CSS動畫 CSS在顯示方面有很大作用，但它對於打印文檔也非常重要。如果你有興趣，請查看如何使用CSS進行打印。 Web字體是另一個重要主題。我寫了一篇有關CSS系統字體的文章，介紹了如何使用系統字體，避免加載不必要的數據片段，如果你不是絕對需要它們的話。

了解使用HTML a標籤創建連結的基礎知識。 連結是使用a標籤來定義的。連結的目的地是通過其href屬性來設置。 例如： <a href="https://flaviocopes.com">點擊這裡</a> 在起始標籤和結束標籤之間是連結的文字內容。 上面的例子是絕對URL。連結也可以使用相對URL： <a href="/test">點擊這裡</a> 在這種情況下，點擊連結時，用戶會被移動到當前源頭的/testURL。 注意/字符的使用。如果省略，而不是從源頭開始，瀏覽器只會將test字符串添加到當前URL中。 例如，我在頁面https://flaviocopes.com/axios/上，有以下鏈接： /test點擊後會將我帶到https://flaviocopes.com/test test點擊後會將我帶到https://flaviocopes.com/axios/test 連結標籤內部可以包含其他元素，而不僅僅是文字。例如，圖像： <a href="https://flaviocopes.com"> <img src="test.jpg"> </a> 或者其他任何元素，除了其他的<a>標籤。 如果你想在新標籤中打開連結，你可以使用target屬性： <a href="https://flaviocopes.com" target="\_blank">在新標籤中打開</a>