標籤:

學不會 CSS?

請輕噴。。。

html:顯示什麼,css:怎麼顯示,js:邏輯控制

啊,這三者的解耦真的是太好了!真慶幸自己學web開發。。。

可是為什麼還是感覺平時開發web很苦惱呢?

是了,開發web,在寫html時,也許是自己能力的問題吧,不大會寫css,為了達到與設計一致的效果,加入了太多與內容無關的標籤了,加入了太多類似Bootstrap里的row,col來控制界面啊。。。

這可真是div+css開發啊。。。

這,好像與第一句話 「html:顯示什麼,css:怎麼顯示,js:邏輯控制」 不一致哦。。。應該是只要加了一個多餘的html標籤,就談不上內容與界面表現分離吧。。。

不過,好像 「div+css開發」 只是前些年流行的東西,現在不怎麼流行了哦,現在都是講究語義式標籤,可是那又怎麼樣呢?為了達到與設計一致的效果,我還是要加入各種標籤,肯定有人要說我 「是你自己css差」 了,雖然我也不否認,但是,想要單純用現在的css就表現出複雜的界面本身也的確很困難吧

例如,我想做個跟Win8的應用商店一樣的橫向瀑布流,html部分只是一個ul,單純的用現在的css能寫出來嗎,我是真寫不出來,老實說,就算讓我能加入多餘的html標籤,我也覺得很困難。。。

為什麼會這麼困難呢?感覺這個需求邏輯挺簡單的啊,我稍微看過JavaFX,裡面有hbox、vbox,感覺如果用JavaFX寫的話,一個hbox就能實現了。是啊,那,為什麼html里不能有hbox標籤呢?等下,這個思路好像有問題,html應該是 「顯示什麼」 ,而hbox是 「怎麼顯示」,所以,為什麼css里不能有content-direction: vertical||horizontal,css倒是有個direction,只有rtl,ltr兩個選項,都是用於inline標籤,與hbox之類完全不是一回事。。。。

就是這樣,我的問題一開始就是 「在寫html時,也許是自己能力的問題吧,不大會寫css,為了達到與設計一致的效果,加入了太多與內容無關的標籤了」,所以,css為什麼這麼難寫呢?寫到這裡,自己平時對css的苦水瞬間噴薄而出:各種父標籤height為0的問題,子標籤顯示到父標籤外面,各種定位、居中。。。呃,css難其實是無所謂的,但是css為什麼會這麼難?我仔細思考了下,就拿居中來說吧,要居中一個元素,人們本能的思路應該是給當前元素設置一個居中屬性,然後這個元素就會處在父元素中心,然後再繞一點的思路可以是設置父元素的內容居中,可是現在的css是怎麼做的,單行文本居中就line-h=父元素height,如果我不知道父元素height呢,不說這個,不覺得這思考迴路真的是超級的繞嗎? 這算是css的一種hack,但css里這種hack真的挺多的。 我不知道當初css是如何設計的,總之,這種情形導致我每當要實現一個效果的時候,往往都要問下谷歌,然後拷貝代碼,然後發現效果不對,亂改,繼續谷歌,哦,是受到其他元素的樣式影響了,改好。。。完全找不到一個思路,完全想不到有什麼辦法用幾個簡單的樣式通過組合來達到效果。。。。。。

到最後,我就想著,我不用css了,我用像素級別的控制,用js來控制行了吧,這樣還能有對元素的引用呢,不像css里line-h=父元素height,你倒是告訴我我父元素height是多少,而且js本身是程序代碼,有模塊的概念,要做到控制 「怎麼顯示」 的js與控制邏輯的js分離是一件挺容易的事情。。。啊,可喜可賀。。。

又有問題了:css是交由瀏覽器去保持的,不論處於怎樣一種狀態,瀏覽器都會保持css,例如一個div是body的10%寬,那不論我全屏瀏覽器還是還原瀏覽器,這個css關係始終保持著(這點倒是挺好),但是如果要要用js用像素級控制的話,因為把百分比關係變為像素了,所以只有在初次渲染時界面會與設計一致,當然,可以監聽瀏覽器放大縮小(有沒有這個api呢,待會兒查一下)。。。但這相對又變得太麻煩了點。。。呃,這真是蛋疼。。。

說了這麼多,其實我只想問問大家是怎麼學習css的?沒有對css不滿嗎?我總想著如果css的那些屬性能夠更合理,css能夠有對當前渲染節點及其父節點的引用從而進行數值計算,那就好了。。。

請輕噴。。。


我就分享一下我的學習路徑吧。

1. 當年玩過一段時間的 MSN Space,裡面有些地方支持部分 CSS,當時為了做得比別人高端就東拼西湊搞了一點。這期間屬於完全盲目摸索。

2. 看了一遍《CSS Mastery》,基本入門了。《CSS 禪意花園》翻了幾頁就丟一邊了,感覺沒什麼意思。期間通過做 WordPress 主題來實踐,並且積累了一些基本的兼容性知識。

3. 後面就沒看過書了,工作了開始看了一點 W3C 的 CSS 規範。查文檔主要就是 MDN / MSDN / http://QuirksMode.org / Can I Use / StackOverflow 等在線資源,包括一些博客的文章(CSS Tricks/ALA/...)。

4. CSS 的書說真的就看完整看過一本,接下來 @CSS魔法 翻譯的《CSS Secrets》可能會搞來看看(廣告費請發微信紅包給我)。

我覺得挺自然而然的,也可能是當時開始學的時候也沒有現在這麼多框架之類的東西,不太容易混亂。循序漸進吧……

--

(其實我想吐槽題主的排版)


謝邀, 這問題想回答很久了, 奈何項目比較忙, 今天終於可以忙裡偷閒作答下:

圖多預警:

--------------------------------------------------------------正文分割線------------------------------------------------------------

題主說了這麼多挺不容易, 從中了解到題主對於css html js 的理解還有點淺;題主進入前端開發的時間應該不長,同很多新手一樣為了快速實現功能顧不上原理直奔目的,最後使用的工具或引入的庫越來越多; 結果: 功能是實現了, 但維護就悲劇了! 最終學的只是使用工具而不是使用css;

以大部分新手的知識儲備還駕馭不了太複雜的頁面,所以不建議為了追求頁面效果不求甚解亂引庫或亂用工具;

學習是個循序漸進的過程不能一蹴而就,該怎樣學習CSS?

個人將css學習規劃成以下三部分(學習CSS是很大、佷泛的問題,本文只提供一種學習思路):

1.基礎;

有答主提到項目驅動學習,的確,實戰編碼是提高CSS的最佳手段,但不建議新手立馬開始實戰;因為新手對CSS基礎知識不了解,更容易在實際開發中走彎路(不只新手,css基礎不好的前端也經常走彎路),例如:浮動、定位的濫用、腳本、CSS相互間用法不當、雪碧圖用法錯誤等;很多彎路就是不熟悉CSS基礎語法造成的;

該怎麼提高CSS基礎能力?

1.1 看書;

購買大家公認的好書看看, 以下推薦下口碑很好且自己看過的好書:

《css權威指南第三版》

「CSS權威指南」是公認的好書,就是更新太慢,第三版已經是最新版,本書 講解的內容還停留在CSS2.0且裡面還隨處穿插 「Netscape 」(網景瀏覽器)的bug,(要知道連我這個進入前端好幾年的人都沒開發過兼容網景瀏覽器的任何網頁了!PS: 私以為火狐 雖源於網景但不算網景瀏覽器)

但 本書關於CSS2.0的講解仍很詳細很實用! 畢竟我們現在開發PC端網頁用最多的還是CSS2.0。(IE9 才開始遵循CSS3規範, 而且學習CSS3也得先學CSS2)

《大巧不工》

本書重點講解的不是CSS,應該說CSS技巧只在裡面占很小很小的篇幅, 但這本書能讓你了解整個網頁開發的所有環節;其中的CSS常用語法講解很實在也很實用, 優化篇章涉及的CSS優化技巧仍是當前行業開發的主流做法(個人見解);

《禪意花園》

唯一一本買了還沒看完的書,更偏重於設計, css的實戰代碼技巧並(bing)不(mei)多(you), 新手不建議購買閱讀, 書很精緻,每頁都是彩色的哦,有空時可當做擴展讀物;

1.2 w3cshool

市面上很多CSS書籍(特別是國內的)都是直接從w3cshool抄錄的,書名不提也罷,重要的是w3cshool的CSS教程真的很經典啊!而且更新較快,CSS3教程老早就有啦!

優點:教程簡短易懂;

缺點: 太簡潔部分知識點沒深入;

2.實戰;

老實說,第一部分的基礎知識看完了你也記不住(=_=), 如果沒有實際編碼 、遇到問題沒經常回查或查閱API ,一般新手看完不出兩月保證忘光!

所以要學好CSS,編寫CSS代碼必須是日常,下面分享 實戰技巧:

2.1 調試工具選取

經歷過 IE8、firefoxのfirebug、 國產各類雙核瀏覽器、safria、opera、chrome瀏覽器調試的大叔告訴你, 當前調試工具 必須選擇 chrome ;

雖然 safria用的跟chrome之前一樣的Webkit內核、國產瀏覽器極速模式也是Webkit內核,但跟真正的chrome相比在調試時體驗還是有很大差距的,對比過的人都懂!(ps: 新版的chrome已是blink內核)

別人家的教程:chrome調試技巧--持續更新

個人推薦必須會的兩小技巧(非新手跳過):

可以讓網頁中的任何元素, 改變狀態;

可以修改(增刪改)任何元素的樣式或類名:

2.2 css api手冊 (在線網頁版、PC客戶端、chm手機版

開發過程中,特別是剛開始開發CSS常常會忘記CSS的一些用法, 這時候就得查API了,css API個人推薦「CSS4.20(飄零霧雨版)」;該API 包括CSS2 、CSS3且能隨時檢查更新(手動點擊其首頁檢查更新)。

網頁版:CSS參考手冊_web前端開發參考手冊系列

PC客戶端chm版:

chm版如果下載下來打開的都是404, 注意右鍵chm -&> 「屬性」去掉「只讀」或「鎖定」

chm手機版:

去360手機助手搜索「chm」就能找到「chm 閱讀器X」

然後就能在手機看CSS4.20(飄零霧雨版).chm :

還能看 w3cshool CHM版哦:

2.3 css 代碼積累

大家一定有經歷過:以前寫過很牛逼的CSS效果,然而 電腦重裝系統、電腦壞了、電腦被壞人偷了!然後那段代碼就沒了T_T!! 所以代碼存儲雲端很重要,個人建議將css實戰代碼保存github, 一來自己備忘, 二來交流分享;

例如題主提到如何簡單實現 居中?CSS3的伸縮盒布局就可以,伸縮盒個人實踐代碼:

testDemo/cssFlexBox.html at master · wteam-xq/testDemo · GitHub

3.交流;

自個兒看書、埋頭寫代碼提高實在太有限,互聯網行業不能閉門造車!

與別人交流才能知道 如何實現CSS最優,怎麼寫CSS是錯誤的, 方能跟上新技術的發展例如: CSS3相關酷炫實現、新版瀏覽器實現了哪些css3、各瀏覽器當前份額應對方案等;

交流的方式有:

3.1.前端開發網站、博客

知乎的前端話題、CSS話題 就很不錯,經常看到大神對CSS的見解;

經典的有(個人小收藏):

有哪些經常被誤用的 HTML、JavaScript、CSS 的元素、方法和屬性? - 一絲的回答

有誰能詳細講一下css如何畫出一個三角形?怎麼想都想不懂? - Vkki 的回答

騰訊問卷 http://ur.qq.com/ 是如何實現導航欄毛玻璃背景效果的? - 黎博的回答

張鑫旭博客:

CSS 相對|絕對(relative/absolute)定位系列(一) ? 張鑫旭

CSS float浮動的深入研究、詳解及拓展(一) ? 張鑫旭

w3cplus:

深入了解 Flexbox 伸縮盒模型

慕課網相關教程:

CSS Sprite雪碧圖應用

張鑫旭

3.2.論壇、Q群

前端的論壇個人比較少收藏, csdn、iteye這類太舊,歡迎補充;

Q群,豪哥的JS高級群 比較靠譜, w3cplus 站長 大漠, 小志、劇中人等CSS高手都在其中, 但把控比較嚴,新人已經很難進高級群了。

其他靠譜CSS群歡迎評論區補充;

除了建議先完成《css權威指南》、w3cshool css教程外,其他步驟沒順序, 總的來說:我們學習CSS 基礎是核心、實戰是目的、交流是進階!關係圖如下:

以上, 感謝耐心閱讀完本答案。


蟹妖

我也忘了CSS怎麼開始學的,大概就是早些時候(06、07年)基本都還在用傳說中的table布局,後來忘了怎麼漸漸開始知道CSS了,怎麼學習呢?練唄,找了很多網頁模板(那時候很流行,就是一個設計稿,甚至只有JPG的一張圖)來抄,抄的越像越好,蛋疼做了幾十個。然後又挖了一個新坑,那時候不是還流行博客么,自己做個博客的皮膚,調調IE的兼容性,搞不定就上網搜,基本上常用的黑科技也都會了。反正CSS也不過是一個語言而已,練熟了就行,標準啊,原理啊,優化啊什麼的,都是日積月累出來的,一開始就練個熟。

另外你說的「加很多多餘的標籤」我覺得沒有太大問題,一開始我就是這樣的,而且為了兼容老IE的怪異盒模型,最簡單粗暴有效的辦法就是把一個盒子變2層甚至3層盒子,強行手工統一盒模型,當年靠這招避免了太多太多太多兼容性問題。標籤就多了怎麼地,能吃人么……等到開始放棄舊IE,而且開始有標準盒模型,甚至現在可以選border-box(W3C自己打臉打得不要不要的啊),那些問題自然而然就沒有了。


謝邀

1. 注意排版

2. CSS 是一個了不起的發明

3. 當初,HTML 放內容,CSS 用來控制樣式,組合起來做排版用的

4. 你提到的 line-height 居中法其實是一個 hack,用途有限

5. CSS 隨著時代進化,有些事情還是做不來,但能做的事情越來越多了

6. CSS 的進化與現實的需要有關,手機興起後,CSS 進化的速度變快了

7. 程序員注意學習,得跟上時代

8. 你提到的 hack 已經不需要了,而 CSS 也早已能根據視窗大小而動態布局


如果真的能看懂css了,個人建議先不要看bootstrap,畢竟比較工程化,了解選擇器的組合使用就夠了

去themeforest找幾個高銷量主題,研究一下,就知道什麼是優美的css了,當初甚至顛覆了我對css的認知,才發現這門語言應該是什麼樣的

說點反對的:

1、『為了達到與設計一致的效果,我還是要加入各種標籤』

確實幾年前有這個問題,現在各種before after用起來爽的一B,沒見有大神一個p畫出機器貓嗎

2、『如果用JavaFX寫的話,一個hbox就能實現了』

不懂java,假設布局都用js控制了,有沒有想到過網路條件不好的情況怎麼提前展示該有的內容

怎麼實現越來越常見的閱讀模式,怎麼給殘疾人閱讀屏幕,怎麼控制分享到pocket的內容,怎麼SEO,怎麼一鍵把網站換成黑白色。。。。數都數不完

現在flexbox都快成過去式了,還在糾結div+css是不是過時了?

想想用js做布局出來的代碼,光美觀都過不去啊,再考慮響應式,頭都大了

3、『用像素級別的控制,用js來控制行了吧』

看看css keyframe, transition的動畫流暢性,目前瀏覽器的性能還做不到那種絲滑

4、HACK

不要看見坑就跳進去了,所有的HACK全部fuck off吧

個人建議,有邏輯編程基礎的,就不要耗在純css上了,只能越看越生氣,LESS/SASS不就是為你們準備的嗎


曾經在創業公司,沒有方向,兩周出一個產品成品。

曾經在 Discuz! ,6.1~X2.5,幾百個模版,N 種模塊組合。上百萬站長,寫爛一個地方,就有不知道多少人在罵你。

所以我想說的是,不是你學不會,是你寫的還不夠多。

堅持就可以融會貫通。


曾經寫過一段時間的web前端,後來長時間轉戰flex,去年又重新把web前端撿起來,起初,我的感受就是,無論從工程化,組件化,標準化,現有框架,UI的布局排版,動態語言上來說,web前端開發技術都是陀shi,標準發展緩慢,跟其他平台的UI技術相比,簡直就是原始,為了保證統一的用戶體驗,必須為不同瀏覽器打不同的補丁。作為狀態機的css,雖然具有跨時代的意義,但是發展太慢,整套layout思想還是基於解決幾十年前文字流排版的問題而誕生的技術。好不容易有了flex排版,但兼容性還不是很樂觀,而且定義略複雜。在看現如今其他平台的UI布局思想,比css不知道高到哪裡去了。

再談js,其他不說,直到es6才官方引入了包管理器,這充分說明了在這之前js只是用來解決一屏交互的簡單腳本而已,簡單1,2個js文件就能解決你所有的需求。寫慣了java,as,c#的你如果第一次學寫js,你肯定會被js的簡陋嚇的目瞪口呆,簡直就是一門二手語言。

也正因為js,css的原始和簡陋,才導致了大家為了給它們擦屁股,寫出了各種工具庫和框架,解決那些本應該不存在的問題。

什麼react,flux,angularjs基本就是拿flex/c#/java里現有框架中的技術思想用js再實現一遍而已。如果你用過flex/c#,你基本也能猜出未來web前端技術的大致走向。

吐槽太多,觀點難免過於偏激和絕對,如意見相左,請大神們輕拍。


題主最後說只是想問問別人是怎麼學的,那我也說一下。

最開始是看了本比較基礎的書《CSS基礎教程》,大概了解了下CSS是個什麼東西。看完後又看了本《CSS權威指南》,基本上了解CSS 都有些什麼東西。然後看了本《精通CSS》,了解了一些常見問題的解決方案。後面就沒怎麼看書了,當然我也並不是一個喜歡多練的人,所以基本是在項目中積累經驗了。

很多問題可能有很多種解,做多了自然就會找到最符合需求的。有時候可能明明有解,但一時可能不知道。我把CSS各種規範都大概走馬觀花了一遍,這樣遇到問題的時候,好有點頭緒,詳細查查是否能解決當前的問題。

有時候看到別人寫的文章也會看看,但是大多數並沒有什麼卵用。

有時間和精力的話,看看別人或者開源項目的代碼,很多時候你搞了半天想出來的一個方案可能早被人家優雅地實現了。

另外知乎有很多對CSS了解比較多的人,可以多關注關注,發現,也是一種技能。


《css禪意花園》最好的css書籍。當然實踐還是最重要的,同一種排版嘗試多種實現不同的方式,同一種html結構,用不同的css玩出不同的花樣。

最後打個廣告

https://github.com/lizzz0523/Griddy

兩年前寫的東西,使用同一個標籤結構,可以實現40+中不同的分欄布局,不過這東西已經很舊了,現在都用flex-box做分欄了


一句話,就是抄網站。不是右鍵源代碼,複製黏貼的那種。而是按 F12,找到文本對應的html代碼,和右邊相應的css代碼,就這樣一行一行的抄,抄多了,你就會慢慢地了解了。別一上來就 bootstrap 各種css框架,你越用會越糊塗的。好好抄網站,保准沒錯!


CSS其實很簡單,只要把所有「標籤」都理解為「方形框」或者毛坯房,寫CSS代碼就相當於給自己買的毛坯房找個裝修大隊進行裝飾。

比如有一個標籤為h2的房子,現在對房子的顏色,大小和邊距進行設置,這樣一想是不是感覺就不那麼難了呢?

但對於初學者盡量給所有「標籤」都要寫「background-color」背景顏色,直到整段代碼寫完,確認沒問題才去掉,這樣方便看出問題出在哪。其次一定要熟練使用瀏覽器的F12快捷鍵,熟練掌握審查元素功能,這對於自己的學習非常有幫助。

對於需要記的一些屬性一定要盡量背下來,如background等,因為css中經常用到的屬性也就一百多個,記熟就行。同時,還需要熟悉CSS手冊,看一些大牛寫的CSS代碼,以及關注CSS新技術,逛一些技術型網站或者買些書來讀一讀(推薦一個適合初學者看的書)

如果覺得自己的自學能力和自律能力都很差的話,可以報一個培訓機構,現在有很多的IT培訓機構都是很不錯的。

千萬不要遇到點問題,就跑去問別人,別人幫忙解決後,還不去記下來。如果一直這樣,永遠不可能提升。掌握一個不懂的css屬性最好的方法我認為是:查手冊或者百度,想想問題出在哪,然後自己動手調試代碼。

養成良好的書寫習慣.

有良好的CSS書寫習慣,說明這人做事嚴謹。寫css的時候網上有很多推薦的規範,在書寫順序上一般是:顯示屬性-自身屬性-文本屬性。當然這些都沒有硬性的規定,但是遵循一些不成文的規定不是壞事,這樣讓自己寫的代碼,容易讓別人讀懂,搜索引擎也更加喜歡。

只有目的明確,結果清晰,過程才最高效,才不會輕易被干擾,被改變方向。切記不要眼高手低,一定要多寫多練,沒有學不會的,只有不想學的。


個人感覺這三者是組合起來用的,html是結構,css是外衣,js是牽著木偶的線。

最終他們是協作才能完成的任務


樓主說的不是問題,因此我也只是說說我的經歷。畢業前在學校會些WEB開發了,給人做過網站,不過是table的,那時候知道有種叫DIV CSS布局的方案很是火,可是沒有動力去學,因為始終覺得table也能將就過去。

後來畢業了,找了第一份工作,我作為唯一的開發,唯一的前端,覺得可以試試div css。於是就給領導報了這麼個方案,結果大話說出去了就不得不做了。

開始的時候很鬱悶,那時候還沒有Chrome,IE6的市場佔有率能有80%,剩下的多數是firefox,結果就是在IE6下寫的好好的布局,到了FF里就亂了,把FF調好,IE6就亂了,沒辦法只能一個一個解決,一邊解決一邊就會了,後來,我基本上是隨便找個瀏覽器一塊塊寫css,刷新看效果,等都做完了,在去其他瀏覽器測試,然後小修修補補就可以了。

所以我一直覺得,有項目逼著學習時,學習的速度會更快。


CSS其實很簡單,只要把所有「標籤」都理解為「方形框」或者毛坯房,寫CSS代碼就相當於給自己買的毛坯房找個裝修大隊進行裝飾。

比如有一個標籤為h2的房子,現在對房子的顏色,大小和邊距進行設置,這樣一想是不是感覺就不那麼難了呢?

但對於初學者盡量給所有「標籤」都要寫「background-color」背景顏色,直到整段代碼寫完,確認沒問題才去掉,這樣方便看出問題出在哪。其次一定要熟練使用瀏覽器的F12快捷鍵,熟練掌握審查元素功能,這對於自己的學習非常有幫助。

對於需要記的一些屬性一定要盡量背下來,如background等,因為css中經常用到的屬性也就一百多個,記熟就行。同時,還需要熟悉CSS手冊,看一些大牛寫的CSS代碼,以及關注CSS新技術,逛一些技術型網站或者買些書來讀一讀(推薦一個適合初學者看的書)

如果覺得自己的自學能力和自律能力都很差的話,可以報一個培訓機構,現在有很多的IT培訓機構都是很不錯的。

千萬不要遇到點問題,就跑去問別人,別人幫忙解決後,還不去記下來。如果一直這樣,永遠不可能提升。掌握一個不懂的css屬性最好的方法我認為是:查手冊或者百度,想想問題出在哪,然後自己動手調試代碼。

養成良好的書寫習慣

有良好的CSS書寫習慣,說明這人做事嚴謹。寫css的時候網上有很多推薦的規範,在書寫順序上一般是:顯示屬性-自身屬性-文本屬性。當然這些都沒有硬性的規定,但是遵循一些不成文的規定不是壞事,這樣讓自己寫的代碼,容易讓別人讀懂,搜索引擎也更加喜歡。

只有目的明確,結果清晰,過程才最高效,才不會輕易被干擾,被改變方向。切記不要眼高手低,一定要多寫多練,沒有學不會的,只有不想學的。


今天這個問題碰到了我這個人,真是提問的人一生的大幸!

我已經從這個泥潭裡走出來了,下面我來說一下題主所面臨的種種疑點的背後原因:

疑點1:「在寫html時,也許是自己能力的問題吧,不大會寫css,為了達到與設計一致的效果,加入了太多與內容無關的標籤了...」

bootstrap是給懂得面向對象編程技術的程序員設計的,剛入門的前端是不會懂得這些的,bootstrap的設計就是為了減輕程序員在「處理數據輸出與頁面之間表現嵌合」的工作量而設計的,在製作這類頁面的時候,程序員可以全程不碰CSS代碼完成一個漂亮的頁面(僅靠HTML標籤堆砌、以及CLASS屬性的組合),要想全程不碰CSS那麼就會有各種各樣的工具式的CLASS屬性被聲明使用,也就是會有那麼多與內容無關的標籤產生的原因。

疑點2:「想要單純用現在的css就表現出複雜的界面本身也的確很困難吧...」

然而並不是,如果你只是針對製作一個或少量複雜的頁面(就像程序員寫的那些不可維護的代碼,只在特定時間地點用一次的東西),其實很簡單的,但如果是做很多頁面的話,其工作量就會飆升,難度自然就會加大。

疑點3:「為什麼html里不能有hbox標籤呢...」

那就不叫HTML了,成XML了,使用HTML標準標籤就是為了能在各個瀏覽器中正常顯示和發揮表現一直的功能,目前HTML是各個瀏覽器都能通用的標準,如果要加入XML或其他非公共標準的標籤,肯定要給瀏覽器裝插件什麼,之前的FLASH就是這樣(只不過他是閉源的),結果現在是什麼結局可想而知。

疑點4:「完全找不到一個思路,完全想不到有什麼辦法用幾個簡單的樣式通過組合來達到效果...」

說實話,雖然CSS屬性有幾十上百種,但在真實的用CSS進行編碼時,實際使用的只有25個屬性會用到,只要知道這個25個屬性,絕大部分的頁面排版都能解決。

問題的根源是CSS的歷史,現在的CSS3是由好幾代的CSS迭代升級而成,其中堆疊了很多很久以前的CSS功能,其功能都與當時的HTML結構配合使用(現在的HTML結構以已經不是是過去的那種簡單的形式了),因此不同時期的人都總結了自己那一代人對CSS的使用習慣,形成一種流派,這些流派都只是使用標準中的部分CSS屬性來完成工作,但這些流派有些內容又互不兼容,所以不要指望用幾個簡單的樣式通過組合來達到效果。如果一定要的話,你只有自己設計一套框架,但問題是你又能拿這套框架用在哪裡,給誰用?

下面是給那些入門人士的指導:

前端是個大圈,這個圈裡有很多因為其工作目或歷史原因而產生的分支流派,明確自己要做那個方向,就要放眼探索這個圈(甚至是與之相關的圈外信息),書里的東西只是這個行業的最底層最基礎的東西,能不能入門還要看自己的覺悟和對機遇的把握。

國內的網路和圖書上記錄的東西,都是經過時間的考驗的東西都該學學,但也要放眼國際畢竟這是一個依賴互聯網而產生的職業,最起碼的互聯網精神還是要懂得的。


前面很多大大提到了《禪意花園》,我做了一個花園的教程,放在慕課網http://www.imooc.com/learn/603


只要搞明白bfc 和包含塊還有 關於vertical-align 的一系列 。。就能解決百分之八十的問題---相信我


當年我師傅站我後面,寫錯一句給一下子,一個月就出徒,現在沒有寫不了的界面,弄不了的樣式,而且各種標準,還得打才有記性。


因為你沒有認真深入學習CSS,許多人認為CSS較簡單,的確在深度上他比較淺,但這並不代表你可以輕鬆駕馭他,我個人覺得把CSS學好是理論加實踐,看MDN,自己動手,,多寫布局。


11,429種完美的CSS3漸變顏色代碼表

前端必備,免費分享 追心CSS3漸變顏色代碼表,CSS顏色代碼


推薦閱讀:

想要學CSS應該如何入門?
CSS transform中的rotate的旋轉中心怎麼設置?
HTML5 的 hidden="hidden" 和CSS的 display:none有什麼區別?
overflow:hidden的問題?
怎樣隱藏滾動條還能滾動頁面(包括滑鼠滾輪)?

TAG:CSS | HTML5 |