1、ASP.netASP.net程序設計程序設計第3章 CSS主要內容CSS概述CSS語法CSS選擇器CSS樣式CSS盒模型及定位3.1 CSS概述CSS (C Cascading S Style S Sheets)即層疊樣式表，主要用其定義HTML元素的顯示方式。在HTML文檔中使用CSS定義元素樣式，很好地解決了頁面顯示內容和表現形式的分離問題，提高了HTML頁面的工作效率。HTML標簽主要用于定義文檔內容，如果需要對于網頁內容進行顯示格式的調整，可以在標簽中增加屬性設置以滿足要求，但是這種修改方法收到標簽位置和內容的限制，給頁面表現形式的修改增加了困難。若在主頁制作時采用CSS技術，可以有效

2、地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的整體控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者多個網頁的外觀和格式。3.1.1 CSS歷史網頁設計最初使用HTML標簽來定義網頁文檔以及格式的，通過使用 、 這樣的標簽，HTML通過瀏覽器可以表達“標題”、“段落”、“表格”等信息內容和格式。但是這種格式表達樣式單一，不能夠滿足更多的文檔樣式需求。而兩種主要的瀏覽器（Netscape 和 Internet Explorer），為了豐富網頁的現實內容和效果，不斷地將新的 HTML 標簽和屬性添加到 HTML 規范中，這使得文檔中的內容要清晰地獨立于文檔表現層變

3、得越來越困難。為了解決這些問題，萬維網聯盟（W3C），在 HTML之外創造出樣式（Style）。樣式主要用于定義如何顯示 HTML 元素，我們將獨立于樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。1997年W3C在頒布HTML標準的同時公布了第一個層疊樣式標準CSS1。在這個版本中，已經包含了font的相關屬性、顏色和背景的相關屬性、box的相關屬性等。1998年5月發布了CSS2版本，樣式得到了進一步的充實，并且開始使用樣式表結構?，F在所使用的CSS版本基本都是在這個版本的基礎上發展起來的。2004年2月

4、正式推出了CSS2.1。它在CSS2的基礎上作了一定的修改，刪除了部分不被瀏覽器支持的屬性。2010年推出CSS3。3.1.2 CSS的創建現在所有的主流瀏覽器均支持層疊樣式表。樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。如果再HTML文檔中一個元素被不止一個樣式定義時，所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中：瀏覽器缺省設置外部樣式表內部樣式表（位于 標簽內部）內聯樣式（在 HTML 元素內部）因此，內聯樣式（在 HTML 元素內部）擁

5、有最高的優先權，這意味著它將優先于以下的樣式聲明： 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。插入樣式表的方法有以下三種：一、外部樣式表外部樣式表適合于需要應用于很多頁面的樣式的定義。當在一個網站的文檔中使用外部樣式表時，可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 標簽鏈接到外部樣式表。 標簽應定義在文檔的標簽中。語法格式如下： 其中href用于指定要引用的css文件的路徑，使得瀏覽器會從該css文件中讀取樣式聲明，并根據它來格式文檔。外部樣式表應該保存在以.css為擴展名的文件中，該文件內容可以在任何文本編輯器中進行編輯，但文件不能包含任何的 h

6、tml 標簽。二、內部樣式表內部樣式表適合于在單個文檔中使用的特殊樣式。可以通過標簽進行定義，應該放在標簽中。語法格式如下： 樣式定義 三、內聯樣式內聯樣式適用于只在某個元素上使用一次的樣式的定義。這種樣式的定義和內容混雜在一起，失去了樣式表的許多優勢，因此不建議大量使用。要使用內聯樣式，需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。例如：用戶名：四：多重樣式如果某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將從更具體的樣式表中被繼承過來。3.2 CSS語法CSS基本語法結構：selector declaration1; declaratio

