標籤：

自學 HTML 和 CSS，有哪些好的教材和網站教程推薦？

01-14

從平面設計想轉互聯網設計，但是必須先掌握工具，有什麼好推薦呢？

列一下CSS學習資源吧：

基礎篇

CSS 最核心的幾個概念

CSS 簡寫指南

CSS樣式基礎

CSS樣式設置

CSS布局模型

CSS文字排版

你不得不知道的CSS 字體那些事兒

CSS中的顏色值和長度值

CSS選擇器分類

30個你必須記住的CSS選擇符

CSS元素分類

淺談CSS偽類分類

進階篇

CSS 專業技巧收集

CSS小技巧

CSS代碼優化

CSS的繼承、層疊、特殊性和重要性

CSS 的使用中你可能不知道的 7 件事

Web 開發中 20 個很有用的 CSS 庫

11個學習CSS實用工具和資源

17個有趣實用的CSS 3懸停效果教程

前端筆試面試中的常用知識點總結(CSS)

10個頂級的CSS UI開源框架

實戰篇

用CSS來找出兩張圖的差異

用 CSS 3 來做個平安果吧~

如何調試CSS動畫

用CSS製作Loading載入動畫【第一期】

用CSS製作Loading載入動畫-Loading字樣【第二期】

幫助你美化網站的10+實用 CSS3 技巧

30個使用CSS實現的loading等待載入效果

慕課課程導航解析

免費課程（視頻）篇

重識CSS

CSS未來

css框架的迷思

CSS與界面動效

CSS工作流

如何用CSS進行網頁布局

CSS3圖片動態提示效果

Web Components中的CSS

CSS動畫實用技巧

HTML+CSS基礎課程

商城分類導航效果

形形色色的下拉菜單

導航條菜單的製作

實踐是最好的老師，我的學習方法很簡單。

題主可以找一些主流網站，經常留意他們的改版和變化，勤按F12看代碼。

長此以往，你會有很大的收穫。

如果一定要推薦一個網站的話，那肯定是：http://www.w3school.com.cn

首先是看書咯，推薦一本《web編程入門經典》，好幾百頁呢，看完對html和css有了一個大概全面的了解以後就看視頻教程。推薦看李炎恢的xhtml教程，可以直觀的看到網頁製作的代碼編寫過程，對於加深印象很重要。如果這些都做完了，推薦去看亞當學院的網站重構教程。看書推薦一本《精通css》，對於一些技術細節有一個很深刻的理解之後，嘗試自己寫一些頁面吧，在網上找比較有典型性的網站試著模仿做一下。真正自己寫代碼以後才知道問題還是很多的，解決網站跨瀏覽器兼容是從一開始就會伴隨網頁設計師的問題，自己多多實踐，慢慢研究，錘鍊代碼，總有一天會達到自己目標的。

FreeCodeCamp Learn to code and help nonprofits

有中文版 Learn to Code and Help Nonprofits

三大特徵： 免費 直觀 系統

為什麼我學會了CSS的每個屬性，依然做不出頁面？

因為你的學習方法不對。假設你學會了常用的4000個英文單詞，難道你就會寫英文作文了嗎？

這個問題下面大部分回答毫無用處，相當於給你一本英文字典讓你學英文寫作。

學習 CSS 的高性價比方法是什麼？是以項目為中心學習。

你需要學習：

  • 如何做一個個人簡歷頁面
  • 如何做一個響應式頁面
  • 如何做一個輪播
  • 如何做一個手機端頁面
  • 如何做一個三欄布局
  • 如何做一個柵欄系統
  • 如何做一個……

以項目為中心，遇到一個需求，就去想辦法解決，是最快的學習方法。

但是這個對零基礎的新手有點難，因為新手還需要學習如何調試、翻 GFW、使用命令行、使用編輯器和 IDE、查閱 MDN，但這些都只是輔助，重點還是項目。

目前飢人谷直播11班的同學已經做的小 Demo 有：最簡單的響應式頁面、二級導航、時鐘、Tabs 組件、輪播組件、Modal 組件、Popover 組件……。

這周剛講到 jQuery，後面的 Demo 會越發複雜起來。

