構(gòu)建網(wǎng)站需要了解的所有 CSS 屬性

無論你是剛開始接觸 CSS 還是有很多使用它的經(jīng)驗(yàn)，你都必須承認(rèn)有很多 CSS 屬性。而在那片汪洋大海中，很容易迷茫。你正在從 StackOverflow 復(fù)制和粘貼代碼，直到發(fā)現(xiàn)一個(gè)有效的代碼。但這將如何在更大范圍內(nèi)發(fā)揮作用？為什么它首先起作用？大多數(shù)時(shí)候，你會(huì)為答案而擔(dān)憂。你只需專注于最終產(chǎn)品。一些 CSS 功能在構(gòu)建網(wǎng)站時(shí)很重要，但它們很難被發(fā)現(xiàn)。本文旨在幫助你解決在開發(fā)網(wǎng)站時(shí)可能遇到的最常見的 CSS 問題。讓我們來看看你不能忽略的某些屬性。

1. display：flex；

是否有必要將元素居中？

你可能會(huì)通過谷歌搜索找到數(shù)十種替代答案；但是，大多數(shù)情況下你只需要一個(gè)。

.your-class-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

?display：flex；?將一個(gè)接一個(gè)地在水平行中對(duì)齊您的子元素。要使其成為垂直行，請(qǐng)?zhí)砑??flex-direction: column; ?到代碼的末尾。

你的主軸由 ?flex-direction? 定義。行是默認(rèn)值。

如果你使用 ?justify-content: center;?，則主軸上的元素將對(duì)齊。對(duì)于我們的代碼示例，這表示項(xiàng)目將水平居中。

你的交叉軸由 ?align-items? 定義，這意味著你的元素垂直居中。

這里可以傳遞很多屬性，但我只強(qiáng)調(diào)一個(gè)： ?justify-content: space-between; ?因此，行的開頭或結(jié)尾將沒有邊距。

2.margin

此屬性將確定某些元素之間的距離。

.your-class-name {
  margin-top: 16px;
  margin-right: 12px;
  margin-bottom: 16px;
} 
// shorthand
.your-class-name {
  margin: 16px 12px;
}

您可以使用 ?margin-top?、?margin-right? 等直接將屬性附加到邊上，或者你可以使用單個(gè)邊距屬性來覆蓋所有內(nèi)容：

margin: {{ top }} {{ right }} {{ bottom }} {{ left }};

如果省略 ?bottom?，它將繼承 ?top ?（查看我們的示例）！如果省略 ?left?，它將繼承 ?right?。

3. padding

首次出現(xiàn)時(shí)，填充似乎與邊距相似。

語法與邊距相同，速記也相同。

那么，我們?yōu)槭裁葱枰?/p>

考慮一個(gè)物理手提箱的情況。你想記下這個(gè)案子。

但是，你不想從左上角開始寫作。你應(yīng)該稍微縮進(jìn)你的內(nèi)容。

填充將用于此。我們元素的內(nèi)部受到填充的影響。

但是，如果你有兩個(gè)彼此靠近的行李并希望在它們之間留出空間，則可以使用邊距。

4. background-color

這是一個(gè)相對(duì)簡單的方法，但它是必須的。此屬性適用于大多數(shù) HTML 組件。

background-color: blue;
background-color: #232323;
background-color: rgb(255, 255, 128);
background-color: rgba(255, 255, 128, 0.5);

屬性的范圍可能從基本顏色名稱到其 HEX 值和 RGB 值（甚至 HSL）。

RGBA 令人著迷，因?yàn)樗试S您設(shè)置不透明度和顏色。你看到0.5了嗎？這意味著將有 50% 的透明度。

5.color

顏色與背景顏色相似，不同之處在于它會(huì)影響文本的顏色。其他一切都一樣，甚至是透明度。

6.opacity

但是我們可以讓任何事情變得透明！

opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility

這對(duì)于禁用狀態(tài)或有趣的效果很有用。

7.width

這是一個(gè)很難的問題。大多數(shù)時(shí)候你不想有固定的寬度。ni的設(shè)計(jì)應(yīng)該適合移動(dòng)設(shè)備，你可以使用邊距和填充來實(shí)現(xiàn)。

但是，有時(shí)你必須得到修復(fù)。那么您想將圖標(biāo)的大小設(shè)置為 24 像素嗎？

另外，看看這篇文章。縮小頁面進(jìn)行探索。你會(huì)注意到它并沒有一路走來。

因?yàn)檎麄€(gè)頁面都包含 ?max-width? 屬性，所以就是這種情況。將其環(huán)繞在你的網(wǎng)站上是個(gè)好主意。

8. height

由于我們滾動(dòng)方向的性質(zhì)，高度比寬度容易得多。

但是，你應(yīng)該盡可能少地使用預(yù)設(shè)高度。你可以執(zhí)行此操作的一個(gè)地方是你的標(biāo)題。

還存在所有其他限定符，例如 ?min-height? 和 ?max-height?。

9.cursor：pointer；

將鼠標(biāo)懸停在此頁面上的任何按鈕上。你能看到光標(biāo)是如何變成一只小手的嗎？

對(duì)此的解釋是游標(biāo)：指針。只要能讓他們做某事（按鈕、鏈接等），就應(yīng)該使用它。

10. font-size

這個(gè)易于使用并控制文本大小。如果你是一個(gè)完全的初學(xué)者，我建議堅(jiān)持使用 ?px?。

如果你想深入一點(diǎn)，看看 ?rem?。簡而言之，你以 ?px? 為單位設(shè)置默認(rèn)字體大小，所有其他字體都與該數(shù)字成比例。

例如，如果你的基礎(chǔ)值為 ?16px?，則 ?2rem ?將為 ?32px?。

11. font-family

你是否正在尋找各種字體？?Google Fonts? 很棒，選擇一個(gè)，將它包含在您的 ?index.html? 中，并將其名稱添加到 ?font-family? 中是輕而易舉的。

12.：hover

這將在懸停時(shí)為某個(gè)元素添加任何效果。

.your-class-name:hover {
  cursor: pointer;
}

我們的示例將光標(biāo)更改為指針。

結(jié)論

如果我告訴你，你會(huì)用這 12 個(gè)屬性解決大部分 CSS 問題呢？

當(dāng)然，根據(jù)你的情況，你可能需要更多，或者你需要更深入地研究其中一些。

但這足以構(gòu)建一個(gè)外觀穩(wěn)固的網(wǎng)站。