在嘗試任何CSS之前，你應(yīng)該學(xué)習(xí)HTML的基礎(chǔ)知識(shí)。我們建議您通過我們的HTML簡(jiǎn)介模塊優(yōu)先。

一旦你理解了HTML的基礎(chǔ)，我們建議你同時(shí)學(xué)習(xí)進(jìn)一步的HTML和CSS，在兩個(gè)主題之間來回移動(dòng)。這是因?yàn)楫?dāng)你應(yīng)用CSS的時(shí)候，HTML要有趣得多，學(xué)起來也有趣得多，不了解HTML就學(xué)不會(huì)CSS。

在開始本主題之前，您還應(yīng)該熟悉使用計(jì)算機(jī)和被動(dòng)地使用web(即，只是看著它，消費(fèi)內(nèi)容)。您應(yīng)該有一個(gè)基本的工作環(huán)境，詳見安裝基本軟件，并了解如何創(chuàng)建和管理文件，如中所述處理文件—它們都是我們的一部分開始使用web完整的初學(xué)者模塊。

還建議您完成以下工作開始使用web在繼續(xù)這個(gè)主題之前，尤其是如果您完全不熟悉web開發(fā)的話。然而，它的大部分內(nèi)容CSS基礎(chǔ)文章也包含在我們的CSS的第一步模塊，盡管更加詳細(xì)。

本主題包含以下模塊，按照建議的順序進(jìn)行操作。你應(yīng)該從第一個(gè)開始。

• CSS的第一步

• CSS(級(jí)聯(lián)樣式表)用于設(shè)計(jì)網(wǎng)頁的樣式和布局，例如，改變內(nèi)容的字體、顏色、大小和間距，將內(nèi)容分成多列，或者添加動(dòng)畫和其他裝飾功能。這個(gè)模塊提供了一個(gè)溫和的開端，讓你掌握CSS的基本原理，語法是什么樣的，以及如何開始使用它來為HTML添加樣式。

• CSS構(gòu)造塊

• 這個(gè)模塊在哪里進(jìn)行CSS的第一步停止—現(xiàn)在您已經(jīng)熟悉了這門語言及其語法，并獲得了一些使用它的基本經(jīng)驗(yàn)，是時(shí)候深入一點(diǎn)了。這個(gè)模塊著眼于級(jí)聯(lián)和繼承，我們所有可用的選擇器類型，單位，大小，樣式背景和邊界，調(diào)試，等等。

  這里的目的是為你提供一個(gè)編寫合格CSS的工具包，并幫助你理解所有的基本理論，然后繼續(xù)學(xué)習(xí)更具體的學(xué)科，如文本樣式和CSS布局。

• CSS樣式文本

• 學(xué)習(xí)完CSS語言的基礎(chǔ)知識(shí)后，下一個(gè)CSS主題是對(duì)文本進(jìn)行樣式化——這是使用CSS最常見的事情之一。在這里，我們看看文本樣式的基礎(chǔ)，包括設(shè)置字體，粗體，斜體，行和字母間距，陰影，和其他文本功能。我們通過查看將自定義字體應(yīng)用到您的頁面，以及樣式化列表和鏈接來完成該模塊。

• CSS布局

• 至此，我們已經(jīng)了解了CSS基礎(chǔ)知識(shí)，如何設(shè)計(jì)文本樣式，以及如何設(shè)計(jì)和操作內(nèi)容所在的框。現(xiàn)在是時(shí)候看看如何將你的盒子放置在相對(duì)于視口以及彼此的正確位置。我們已經(jīng)討論了必要的先決條件，所以我們現(xiàn)在可以深入CSS布局，看看不同的顯示設(shè)置，現(xiàn)代布局工具，如flexbox、CSS grid和定位，以及一些您可能仍然想知道的遺留技術(shù)。

使用CSS解決常見問題提供指向解釋如何使用CSS解決創(chuàng)建網(wǎng)頁時(shí)常見問題的內(nèi)容部分的鏈接。

從一開始，您將主要對(duì)HTML元素及其背景應(yīng)用顏色；更改元素的大小、形狀和位置。并在元素上添加和定義邊框。但是一旦你對(duì)CSS的基礎(chǔ)有了扎實(shí)的理解，就沒有什么是你做不到的。學(xué)習(xí)CSS最大的好處之一就是一旦你知道了基本原理，通常你會(huì)對(duì)什么能做什么不能做有很好的感覺，即使你還不知道如何去做！

CSS的工作方式與你會(huì)遇到的大多數(shù)編程語言和設(shè)計(jì)工具有點(diǎn)不同。為什么會(huì)這樣？在下面的視頻中，Miriam Suzanne提供了一個(gè)有用的解釋，解釋了為什么CSS會(huì)這樣工作，為什么它會(huì)這樣發(fā)展: