CSS之旅 第一站 為什麼要用CSS

2021-09-23 21:47:59 字數 2148 閱讀 2622

不知道有多少碼農和我一樣,css一直是乙個軟肋,軟到全身酥麻。。。既然軟肋來了,只能是要想辦法解決,所以就找本css權威指南看一看,都說

css權威指南這本書比較過時,但是內容還是比較充實的,而且內容基本上就是和你交談一樣,非常舒服,好了,下面從正文說起。

一:為啥要學習css

當你知道css的歷史還是蠻有味道的,在很久很久以前,web上沒有css,只有一些html的標籤,比如p,h1...h5... div span,ul 等等,這些html標記

都是乙個具有特定含義的html標籤,過去人很實在,不講究排版,只要內容是乾貨就好了,就比如現在的排版,簡潔美,我們這些碼農同樣也不在乎這

個,只要文章是乾貨就好,但是呢?web使用者不是程式設計師,他們才不講究乾貨不乾貨,他們講究外表,講究炫酷,講究如何的個性,這樣的話html就扛不住了,

w3c組織就為了滿足這些人的胃口,提供了一些裝飾html標記的標記,比如strong,font,b,u等等。。。就比如下面這樣。

你好

然後的然後,程式設計師就有了下面這樣的抱怨了。。。

第一: 老子為了decorate個text,要寫無數個標籤,我操。。。多麻煩。。。

第二:馬丹,現在我們的頁面結構開始越來越複雜,這些幾把font, b壓根就不能重用,根本就是完蛋的東西。。。。高個毛啊。。。

第三:現在國家這麼窮,頻寬這麼貴,我的html體積真***的大,內容其實僅僅佔不到html的1/10。。。我的客戶有時候要幾分鐘才能開啟。。。這樣下去,

我要失業了。。

結果就這樣w3c招致網上程式設計師的罵聲一片,原本的想法就是想通過一些樣式的html標記來修飾html的結構內容,結果導致現在的一片混亂,而且頁面結構失

衡。。。面對三大問題,w3c就開始推出了css,這個裝修html的層疊樣式表。徹底的解決了程式設計師提出的三大難題。。。

二:如何解決三大難題

1. 無數個標籤的問題

css採用一條條規則來decorate各個html的結構元素,規則的結構採用 「標籤+內容宣告」 的方式,比如:

這種定義我想沒什麼好說的,這樣的話,我們把html中的裝飾標籤全部拿出來了,放到乙個專門的css規則中,這樣的好處大家也看到了,」內容「和」展示」的分離,

這樣的話就解決了程式設計師們的第乙個抱怨。

2. 裝飾標籤的重用問題。

確實,原始的html裝飾標籤無法做到重用,這樣的話自然就會導致頁面膨脹,css就採用了規則組來解決這個問題,先把規則寫好,然後哪個標籤想用的話,自己套用

下已設定的css定義就可以了。這樣的話也就解決了重用的問題。

3. 體積膨脹的問題

如果第一,第二個問題沒有解決好,第三個問題自然會發生,而且我想還有其他一連串的連鎖反映,那麼css都採取了哪些手段來解決的,為了突出css的終極目標,必須

嚴格的做到「內容」和「展現」的分離,要做到「分離」,那就必須將css單獨的封裝到乙個專門的css檔案,這樣的話,就不光可以做到單個html頁面的標籤重用,甚至可以多頁

面重用,多站點重用。那下乙個問題就來了,引用css檔案的方式有哪些???  哪些是不值得提倡的?

三:css檔案的引用方式

1.  link引用

當你把css拖入到vs的時候,預設就是link模式,link它本來就是xhtml的乙個標籤,所以我們還可以用js來動態追加和控制,這個我想大家都清楚,還有一點好玩的地方就

是可以做「候選樣式表」,在瀏覽器中可以動態選擇自己想要的樣式,比如下面我定義了兩個css檔案,分別讓頁面展示 red 和 blue 的背景。

然後我們可以在瀏覽器中可以動態切換我想要的css樣式,蠻有意思的,雖然這種作用相對比較少見,由於截圖不好截,大家可以使用 工具欄中的 」檢視「=> "樣式"。

2.import引用

同樣這個標記也可以匯入,就像下面這樣。

hello world;

最後值得一提的是,盡量避免使用「內聯樣式」的style,如果這樣的話,跟使用font,strong這樣的標記幾乎沒有什麼區別,就比如下面這樣,所以我們盡量避免。

hello world;

第一站 大連 看海之旅

5月下旬至7月上旬 是大連最舒服的季節 還不是很熱 微風拂面 神清氣爽的感覺 推薦一下旅遊路線吧 個人意見 來大連必去的幾個景點分為兩類 免費的 1.星海灣景區。在星海灣景區你可以來到星海廣場 星海灣浴場 星海公園,這幾個都是免費的,如果想去貝殼博物館和大連現代博物館,則是要收費的。這裡四季都可以來...

菜鳥學習第一站

出來三個月了,才知道沒點過硬的本領是不行的,還好在學校有學過一點東西,要不然現在自學肯定無從入手,說的好像現在知道怎麼辦了一樣,不管怎樣,現在開始好好的努力吧!要不然吃不起飯很丟臉的。我的前端之旅開始了 css樣式篇 transform 旋轉屬性 transform none transform f...

2015生命之旅 第一站重慶

老鄧的流水賬又來了。這篇文章 於我的2015年7月 九月的一系列出行,跟程式無關,我只想把我的經歷告訴大家,讓大家與我共勉。為什麼會有這次旅行,為什麼是生命之旅,這還得從去年說起,去年九月,在我工作的地方一同事說道 鄧哥,你苦了這麼些年該出去走走了。我當時的回答是 我還沒累,不需要休息,不需要出去走...