然而，我基本沒有教過 CSS 的任何一個屬性，都是學生們自學的。你如果問他們會不會 CSS，他們可能並不認為自己的 CSS 學得很好，還需要加強，但是如果你丟一個需求給他，他可以實現。

那麼我上課教的 CSS 是哪些呢？

  1. border 大法等 CSS 調試方法，以及如何用開發者工具發現自己的錯誤
  2. normal flow、盒模型、堆疊順序
  3. 想做更多小 Demo 應該去哪裡找 UI
  4. 如何使用工具生成 CSS 代碼

如果你將我的課與其他網課對比，會感覺虧了：其他老師把 CSS 屬性一個一個的講解了，你居然沒講這些！

但是實際上呢？一個屬性一個屬性地講很簡單，我照本宣科即可。但是那會扼殺你的自學能力。

為什麼我不一個屬性一個屬性地講呢？看本文第一句話：

為什麼我學會了CSS的每個屬性，依然做不出頁面？

因為學習屬性並沒有什麼卵用，也沒有難度。如何融匯貫通才是難點。

如果你沒有到飢人谷學習，可以看我的「笨辦法造輪子」裡面的 CSS 源碼，也是不錯的學習資源，簡單、易上手。

http://github.com/frankfang/wheels

說到自學編程，很多人的第一反應都是 Udacity 或者 w3school 等網站。今天 AppSo（微信公眾號 AppSo）要給大家推薦一位不太一樣的老師——SoloLearn。

與那些視頻講解為主要形式網課相比，而 SoloLearn 則採用了文字講解。這種方式的好處是：

  • 更方便統覽全局，更少受其他因素（如教師的口音，如視頻質量，如其他場外因素）的影響
  • 更節省時間——視頻講解有時會有『灌水』的冗餘鋪墊內容，中斷學習之後恢復的時候，也比較容易通過快速翻看之前的內容來回到當前進度。

App 的界面風格簡潔穩重，SoloLearn 目前提供了 12 門市面上主流編程語言的課程。

就拿我最近在學的 C# 語言舉例吧。整個 C# 課程根據不同的知識點，分了 9 個模塊。學完這門課所有的模塊之後，跟大多數學習平台一樣，可以拿到一個 Certificate。

每一個模塊中，又分了不同的知識點，每個知識點，用講解、示例與問題的形式穿插進行教學，雖然是英語教學但用詞都非常簡單，課程的難度也並不高，十分容易上手。

使用 SoloLearn 進行學習，並不需要自己特地搭建開發環境。

如果自己腦子裡突然有了點子想要嘗試或驗證，可以點擊示例代碼下方的「TRY IT YOURSELF」，進入 Code Playground 進行實驗與分享，在這裡還能找到其他人的作品，互相交流啟發。

學習中如果遇到了不理解的地方，AppSo（微信公眾號 AppSo）發現，可以點擊頁面左下方的「comments」來進入討論區，這裡有大量關於本知識點的用戶討論可供參考，很可能有人遇到了跟你同樣的問題，並且已經得到了其他人提供的解答。

不僅這樣，SoloLearn還提供了課程的術語列表，可以讓學習者更清晰地把握自己的基礎知識。

值得一提的是，SoloLearn 有手機端和網頁端，而且進度會自動同步。如果你想要自學開發，就試試 SoloLearn，做一個並不孤獨的獨行俠吧。

網址：https://www.sololearn.com/Courses/

註：SoloLearn 根據開發技術不同，iOS 版有專門的 app，請大家按照需求下載：http://t.cn/RXl8EXv

Android 用戶除了下載單個技術的 app，也可以下載入門級應用 SoloLearn: Learn to Code。AppSo 提醒：Android 客戶端需要 Google 服務框架。（微信公眾號 AppSo 回復「全套服務」獲取詳細指南）

SoloLearn 系列應用適用於 iOS 8.0+ 或 Android 3.0+ 的設備，大小因應用和設備而異，免費。

關注 AppSo 知乎機構號，讓你的手機好用到哭。

本文作者多洛，轉載請在微信公眾號回復「轉載」獲取授權規則。

Codecademy : Learn to code

Codecademy是一個互動式的在線編程學習網站，相比傳統的在線學習網站有更強的互動性和趣味性。

