CSS

2018-05-15 17:26 更新

學(xué)習(xí)路徑

在嘗試學(xué)習(xí) CSS 之前,您應(yīng)該了解 HTML 的基礎(chǔ)知識。建議你先學(xué)習(xí)?HTML 簡介模塊 — 這一模塊主要介紹了以下內(nèi)容:

  • CSS,從 CSS 模塊簡介開始
  • 更高級的HTML模塊
  • JavaScript,如何使用 Javascript 給網(wǎng)頁加上動態(tài)功能

我們建議你同時(shí)學(xué)習(xí) HTML 和 CSS,在這兩個(gè)主題之間來回切換。因?yàn)橛兄?CSS 的 HTML 更加有趣,并且不了解 HTML 就不能真正掌握CSS。

在學(xué)習(xí)本章節(jié)之前,你應(yīng)該會使用計(jì)算機(jī),熟練的使用網(wǎng)頁操作(哪怕只是盯著屏幕看)。你應(yīng)該配置好一個(gè)基本的操作環(huán)境(見安裝基本軟件),知道如何創(chuàng)建和管理文件(見處理文件)—這兩個(gè)都是?Web入門?的初學(xué)者模塊的一部分。

我們建議你在學(xué)習(xí)本章內(nèi)容前,先完成?Web入門,盡管這不是必須的;CSS 基礎(chǔ)文章中涵蓋的大部分內(nèi)容在 CSS 模塊簡介中也有,而且 CSS 模塊涵蓋了更多的細(xì)節(jié)。

模塊

本主題包含以下模塊,建議按順序閱讀這些模塊。你應(yīng)該從第一個(gè)模塊開始。

CSS 介紹
這個(gè)模塊介紹了使用 CSS 的基礎(chǔ)知識,包括選擇器和屬性,編寫 CSS 的規(guī)則,將CSS 應(yīng)用于 HTML 的方法,如何在 CSS 中指定長度、顏色和其他單位,層疊與繼承,盒模型基礎(chǔ)以及 CSS 的調(diào)試。
文本樣式
這個(gè)模塊介紹基礎(chǔ)的文本樣式,包括字體屬性的設(shè)置,粗體和斜體,行和字母間距,陰影和其他文本功能。我們通過在網(wǎng)頁上設(shè)置特定的字體,指定列表和鏈接的樣式來完成這一模塊。
樣式框
接下來,我們來看看樣式框,這是進(jìn)行網(wǎng)頁布局的基本元素之一。 這一模塊我們重新學(xué)習(xí)框模型,并通過設(shè)置內(nèi)邊距、邊框、外邊距,指定自定義背景顏色、圖像和其他特性以及在框上顯示陰影和濾鏡等奇特功能來控制樣式框。
CSS 布局
到目前為止,我們已經(jīng)學(xué)習(xí)了 CSS 基礎(chǔ)知識、如何設(shè)置文本樣式、如何設(shè)計(jì)并操作內(nèi)容所在的框?,F(xiàn)在應(yīng)該考慮如何把你的框以合適的位置放置在視口內(nèi)。我們已經(jīng)學(xué)習(xí)了在深入 CSS 布局之前需要學(xué)會的必要知識,下一步我們通過設(shè)置 display 屬性、使用浮動(float)?和定位(position)的傳統(tǒng)布局方法、以及新的布局工具如flexbox,來深入學(xué)習(xí) CSS 布局。
響應(yīng)式設(shè)計(jì) (待定)
近來一些不同類型設(shè)備有能力用不同的瀏覽器展現(xiàn)web,響應(yīng)式設(shè)計(jì)已經(jīng)成為一個(gè)核心的web開發(fā)技能。這個(gè)模塊將涵蓋基本原則和響應(yīng)式工具,說明如何根據(jù)不同的設(shè)備特點(diǎn)如屏幕寬度、方向和分辨率來應(yīng)用不同的文件,并探討服務(wù)于不同的視頻和圖片基于這些特點(diǎn)的技術(shù)可行性。

解決常見的CSS問題

使用css解決常見問題?解釋怎樣使用css解決常見的問題,例如當(dāng)你想要創(chuàng)建一個(gè)網(wǎng)頁的時(shí)候可以參考:樣式框。

參閱

CSS on MDN
MDN 上css文檔的主要入口,包括詳細(xì)的參考到高級的教程一系列內(nèi)容。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號