傳說中的裸奔節–認識及體驗CSS

餘二五發表於2017-11-08
CSS
首先在這裡強調一下為什麼要出這個類別的文章:
 
   目前得到國內大部分網工重視的網路應用技術,要麼服務系統要麼路由交換要麼網路監控管理要麼網路安全. 想要說的是除了這些技術,值得網工去發覺的 還有我們的WEB技術.WEB技術並不是程式設計師的專利.因為我們搭建的web伺服器跑什麼樣的web站點最安全高效,我們才是最清楚的人.因為從低層的位元流資料幀資料包文 到上層的資料流.的服務的搭建,我們最清楚其雲做過程.
 
好了,再說一個具有徵服力的例子:前不久一個學生畢業了,去一家外企面試 100多人去競爭的職位,最終他得嘗所願了.之後很興奮的告訴我,成功的祕訣是自己會一點web的基礎維護和製作技術,並且很清楚html結構.
 
————————————-今天的重頭戲上場————————————————–
 
什麼是CSS? 層疊樣式表到底是什麼有什麼用?
 
這個要從CSS 裸奔節說起.
 
每年的4月9日 也就是我們經常看到的CSS Naked Day .
每年到這個日子就會看到大大小小的網站、Blog去掉CSS樣式表，讓網站”裸奔”，故這天也叫”CSS裸奔節”。
這個日子是為了推廣CSS及XHTML等W3C標準頁面程式碼而設的，更能突出網站在沒有CSS的情況下程式碼結構是不是夠清晰.
標準問題就需要標準化組織來定義,更重要的是需要我們來執行.
而W3C  (The World Wide Web Consortium)就是這樣的組織.
 
那麼CSS 有什麼樣的作用呢?
我們會發現CSS就象衣服一樣,甚至象域環境中的策略一樣,可以定義一個站點中每個頁面是否漂亮.是否能夠讓瀏覽者駐足.
 
而更重要更強大的是,CSS可以實現頁面內容和樣式的分離,從而減少html頁面製作時的大小,並且從定義的角度統一整個網站的風格,並且大大減少了html設計人員的工作量,而且從職位分工上講web的前臺設計和後臺程式設計 徹底的分開.成為目前web2.0時代的主流前臺設計手段.
 
下面寫一段簡單的CSS程式碼來體驗一下CSS的好處:
[方法一]
首先看一下沒有CSS的html程式碼:
—————————-頁面中的那句話被font標記定義了顏色—————————————–
<html>
<head>
<title>沒有CSS的HTML</title>
</head>
<body>
<p><font color=”red”>大家好!這個是沒有CSS的html頁面!</font></p>
</body>
</html>
—————————-頁面中的那句話被font標記定義了顏色—————————————–
[方法二]
再來看一下用CSS 定義後的頁面:
————————在CSS檔案中用CSS語句定義了這句話的顏色——————————
p{
color:red
}
————————在CSS檔案中用CSS語句定義了這句話的顏色——————————
 
————————而HTML頁面中只需要寫內容——————————————————
<html>
<head>
<title>有CSS定義的HTML</title>
</head>
<body>
<p>大家好!這個是沒有CSS的html頁面!</p>
</body>
</html>
————————而HTML頁面中只需要寫內容——————————————————
 
 
現在來對比兩中方法,其中用CSS定義的頁面實現了內容和樣式的分離.以後想更改頁面樣式,只需要單獨修改CSS檔案就好:)
 
接著再來看這段CSS語句:
p{
color:red
}
 
其中”p”(選擇器的一種)代表下面html頁面中的p(段落)標記,而”{color:red}“表示針對p標記所做的宣告.
 
至於CSS的具體寫法,以及CSS的標準結構,以及什麼是選擇器,什麼是宣告.分別有什麼用,怎麼用?
    
    請聽下回分解………………………….
 
本文轉自 angerfire 51CTO部落格，原文連結：http://blog.51cto.com/angerfire/86862，如需轉載請自行聯絡原作者


相關文章