7、n2; . declarationN;其中，selector表示選擇器，用來表示該樣式表要修飾的HTML元素，在之后的大括號中可以添加一條或多條聲明，每條聲明的基本結構為“property: value; ”，property表示屬性，value為該屬性的取值。請注意：1、如果屬性值由若干單詞構成，則應該給屬性值加引號：、屬性值可以有多種表示方法。3、CSS 對大小寫不敏感，但是，如果與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。4、注意每個屬性聲明后面應該加分號，如果不加，在解釋這個樣式時會無法解釋這條屬性的聲明以及下一條屬性的聲明。5、可以對于選擇器進行分組。

8、6、CSS 繼承是指在設置了父級選擇器的CSS樣式后，該選擇器以下的子級都默認使用此樣式。一般只有文字文本具有繼承特性，如文字大小、文字粗細、文字顏色、字體等。3.3 CSS選擇器選擇器是CSS基本格式中的重要組成部分，它指明了樣式表中格式的設置對象，也明確了樣式表的使用方式。在樣式表的應用過程當中，要根據選擇器的不同類型進行格式引用。3.3.1 派生選擇器派生選擇器也稱為上下文選擇器，可以通過上下文關系來定義某個HTML元素的樣式。語法格式：父標簽 子標簽屬性：屬性值；3.3.2 id 選擇器id選擇器是為定義的樣式指定id，要為某個HTML元素設置這種樣式，則需要在該元素標簽中設置id屬性

9、值為該樣式id。id 選擇器語法格式為：#id名屬性：屬性值；3.3.3類選擇器語法格式如下：在 CSS 中，類選擇器以一個點號顯示：.類選擇器名屬性：屬性值；這種選擇器的一個重要特點是以點號開始。3.3.4屬性選擇器CSS中的屬性選擇器可以對帶有指定屬性的 HTML 元素設置樣式，其基本語法格式如下：屬性名屬性：屬性值；3.3.5 通配符選擇器通配符選擇器（universal selector），顯示為一個星號（*）。該選擇器可以與任何元素匹配，基本語法格式如下：*屬性：屬性值；3.3.6 元素選擇器元素選擇器是CSS中最基本的選擇器，也是最常用的選擇器。例如：pcolor:red;back

10、ground-color:#efefef;font-size:20px;3.4 CSS樣式3.4.1 文字樣式文本屬性主要用來對文本格式進行設置，例如修改文本的顏色、文本字體、字符間距、文本對齊方式、文本縮進方式等。下面做些具體介紹。屬性功能font-family設置字體系列，可以是通用字體系列和特定字體系列。font-size設置字體的尺寸，單位可以是px、em或百分比。font-style設置字體風格，可取值為normal、italic（斜體）和oblique（傾斜）。font-variant以小型大寫字體或者正常字體顯示文本，可取值為normal、small-caps或inherit。f

11、ont-weight設置字體的粗細，可取值為normal、bold（粗體）和整數值（100-900）。1、文字字體有關文字字體的設置如下：2、文字顏色。修改文字顏色可以使用color屬性，例如：pfont-size:30px;color:red;例如：30px紅色文字。效果如下：3、文本縮進方式。Web頁面上的段落可以像word中的文檔一樣設置文本的縮進狀態，這需要使用到CSS提供的text-indent 屬性。text-indent 屬性可以使元素的第一行實現縮進效果，一般來說，所有塊級元素都可以應用 text-indent屬性，但是該屬性無法應用于行內元素以及圖像等的替換元素。例1.首行縮

12、進：p text-indent: 2em;一個段落可以有多行構成，通常設置首行縮進兩個漢字。效果如下：4、對齊方式。設置水平對齊方式使用text-align屬性，它具有五個屬性值，如下：left，表示左邊對其；right，表示右對齊；center，表示文本居中對齊；justify，表示兩端對齊；inherit，表示應該從父元素繼承 text-align 屬性的值。例如：h1text-align:center;文本居中對齊效果如下：5、字符間距。CSS中使用word-spacing 屬性來修改字（由空白符包圍的一個字符串）間距，也就是修改單詞之間的距離。其默認值為normal即使用標準間距（0）