在這個平台上不僅能循序漸進地通過自己編寫代碼學習HTML，CSS，JS等Web編程語言，還有Python、Ruby等完整教程和實踐性更強的Projects和API教程。

每個用戶除了能作為學習者學習某個教程，還能作為教授者自己編寫教程給其他用戶學習使用。

http://www.w3school.com.cn

css推薦你看 《css那些事兒》，林小志的，那本書不錯！

http://www.w3school.com.cn

HTML和CSS技巧（不知道是否需要）

1. 禁止滑鼠雙擊選中文本

&
不被雙擊選中文字的區域
&

2. 自定義li樣式

li : {
list-style: none;
}
li:before{
content: "◆";
display: block;
float: left;
font-size: 1em;
margin-right: 0.5em;
}

效果如圖：

3. IE條件注釋

載入CSS2
&
載入CSS1(可以把要重寫的寫在這裡).
&

4. 圖片base64表示法&>

編寫插件需要使用圖片資源又不適合直接引入時使用base64圖片編碼進css或js插件

在線base轉換直通車

5. 瀏覽器頁面渲染優化

&
&
&
&
&
&
&&

6. 邊框和內邊距的反向繪製

css默認邊框border和內邊距padding繪製在盒的外部，定義的高度和寬度一旦應用了其中一個屬性便會被撐大，導致不好把握盒的真實寬高。css3提供了一個新的樣式：box-sizing。默認為content-box，提供一個屬性border-box，可使邊框內邊距繪製在盒內部，盒被定義的寬高不會被改變。


box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */

7. 純css繪製三角形和氣泡框

三角形利用邊框重疊效果，三個邊框為透明時，第四個邊款的位置將呈現三角形效果。


div {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: #00f #ff0 #f00 #0f0;
}

當三個邊框為透明只保留一個邊框的顏色時：


div {
width: 0px;
height: 0px;
border: 100px solid transparent;
border-bottom-color: #f00;
}

運用在邊框上 - 拼接：


.border_div {
width: 200px;
height: 50px;
border: 1px solid #666;
border-radius: 20px;
position: relative;
}
.triangle {
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: #666;
position: absolute;
bottom: -20px;
left: 50%;
margin-left: -10px;
}

鏤空：


.triangle:before {
content: "";
width: 0px;
height: 0px;
border: 10px solid transparent;
border-top-color: #fff;
position: absolute;
bottom: -9px; left: 50%;
margin-left: -10px;
}

效果圖

8. css單位rem

px為一個單位像素點，em為當前元素父標籤的font-size大小，rem為html標籤的font-size大小。所有單位如果統一使用rem可以方便的適配不同屏幕解析度，因為只需使用js按照規則改動html的font-size值，整個頁面都會隨之改變。當使用了


&

時，手機端的頁面px不再表示一個像素點，而是被映射為一個合適的值。同時也會影響rem的大小，因為1rem=?px，px單位值變了，rem自然也會跟著變。

9. 同級元素選擇器

:nth-child為同級元素正序選擇器，例如


//style:
div {
width: 20px;
height: 20px;
float: left;
margin: 0 10px;
}
div : nth-child(even) {
background: #0062CC;
}
div : nth-child(odd) {
background: #24E150;
}

//html
&& && && &&

效果圖：

四個div標籤都是作為nth-child選擇器選擇範圍的同級元素（非指兄弟元素）。參數可為值，可為表達式。


//匹配同級元素中的第一個元素。
div : nth-child(1)
//匹配偶數元素
div : nth-child(even)
//匹配奇數元素
div : nth-child(odd)
//逢3的倍數匹配
div : nth-child(n*3)

nth-last-child與nth-child相反，為倒序同級選擇器。所謂同級，即不分是否兄弟元素，只要級別一致便參與選取。first-child和last-child見名知意，相對應nth-child(1)和nth-last-child(1)。注意：索引從1開始

10. 偽元素:before和:after

這兩個偽元素用於在元素前後插入內容，例：


//style
span : before {
content: "問候：";
}

//html
&
你好啊
&

