CSS 介紹

前提要求

在開始閱讀文章前，你應(yīng)該有：

1. 熟悉基本的電腦操作，以及使用過Web的經(jīng)歷（即查看一些網(wǎng)頁，并獲取其內(nèi)容）。
2. 最基礎(chǔ)的工作環(huán)境，并且了解如何創(chuàng)建與管理、編輯文件，比如?Installing basic software（安裝基礎(chǔ)軟件），Dealing with files（處理文件）。
3. 對HTML有一些基礎(chǔ)的了解------如?Introduction to HTML（HTML簡介）。

指南

這些模塊將帶你了解CSS的基礎(chǔ)知識，并提供充足的機(jī)會讓你測試一些技術(shù)。

CSS是怎么工作的

首先，我們先從基礎(chǔ)講起來說明什么是CSS，HTML是如何被瀏覽器轉(zhuǎn)換成 DOM 的，以及CSS樣式是如何被應(yīng)用到DOM里的，這里有一些最基本的語法示例，這些代碼就是被用于我們所游覽網(wǎng)頁上的代碼。

CSS 語法?

接下來，我們將深入了解CSS語法更多的細(xì)節(jié)，了解屬性及其值會形成聲明，多個聲明形成聲明塊，聲明塊和選擇器形成完整的CSS規(guī)則。此外我們還會了解其他的CSS模塊，如注釋和空白。

選擇器

選擇器是在前一篇文章中已經(jīng)提到過的，但在這個章節(jié)會引導(dǎo)我們深入更多的細(xì)節(jié)，通過這篇文字可以了解所有選擇器類型和它們是如何工作的。

CSS ?的值和單位?

有許多類型的CSS屬性值需要學(xué)習(xí)，從數(shù)值顏色函數(shù)執(zhí)行某一動作(如嵌入一個背景圖像，或旋轉(zhuǎn)一個元素)。而這些依賴于特定單位指定的確切值代表的是什么？列如你想讓你的盒子是30像素寬，或30厘米，或30 ems嗎？這個章節(jié)會指導(dǎo)我們了解更多的CSS數(shù)值、CSS顏色和簡單的CSS函數(shù)，以及探索不太常見的單位比如度，甚至沒有單位的數(shù)值。

級聯(lián)和繼承

CSS有兩種不同但相關(guān)的方式解決選擇器沖突（不同的選擇器選擇了相同的元素，哪個會被應(yīng)用？）及元素嵌套的情況（有些子元素適合繼承父元素的樣式，有些則不適合）。這篇文章涵蓋了使用這兩種方式足夠用的內(nèi)容，但不是所有的內(nèi)容。

盒模型

CSS盒模型是網(wǎng)絡(luò)布局的基礎(chǔ)——每個元素表示為一個矩形框，矩形框的content、padding、border和margin像是洋蔥一樣嵌套（或者說是一個4層的俄羅斯套娃）。瀏覽器顯示一個頁面，它會把那些樣式應(yīng)用到每個盒子中，周圍的“洋蔥層"有多大，盒子位置間的關(guān)系。在建立CSS布局之前，您需要理解這個盒子模型。

調(diào)試 CSS?

在這個模塊的最后一篇文章中，我們看看CSS調(diào)試的基本知識，包括探索CSS應(yīng)用到一個頁面和其他一些游覽器工具，可以幫助你找到你的CSS代碼中的錯誤。

評估

下面評估將用于檢測你對上述內(nèi)容的學(xué)習(xí)情況。

Fundamental CSS comprehension（基本CSS理解）

這個精心設(shè)計的評估測試將幫助測試你對CSS的理解。

另請參閱

Intermediate Web Literacy 1: Intro to CSS

一個優(yōu)秀的Mozilla基金會，探索和測試的很多技能在引言中討論CSS模塊。學(xué)習(xí)HTML元素在網(wǎng)頁中如何使用CSS選擇器，屬性和值。