13、，若使用正值，則表示增大間距，若使用負值，則表示減小間距。例如：h1.looseword-spacing:1em;h1.tightword-spacing:-5px;Increasing the word spacingReduce the word spacing效果如下：6、字符轉換Web頁面中的英文字母在現實中往往有些特殊規定，比如全部使用大寫、單詞首字母大寫等等，這給HTML文檔編寫帶來了麻煩，一旦輸入不符合格式要求，顯示也就跟著出錯，為了避免這種情況，可以使用text-transform屬性處理文本的大小寫。text-transform屬性具有以下幾個屬性值：none，表示不對文本做

14、任何修改；uppercase，表示將文本全部轉換為大寫字母；lowercase，表示將文本全部轉換為小寫字母；capitalize，表示每個單詞的首字母大寫。例如：h1 text-transform: capitalize;this is a title.效果如下：7、文本修飾。利用text-decoration屬性可以對文本進行簡單地修飾。該屬性的常用屬性值如下：none，表示不添加任何修飾；underline，表示添加下劃線；overline，表示添加上劃線；line-through，表示添加刪除線；blink，表示添加文本閃爍效果。例如：p.underlinetext-decoratio

15、n:underline;帶有下劃線的文本段落。效果如下：8、文本方向。為了顯示不同閱讀習慣的文本，可以使用direction屬性修改文字方向。direction屬性影響塊級元素中文本的書寫方向、表中列布局的方向、內容水平填充其元素框的方向、以及兩端對齊元素中最后一行的為止。direction 屬性有兩個值：ltr 和 rtl。ltr表示從左到右顯示文本，rtl表示從右到左顯示文本。例如：punicode-bidi:bidi-override;direction:rtl;這是一個從右到左顯示的段落。效果如下：3.4.2 列表與表格樣式1、CSS列表樣式設置。通常我們在向他人講解某個問題時，總是要

16、列舉幾個重要的條目，這就形成了列表?？梢酝ㄟ^列表樣式的設置，使得列表更加醒目、清晰。（1）列表類型列表分為有序列表（）和無需列表（），在有序和無序列表中又有很多種類。有序列表通過左側的編號字符來區別類型，主要類型有：disc（實心圓）、circle（空心圓）、square（實心方塊）；而無序列表則通過列表左側的項目符號圖標來區別類型，主要類型有：decimal（數字）、decimal-leading-zero（0開頭的數字，如01, 02, 03），lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大

17、寫英文字母）、lower-greek（小寫希臘字母）等。（2）列表項圖像和列表標志位置。有時，常規的標志不能夠滿足我們的格式需求，可以考慮使用圖像來作為項目標志，這種效果可以利用list-style-image屬性達到。還可以通過list-style-position屬性控制標志出現在列表項內容之外還是內容內部。例如：ullist-style-image:url(1.ico);list-style-position:inside;項目1項目2效果如下：2、CSS表格樣式設置。使用CSS表格屬性可以美化表格的外觀。屬性屬性描述描述width設置元素的寬度。height設置元素的高度。text-a

18、lign設置表格文本的水平對齊方式，取值為left、right和center。vertical-align設置表格文本的垂直對齊方式，取值為top、bottom和middle。padding設置表格中內容與邊框的距離。color設置文本顏色。background-color設置背景顏色。border設置邊框屬性。border-collapse設置是否把表格邊框合并為單一的邊框，取值為separate、collapse和inherit。border-spacing設置分隔單元格邊框的距離，可使用兩個值分別表示水平間距和垂直間距。caption-side設置表格標題的位置，取值為top、bottom和inherit。IE8以上支持該屬性。empty-cells設置是否顯示表格中的空單元格，取值為hide、show和inherit。table-layout設置顯示單元、行和列的算法，取值為automatic、fixed和inherit。3.4