當前位置:編程學習大全網 - 源碼下載 - 什麽是CSS?

什麽是CSS?

CSS

釋義<壹>

CSS(Cascading Style Sheets),即層疊樣式表,與HTML超文本標記語言配合以定義網頁表現的樣式語言。

歷史

當初壹幫技術人員想出HTML,主要側重於定義內容,比如<p>表示壹個段落,<h1>表示標題,而並沒有過多設計HTML的排版和界面效果。

隨著Internet的迅猛發展,HTML被廣泛應用,上網的人們當然希望網頁做得漂亮些,因此HTML排版和界面效果的局限性日益暴露出來。為了解決這個問題,人們也走了不少彎路,用了壹些不好的方法,比如給HTML增加很多的屬性結果將代碼變得很臃腫,將文本變成圖片,過多利用Table來排版,用空白的圖片表示白色的空間等。直到CSS出現。

CSS可算是網頁設計的壹個突破,它解決了網頁界面排版的難題。可以這麽說,HTML的Tag主要是定義網頁的內容(Content),而CSS決定這些網頁內容如何顯示(Layout)。

CSS與網頁的鏈接方法

內嵌樣式(Inline Style)

內部樣式表(Internal Style Sheet)

外部樣式表(External Style Sheet)

內嵌樣式(Inline Style)

Inline Style是寫在Tag裏面的。內嵌樣式只對所在的Tag有效。

<P style="font-size:20pt; color:red">這個Style定義<p></p>裏面的文字是20pt字體,字體顏色是紅色。</p>

顯示示例

內部樣式表(Internal Style Sheet)

內部樣式表是寫在HTML的<head></head>裏面的。內部樣式表只對所在的網頁有效。

<HTML>

<HEAD>

<STYLE type="text/css">

H1.mylayout {border-width:1; border:solid; text-align:center; color:red}

</STYLE>

</HEAD>

<BODY>

<H1 class="mylayout"> 這個標題使用了Style。</H1>

<H1>這個標題沒有使用Style。</H1>

</BODY>

</HTML>

顯示示例

內部樣式表(Internal Sytle Sheet)要用到Style這個Tag,寫法如下:

<STYLE type="text/css">

......

</STYLE>

外部樣式表(External Style Sheet)

如果很多網頁需要用到同樣的樣式(Styles),用什麽方法呢?

將樣式(Styles)寫在壹個以.css為後綴的CSS文件裏,然後在每個需要用到這些樣式(Styles)的網頁裏引用這個CSS文件。

比如可以用文本編輯器(NotePad)建立壹個叫home的文件,文件後綴不要用.txt,改成.css。文件內容如下:

H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}

然後妳建立壹個網頁,代碼如下:

<HTML>

<HEAD>

<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY>

<H1 class="mylayout"> 這個標題使用了Style。</H1>

<H1>這個標題沒有使用Style。</H1>

</BODY>

</HTML>

顯示示例

使用外部(Extenal)樣式表,相對於內嵌(Inline)和內部式(Internal)的,有以下優點:

樣式代碼可以復用。壹個外部CSS文件,可以被很多網頁***用。

便於修改。如果要修改樣式,只需要修改CSS文件,而不需要修改每個網頁。

提高網頁顯示的速度。如果樣式寫在網頁裏,會降低網頁顯示的速度,如果網頁引用壹個CSS文件,這個CSS文件多半已經在緩存區(其它網頁早已經引用過它),網頁顯示的速度就比較快。

解決css文件過大的問題

如果頁面內容過多,css文件會很大,同樣會造成很多不便,那麽我們該如何解決這個問題呢?我們可以對每個細節進行css設計,比如對於字體的設置我們可以存入font.css文件,對邊界等的設定我們可以存入lay.css文件,對其他壹些版式的規定可以存入other.css文件,然後我們建立壹個main.css文件,然後在裏邊寫入如下代碼:

@import url(font.css);

@import url(lay.css);

@import url(other.css);

然後只需要在html文件裏添上main.css的鏈接即可,這樣子壹方面減小了css文件的容量,另壹方面似乎也更方便管理,特別是對大型網站。

串聯(Cascading)

CSS第壹個字母,是Cascading,意為串聯。它是指不同來源的樣式(Styles)可以合在壹起,形成壹種樣式。

Cascading的順序是:

瀏覽器缺省(browser default)(優先級最低)

外部樣式表(Extenal Style Sheet)

內部樣式表(Internal Style Sheet)

內嵌樣式表(Inline Style)(優先級最高)

樣式(Styles)的優先級依次是內嵌(inline), 內部(internal), 外部(external), 瀏覽器缺省(browser default)。假設內嵌(Inline)樣式中有font-size:30pt, 而內部(Internal)樣式中有font-size:12pt,那麽內嵌(Inline)式樣式就會覆蓋內部(Internal)樣式。

  • 上一篇:新造車企業非死即傷,理想汽車卻迎來“牛市”?
  • 下一篇:如何創建壹個自簽名的SSL證書
  • copyright 2024編程學習大全網