App下載

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

獨(dú)留清風(fēng)醉 2021-09-09 10:37:41 瀏覽數(shù) (2066)
反饋

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

1. display:flex;

是否有必要將元素居中?

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

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

?display:flex;?將一個接一個地在水平行中對齊您的子元素。要使其成為垂直行,請?zhí)砑??flex-direction: column; ?到代碼的末尾。

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

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

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

這里可以傳遞很多屬性,但我只強(qiáng)調(diào)一個: ?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? 等直接將屬性附加到邊上,或者你可以使用單個邊距屬性來覆蓋所有內(nèi)容:

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

如果省略 ?bottom?,它將繼承 ?top ?(查看我們的示例)!如果省略 ?left?,它將繼承 ?right?。

3. padding

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

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

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

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

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

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

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

4. background-color

這是一個相對簡單的方法,但它是必須的。此屬性適用于大多數(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

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

6.opacity

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

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

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

7.width

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

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

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

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

8. height

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

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

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

9.cursor:pointer;

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

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

10. font-size

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

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

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

11. font-family

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

12.:hover

這將在懸停時為某個元素添加任何效果。

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

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

結(jié)論

如果我告訴你,你會用這 12 個屬性解決大部分 CSS 問題呢?

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

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


CSS

0 人點(diǎn)贊