CSS簡單了解與應用

一、CSS基本概念：

CSS——級聯樣式表（Cascading Style Sheet）簡稱“CSS”，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網頁風格設計的。

CSS能夠對 HMTL 中的對象的位置排版進行像素級的精确控制，支援幾乎所有的字型字号樣式，擁有對網頁對象盒模型的能力；能夠統一地控制HMTL中各标志的顯示屬性； 能夠使人更能有效地控制網頁外觀以及建立特殊效果的能力，是真正做到網頁表現與内容分離的一種樣式設計語言。

二、CSS結構與文法

說道CSS将網頁表現與内容分離，不得不談到CSS的文法和結構。

CSS屬性和選擇器

css的文法結構僅僅有三部分組成：選擇器（Selector）、屬性（property）、和值（value）。

使用方法：

選擇器（Selector）指這組樣式編碼所要針對的對象。可以是一個XHTML标簽，如body,h1；也可以是定義了特定的ID或CLASS的标簽，如#main選擇器表示選擇<div id="main">，即一個被指定了main為id的對象。浏覽器将對css選擇器進行嚴格的解析，每一組樣式均會被浏覽器應用到對應的對象上。 屬性（Property）是CSS樣式控制的核心，對于每一個XHTML中的标簽，CSS都提供了豐富的樣式屬性，如顔色、大小、定位、浮動方式等。 值（value）是指屬性的值，形式有兩種，一種是指定範圍的值，如float屬性，隻可能應用left，right，none三種值；另一種則是用數值的，如width能夠使用0-9999，或其它數學機關來指定。

在實際應用中，我們往往使用以下類似的應用形式：

選擇器有3類：ID選擇器，類選擇器和HTML标簽選擇器。其中優先級為:ID選擇器 > 類選擇器 > HTML标簽選擇器。

ID選擇器

ID是網頁中用來辨別HTML中一個特定元素的，ID選擇器在CSS中用#号來定義。

例：

HTML中：

CSS中：

CLASS選擇器(類選擇器)

class則是網頁中用來辨別一組特定元素的，類選擇器在CSS中用.号來定義。

标簽選擇器 （類型選擇器）

類型選擇器，是指以網頁中已有的标簽類型作為名稱的選擇器。body是網頁中的一個标簽類型，div也是，span也是。是以以下選擇器都是類型選擇器，而它們将控制頁面中所有的body或div或span：

當然，CSS也提供了便捷的文法：

①.除了對單個XHTML元素進行樣式指定，同樣可以對一組對象進行相同的樣式指派，使用逗号對選擇器進行分隔。

使得頁面中所有的h1,h2,h3,p,span都将具有相同的樣式定義。這樣做的好處是對于頁面中需要使用同樣式的地方隻需要書寫一次樣式表即可實作，減少代碼量，改善css代碼的結構。

②.可以對某一個對象的子對象進行樣式設定， 對象之間使用空格作為個分隔符。 

HTML中：             

CSS中： 

h1标簽之下的span标簽将被應用font-weight:bold的樣式設定。注意，僅僅對有此結構的标簽有效，對于單獨存在的h1或單獨存在的span及其他非h1标簽下屬的span均不會應用此樣式。這樣做能夠幫助我們避免過多的ID及CLASS的設定，直接對所需設定的過猶不及進行設定。

還有：

當然多級也是支援的，如以下選擇器樣式同樣能夠作用：

css還提供了一些特殊标簽的表示方法：

①.用*号來泛指所有的元素

②.body中設定全文的樣式

③.a:link，a:hover，a:visited 可以設定 滑鼠未移上、經過、通路過後的超連結樣式

④.居中對齊方式：

三、使用CSS布局的優點

使用CSS布局的網頁相對于傳統的Table布局的網頁有4大優勢：

1.表示與内容分離

2.提高頁面的載入速度

3.易于維護和改版

4.更符合W3C指定的WEB标準

四、CSS使用方式：

CSS有3種方式可以在站點網頁上使用：

    ①内聯樣式：采用style屬性将樣式内嵌到各個網頁元素。

    ②内部樣式表：将用style元素建立嵌入的樣式表插入到網頁中的HEAD元素部分中。

    ③外部樣式表：用link元素将外部樣式表連結到網頁上。

舉例說明：

【内聯樣式】

【内部樣式表】

【外部樣式表】

“Test.htm”檔案内容：

“cssTest.css”檔案内容：