偽元素作為元素的子級元素，通常用於插入整體固定的內容，例如自定義列表樣式就是一個不錯的選擇。當把元素的inline屬性破壞(position:absolute/float)，那麼:after和:before也就只存在名字的區別了。一些特殊的樣式可以利用它們做到，但使用有些注意的地方：

  1. 空元素不支持偽元素：input img textarea select等，內部無法包裹內容
  2. 偽元素使用時必須有content屬性，哪怕為空字元串另，css偽類(nth-child等)和偽元素在css2中都使用單冒號 : ，但在css3中提倡偽元素使用雙冒號 :: ，偽類使用單冒號 : ，具體是為了遵循標準還是更在意兼容全憑個人。

11. 要不講講冷門的css屬性選擇器？

常見的css選擇器，比如類選擇器、id選擇器，看厭了就來點小清新。


//匹配input標籤，type屬性為submit的元素
input[type="submit"] =&> &

//title屬性準確等於Hello
[title="Hello"] =&> &&

//title屬性包含Hello，但Hello必須為獨立辭彙，也即其前後要麼為空格符要麼為空，",Hello"、"Hello3"、"Helloa"都是匹配不到的。
[title~="Hello"] =&> &&

//包含Hello即可
[title*="Hello"] =&> &&

//要麼匹配單獨的zh，要麼匹配zh-*開頭的字元串，無法匹配zh *
[title|=zh] =&> &&

//匹配zh開頭
[title^=zh]

//匹配cn結尾
[ttile$=cn]

//匹配帶title屬性的元素，哪怕title並沒有給值
[title] =&> &&

12. css後代選擇器和子選擇器的區別

//後代選擇器：選擇div下的所有p標籤
div p {
color:#f00;
}
&
&

被選擇& & &

被選擇& & &

//子選擇器：選擇div的直接子p標籤，非直接性的子標籤不選擇
div&>p {
color:#f00;
}
&
&

被選擇& & &

不被選擇& & &

13. 自定義字體

IE9+支持.eot字體，其它主流瀏覽器基本都支持.ttf字體，所以自定義字體理論上至少要備齊這兩種類型。聲明方法如下：


@font-face{
font-family: "custom_font";
src: ulr("custom_font.ttf"),
url("custom_font.eot");
}

聲明完成就可以跟正常字體一樣被引用了，但是對於特殊字元沒有統一unicode碼的那些，例如圖標類字體，使用方式相對也比較特別，例如一個自定義字體文件有一個字元，unicode編碼"e600"（十六進位表示）：

html轉義字元使用方式


//css聲明使用自定義字體
.use_custom_font {
font-family: "custom_font";
}
//html直接使用轉義形式，#x + unicode編碼 + ;（十進位表示的編碼不加x）
&&

css聲明方式


//css
.is_custom_font {
font-family: "custom_font";
}
.is_custom_font: before {
content: "e600";
}
//html
&&

js輸出方式


// u + 十六進位unicode編碼，需保證字體輸出的位置使用的是自定義字體。
document.write("ue600");

附：


//js獲取文字的十進位unicode編碼"字".
charCodeAt(); //輸出23383
//js獲取十進位unicode編碼對應的字元
String.fromCharCode(23383) //輸出"字"

最後推薦一個矢量圖標字體網：阿里巴巴矢量圖標庫

14. chrome跨域ajax請求

跨域問題實際上都是作為一種瀏覽器安全策略運行，當我們把安全策略關閉時自然就不會有跨域阻攔，此時可以隨意的訪問不同站點資源。在chrome.exe運行時帶上參數--disable-web-security即可，例如windows下，參數添加在chrome的啟動快捷圖標（右鍵-屬性-快捷方式-目標）中即可。

15. 不固定寬度的塊狀元素左右居中法門

//html
&
&這算什麼呢& &

//css
.parent {
text-align: center;
width: 100%;
background: #eee;
}
.children {
display: inline-block;
border: 1px solid #666;
border-radius: 5px;
padding: 10px;
}

效果：

重點：有定寬的塊狀元素居中很容易，或者用絕對定位設置left為50%，再margin-left修正到中間。或者直接設置margin左右auto都可以。而單純的行內樣式，例如p標籤，居中只要設置text-align為center即可，但犧牲了塊狀元素的特性。將元素設置為inline-box則可兼顧它們的特性。但重點還是在於父元素的text-align必須設置為center。

最後我要補充一個技能學習視頻教程免費下載網站：天翼雲盤，守護你的數據資產 網盤|文件備份|資源分享

文／沐心chen（簡書作者）

原文鏈接：HTML和CSS技巧點滴

著作權歸作者所有，轉載請聯繫作者獲得授權，並標註「簡書作者」。

IT自學教程

http://www.zixuebook.cn

網站：W3school、菜鳥教程

教材：傳智播客的教材（本人大學課本）。

不請自來。

看到這個答案其實挺有感觸的，

畢竟我也是這樣過來的人，

平面設計》網頁設計》視覺設計師。

做的事情也從「海報、宣傳折頁、包裝、logo設計、品牌vi」，變成「網頁設計、微信開發」再變成「專題頁設計、h5頁面」。

我不清楚你說的所謂的互聯網設計是哪方面，畢竟互聯網設計這個太廣泛。就我現在所屬的ued設計部分就分為，ui設計組、營銷廣告組。裡面有ui設計師、視覺設計師、廣告設計師、交互設計師。不同的職位職能側重點不一樣，但不外乎是，app界面設計、網頁設計、h5頁面設計這些。

重點是什麼？沒有一個職位說需要會寫代碼的？公司有專門的前端人員，有專門的程序人員。

據我了解，需要做設計又需要寫代碼的只有是網頁設計師。而且不是出現在一些比較大型的公司上，只有一些小的建站公司，或者是小企業需要這樣的人員，畢竟會寫代碼，程序員這個職位說不定都省了。

不排除可能還有其他方面是需要寫代碼的設計師的，個人的經歷畢竟有限。但是還是想說設計歸設計、程序歸程序。術業有專攻。除了是興趣所在，而去學習。工作的範疇上，我認為程序並不是設計師必備的技能。當然必要的了解程序實現的一些原理，能讓你的設計更為的合理。而不是天馬行空的想到一些東西，然後被開發人員當sb一樣的看著你。

建議還是了解清楚你需要從事的職位是否真的需要這項技能，如果你看的需要代碼的職位是網頁設計師的話，我並不是很看好呢。

建議先做深度，再考慮廣度。

設計能力強了，跨行其實真的不難。只需要了解一些行內的原則、秩序就行。

設計上很多東西都是相同的呢。

平面設計轉行做電商、網頁、視覺設計其實都算是比較輕鬆的。

加油，祝順利。

http://whatwg.org

夠你看好久的了。

推薦網址：w3cschool，http://www.w3school.com.cn，按照上面的html和css教程認真學一遍。

書籍推薦：

權威指南（第三版）

精通CSS高級Web標準解決方案（第2版）

視頻學習資源網址推薦：慕課網http://m.imooc.com/course/list?c=html

在上面可以學習基礎，也可以學慣用現有知識寫一些案例等。

這個可以看看，就是有點過於詳細了，html和css都有的[oeasy]教你玩轉h5、css樣式表

推薦眾學視頻教程-世界名校公開課視頻 | 國外高手視頻教程 | 精品課程答疑論壇 | 國外原版英文專業書免費下載，有很多國外高手的視頻課程，教你一步一步如何建立各種動態和靜態網站，並且配有字幕，目前有HTML，CSS,JavaScript編程, PHP編程以及PHP面向對象編程, JQuery, Ajax等一列

關於網站前端和後台的課程，並且大部分課程都提供源代碼和相關的課件。

朋友中有沒有做前端的，找他們點撥一下很快的，水平高的最多一周就給你帶出來了，自學就不一定了，時間肯定是要付出的，還要有自覺性。html、css不會很難，加油！

w3c的幫助文檔，chm格式的。

我看的這本書，css禪意花園！

覺得《css實戰手冊》還不錯，the missing manual系列的

http://www.aa25.cn/

http://www.w3school.com.cn/

http://www.divcss5.com/

推薦閱讀：

※CSS 中已設置的屬性怎麼去掉?
※關於table邊框，設置了border-collapse:collapse之後，各條邊框是怎麼合併的？
※CSS大牛能達到什麼境界？
※辭職無基礎自學3星期html和css，現在感覺，動手能力差，基礎掌握不好？求大神指導啊，衷心感謝！
※CSS 中能否選取父元素？

TAG:HTML | CSS |