1. 程式人生 > >2014年辛星解讀css第一節

2014年辛星解讀css第一節

教學 back hit pre 分離 設計 功能 one 文件

CSS是Cascading Style Sheets的縮寫。即層疊樣式表,它用於表現HTML的樣式,即HTML僅僅是去寫該網頁有哪些內容,至於怎樣去表現它們,由CSS去定制。

*************時代的呼喚*************

1.在之前,我們直接把網頁的格式寫到HTML中去,這樣會造成格式的混亂,並且難以閱讀和改動,只是這不是最大的問題,最大的問題在於我們想給網頁換一個表達樣式的時候,須要改動的地方不僅非常多關鍵是非常零散,須要花費非常大的力氣去定位這些樣式。

2.於是,把網頁內容與其表現形式相分離的想法就出現了,CSS可以實現對網頁中的對象的精確控制,並且支持差點兒全部的字體字號樣式,還擁有對網頁對象和模型樣式進行編輯的能力,並且可以進行一定的交互設計。因此功能還是比較強大的。

3.CSS的可讀性也非常強,略微熟悉一點英語的。也可以非常輕松的讀懂CSS代碼所要表述的意思,而且取改動它的樣式。

***********CSS的歷史*************

1.1996年12月17日,CSS1公布,1999年。此推薦被修訂。

2.1999年1月1日,CSS2公布,而且添加了對媒介和一些字體的支持。

3.2001年5月23日,CSS3公布,可是僅僅是一項草案。並沒有成為W3C的推薦標準,W3C的推薦標準還是1998年5月12日退出的CSS2.

**************CSS高速入門*************

1.CSS的入門比HTML並不高多少。也是一句話入門。剩下的就是實戰了。

2.CSS的語法例如以下:

選擇器{ 聲明1;聲明2。聲明3;.....聲明N}

3.這裏的聲明是以 “屬性:值”的形式,並且多個聲明之間用分號進行切割,即C語言的語句分隔符。

4.這裏的屬性是我們希望設置的樣式屬性。至於詳細的屬性。我們後面會說。

5.先看一個樣例:

h1 {color:red; font-size:14px;}

這裏的h1就是選擇器,當然這裏我們直接用標簽當做選擇器了。後面的color屬性取值為red,而後面的font-size屬性取值為14個像素。

6.當中color:red就能夠理解為一個聲明。

7.我們的CSS由多個這種規則組成。

*************演示樣例*************

1.我們先寫一個HTML文件,取名為”xin.html“。內容例如以下:

技術分享
<html>
<head>
    <title>2014年辛星CSS教學夏季版</title>
    <link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
    <p>辛星CSS,期待您的關註,分享知識,傳遞溫情</p>
</body>
</html>
技術分享

2.能夠從第四行代碼看出,它導入了一個my.css文件,然後我們在同一文件夾下新建一個my.css文件。書寫內容例如以下:

p{color: green;font-size: 14px;text-align: center;}

3.我們都保存完成之後,就能夠雙擊打開my.html文件,發現文字都在中間而且是綠色的。

4.至此。我們大致理解了css的工作機理。以下我們開始深入css的細節處開始學習。

*************小結**************

1.我們理解了CSS的由來,以及我們演示了CSS的語法。

2.然後我們通過一個小型的樣例。演示了CSS的大致使用方式。

2014年辛星解讀css第一節