CSS基礎(一)


1.CSS簡介

  在網頁設計中,使用HTML標記屬性對網頁進行修飾的方式存在很大的局限和不足,如網站維護困難、不利於代碼閱讀等。如果希望網頁美觀、大方,並且升級輕松維護方便,就需要使用CSS實現結構與表現的分離。CSS以HTML為基礎,提供了豐富的功能,如字體、顏色、背景的控制及整體排版等,而且還可以針對不同的瀏覽器設置不同的樣式。

2.CSS樣式規則

1.CSS樣式中的選擇器嚴格區分大小寫,屬性和值不區分大小寫,按照書寫習慣一般將 選擇器、屬性和值 都采用小寫的方式。

2.多個屬性之間必須用英文狀態的分號隔開,最后一個屬性的分號可以省略,但是,為了便於增加新樣式最好保留。

3.如果屬性的值由多個單詞組成且中間包含空格,則必須為這個屬性值加上英文狀態下的引號。

示例:

4.在編寫CSS代碼時,為了提高代碼的可讀性,通常會加上CSS注釋。

示例:

5.在CSS代碼中空格時不被解析的,花括號及分號前后的空格可有可無。因此可以使用空格鍵、TAB鍵、回車鍵等對樣式代碼進行排版,即所謂的格式化CSS代碼,這樣可以提高代碼的可讀性。

示例:

下面的代碼就要比上面的美觀,可讀性更高,但是在實際的項目中,上面的代碼方式更為常見,減少項目體積,減少錯誤

3.CSS的一些特點

1.豐富的樣式定義

CSS提供了豐富的文檔樣式外觀,以及設置文本和背景屬性的能力;允許為任何元素創建邊框,以及元素邊框與其他元素間的距離,以及元素邊框與元素內容間的距離;允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

2.層疊性

簡單的說,層疊就是對一個元素多次設置同一個樣式,這將使用最后一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表,而某些頁面中的某些元素想使用其他樣式,就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫,在瀏覽器中看到的將是最后面設置的樣式效果。

3.繼承性

一些屬性和樣式,如果在父代的元素設置了,子代以及后代的元素沒有另外設置元素屬性的話,就會繼承父代的元素與屬性。

4.多頁面應用

CSS樣式表可以單獨存放在一個CSS文件中,這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬於任何頁面文件,在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。

5.頁面壓縮

在使用HTML定義頁面效果的網站中,往往需要大量或重復的表格和font元素形成各種規格的文字樣式,這樣做的后果就是會產生大量的HTML標簽,從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中,可以大大的減小頁面的體積,這樣在加載頁面時使用的時間也會大大的減少。另外,CSS樣式表的復用更大程度的縮減了頁面的體積,減少下載的時間。

4.引入CSS樣式表的方式

1.行內式

行內式也稱為內聯樣式,是通過標記的style屬性來設置元素的樣式,其基本語法格式如下:

<標記名 style="屬性1:屬性值; 屬性2: 屬性值2;  屬性3: 屬性值3 ;"> 內容  </標記名>

該語法中style是標記的屬性,實際上是任何HTML標記都擁有style屬性,用來設置行內性。其中屬性和值的書寫規范與CSS樣式規則相同,行內式只對其所在的標記及嵌套在其中的子標記起作用。

示例:

 通過示例可以看出,行內式也是通過標記的屬性來控制樣式的,這樣並沒有做到結構與表現的分離,所以一般很少使用。只有在樣式規則較少且只在該元素上使用一次,或者需要臨時修改某個樣式規則時使用。

2.內嵌式

內嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標記中,並且用<style>標記定義,其基本語法格式如下:

 該語法中<style>標記一般位於<head>標記中的<title>標記之后,也可以把它放在HTML文檔的任何地方。但是由於瀏覽器是從上往下解析代碼的,把CSS代碼放在頭部便於提前被下載和解析,以避免網頁內容下載后沒有樣式修飾帶來的尷尬。同事必須設置type的屬性值為  "text/css"  ,這樣瀏覽器才知道<style>標記包含的是CSS代碼。

示例:

內嵌式CSS樣式只是對其所在的HTML頁面有效,因此,僅設計一個頁面時,使用內嵌式是一個不錯的選擇。但如果是一個網站,不建議使用這種方式,因為它不能發揮CSS代碼的重用優勢。

 3.鏈入式

鏈入是是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中,通過<link  />標記將外部的=樣式文件鏈接到HTML文檔中,其基本語法格式如下。

該語法中,<link />標記需要放在<head>頭部標記中,並且必須指定<link />標記的三個屬性,具體如下:

1.href

定義所鏈接外部樣式表文件的URL,可以是相對路徑,也可以是絕對路徑。

2.type

定義所鏈接文檔的類型,在這里需要指定為“text/css”,表示鏈接的外部文件為CSS樣式表。

3.rel

定義當前文檔與被鏈接文檔之間的關系,在這里需要指定為“stylesheet”,表示被鏈接的文檔是一個樣式表文件。

鏈入式最大的好處是同一個CSS樣式表可以被不同的HTML頁面鏈接使用,同時一個HTML頁面也可以通過多個< link  />標記鏈接多個CSS樣式表,鏈入式是使用頻率最高,也是最實用的CSS樣式表。它將HTML代碼與CSS代碼分離為兩個或多個文件文件,實現了結構和表現的完全分離,使得網頁的前期制作和后期維護都十分方便。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM