城市天際線

對於鄉下長大的我來說，住在透天房子，在巷弄內玩耍是我小時候的記憶，對於許多高樓的城市，而且人們都住在狹小的公寓之中感到新奇，一想到玄關擺放著爺爺的輪椅，如果是在大樓中對於老人家似乎一點都不方便。

接下來的任務除了新的東西，也大量的用到前面任務所學到的技術，配合厲害的設計就可以展現出漂亮的畫面，例如這次任務的城市畫面。

自定義屬性(Custom Properties)

如果在一個CSS文件中大量使用到一個屬性，後續想要變更(例如說文字顏色)，這不僅再修改及維護都需要花很多時間，也很容易沒改到或改錯，因此，將這個屬性設定成一個變量，後面使用它是一個很不錯的方式。

- 自訂義：

以兩個減號 -- 開頭，輸入名稱，冒號後面輸入屬性就完成了。通常會直接定義在根元素之下，因為這可以讓巢狀結構下的子元素都繼承到這個變量，例如：

:root{
    --building-color1: #aa80ff;
}

使用自訂義：

用var()這個函數來拿到自訂義的屬性，例如：

.building1{
    background-color:var(--building-color1);
}

透過多屬性的結合，能夠展現更多的變化，例如：

.building2{
    background:
    repeating-linear-gradient(
        var(--building-color2),
        var(--building-color2) 6%,
		var(--window-color2) 6%,
		var(--window-color2) 9%
    );
}

值的有效性

這讓背景background的使用更具有多樣性，但是別忘了，定義的屬性必須對於這個樣式是有效的才會發生作用唷，例如：

:root{
    --building-color3: 16px;
}

.building3{
    background-color:var(--building-color3);
}

/* 這樣是不會發生作用的 */

下篇：城市(下)

引用與資源：
freecodecamp
mdn_web_docs_custom_properties
我的城市天際線