1、CSS網頁設計CSS網頁設計第一部分 CSS核心原理第二部分 CSS專題技術第三部分 CSS頁面布局第一部分 CSS核心原理HTML與CSS概述CSS選擇器與相關特性CSS設計實踐CSS盒子模型盒子的浮動與定位Web標準HTML與CSS1.1 HTML與CSS概述Web標準 隨著科技的發展，在越來越開放的環境中，各個相互關 聯的事物要能夠協同工作，就必須遵守一些共同的標準來工作。 “Web標準”也是互聯網領域中的標準，實際上，它并不是一個標準，而是一系列標準的集合。 Web標準 一個標準并不是某個人或者某個公司在某一天忽然間制定出來的。標準都是在實際應用過程中，經過市場的競爭和考驗，經過一系列

2、的研究討論和協商之后達成的共識。1.1.1 Web標準“Web標準”概述 網頁主要由3個部分組成：結構、表現、行為。 在一個網頁中，同樣可以分為若干個組成部分，包括各級標題、正文段落、各種列表結構等，這就構成了一個網頁的“結構”；每個組成部分的字號、字體和顏色等就構成了它的“表現”；網頁和傳統媒體不同的一點是，它可以隨時變化，而且可以和讀者互動，因此如何變化以及如何交互，就稱為它的“行為”。因此，概括來說，“結構”決定了網頁“是什么”，“表現”決定了網頁看起來是“什么樣子”，而“行為”決定了網頁“做什么”。“結構”、 “表現”和“行為”分別對應于3種非常常用的技術，即HTML、CSS和Java

3、Script。 也就是說HTML用來決定網頁的結構和內容；CSS用來設定網頁的表現樣式；JavaScript用來控制網頁的行為。1.1.2 HTML與CSS CSS標準傳統HTML的缺點CSS的引入如何編輯CSSCSS標準css(cascading style sheet)中文譯為層疊式樣式表，它是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。css的引入就是為了使HTML語言更好地適應頁面的美工設計。傳統HTML的缺點在css還沒有被引入頁面設計之前，傳統的HTML語言要實現頁面美工設計是十分麻煩的。缺點：維護困難、標記不足、網頁過“胖”等等。CSS的引入可以看出css對于

4、網頁的整體控制較單純的HTML語言有了突破性的進展，并且后期修改和維護都十分方便。如何編輯CSSCSS文件和HTML文件一樣，都是純文本文件。因此可以使用一般的文字處理軟件都可以對CSS進行編輯。DW代碼模式下同樣可以對CSS代碼有著非常好的語法著色以及代碼提示功能。對于CSS代碼，在默認情況下都采用粉紅色進行語法著色；而HTML代碼中的標記是藍色；正文內容為黑色。而且每行代碼前都有行號進行標記，方便對代碼進行整體規劃。1.2 CSS選擇器與相關特性構造CSS規則基本CSS選擇器在HTML中使用CSS的方法CSS的層疊特性1.2.1 構造CSS規則概括來說，CSS就是由3個基本部分組成：“對象

5、”、“屬性”、“屬性值”。CSS的思想就是首先指定對什么“對象”進行設置，然后指定對該對象的哪個方面的“屬性”進行設置，最后給出設置的“屬性值”。1.2.2 基本CSS選擇器在CSS的3個組成部分中，“對象”很重要，它指定了對哪些頁面元素進行設置。因此它有一個專門的名稱選擇器。選擇器是CSS中很重要的概念，所有HTML語言中的標記樣式都是通過不同的CSS選擇器進行控制的。在CSS中，有幾種不同類型的選擇器。基本選擇器有標記選擇器、類別選擇器、ID選擇器3種。標記選擇器一個HTML頁面由很多不同的標記組成，而CSS標記選擇器就是聲明哪些標記采用哪種CSS樣式。因此每一種HTML標記的名稱都可以作

6、為相應的標記選擇器的名稱。例如P選擇器就是用于聲明頁面中所有標記的樣式風格。類別（class）選擇器標記選擇器一旦聲明，那么頁面中所有的相應標記都會相應地產生變化。例如當聲明了標記為紅色時，頁面中所有的標記都將顯示紅色。如果希望其中的某一個標記不是紅色，而是藍色，這時僅依靠標記選擇器是不夠的，還需引入類別（class）選擇器ID選擇器ID選擇器的使用方法跟class選擇器基本相同，不同之處在于ID選擇器只能在HTML頁面中使用一次。在HTML的標記中只需要利用id屬性，就可以直接調用CSS中的ID選擇器。1.2.3 在HTML中使用CSS的方法如何在HTML中使用CSS，包括行內式、內嵌式、鏈

7、接式、導入式。行內式行內式式所有樣式方法中最為直接的一種，它直接對HTML的標記使用style屬性，然后將CSS代碼直接寫在其中。例如 歡迎內嵌式內嵌式樣式表就是將CSS寫在與之間，并用和標記進行聲明。可以看出所有CSS的代碼被集中在了同一個區域，方便了后期的維護。鏈接式鏈接式CSS樣式是使用頻率最高，也是最為實用的方法。它將HTML頁面本身與CSS樣式風格分離為兩個或多個文件，實現了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護都十分方便。語法：導入式導入式樣式表與鏈接式樣式表的功能基本相同，只是語法和運作方式上略有區別。采用import方式導入樣式表。常用的方法如下

8、： import url(sheet.css); import url(“sheet.css”); import sheet.css; import sheet.css; import “sheet.css”;例如： import 02.css; 1.3 CSS設計實踐手工方式編寫頁面使用Dreamweaver進行CSS設置1.4 CSS盒子模型盒子模型是CSS控制頁面時一個重要的概念。所有頁面中的元素都可以看成是一個盒子，占據著一定的頁面空間。可以通過調整盒子的邊距和距離等參數，來調節盒子的位置和大小。在CSS中，一個獨立的盒子模型由content（內容）、border（邊框）、paddin

9、g（內邊距）、margin（外邊距）四個部分組成。在CSS中可以通過設定width和height的值來控制內容所占的矩形的大小，并且對于任何一個盒子，都可以分別設定4條邊各自的border、padding和margin。因此只要利用好這些屬性，就能夠實現各種各樣的排版效果。1.4.1 邊框邊框（border）一般用于分割不同元素。Border的屬性主要有3個，分別是color（顏色）、width（寬度）、style（樣式）。在設置border時常常需要將這3個屬性很好地配合起來，才能達到良好的效果。在使用CSS設置邊框的時候，可以分別使用border-color、 border-width、

10、border-style設置它們。border-color指定邊框的顏色。border-width用來指定邊框的寬度。可以設為thin、medium、thick、length。length表示具體的數值。 border-style可以設為none、hidden 、dotted 、dashed 、solid 、double 、groove 、ridge 、inset 、outset，分別表示無、隱藏、點線、虛線、實線、雙線、凹槽、突脊、內陷、外凸。屬性值的簡寫形式四個邊框設置同樣的效果 例如： border: 2px green dashed 對不同的邊框設置不同的效果 方法是按照規定的順序，給

11、出2個、3個或4個屬性值，它們的含義將有所區別。 如果給出2個屬性值，那么前者表示上下邊框的屬性，后 者表示左右邊框的屬性。 如果給出3個屬性值，那么前者表示上邊框的屬性，中間 表示左右邊框的屬性，后者表示下邊框的屬性。 如果給出4個屬性值，那么依次表示上、右、下、左邊框的屬性。對一條邊框設置與其他邊框不同的屬性 在CSS中可以單獨對某一條邊框在一條CSS規則中設置屬性。 例如：border: 2px green dashed border-left: 1px red solid 同時制定一條邊框的一種屬性 有時需要對某一條邊框的某一個屬性進行設置，可以寫作： border-left-colo

12、r: red border-right-width: 2px border-top-color: #ffffff border-bottom-style: solid1.4.2 設置內邊距內邊距（padding）用于控制內容與邊框之間的距離。和前面介紹的邊框類似，padding屬性可以設置1、2、3、4個屬性值。如果需要專門設置某一個方向的padding，可以使用padding-left、 padding-right、 padding-top、 padding-bottom來設置。1.4.3 設置外邊距外邊距（margin）指的是元素與元素之間的距離。其值的設置與前面的兩者相同。1.4.4 標

13、準文檔流“標準文檔流”簡稱“標準流”，是指在不使用其他與排列和定位相關的特殊CSS規則時，各種元素的排列規則。塊級元素 塊級元素總是以一個塊的形式表現出來，并且跟同級的兄弟塊依次豎直排列，左右撐滿。行內元素 對于文字這類元素，各個字母之間橫向排列，到最右端自動折行，這種元素叫“行內元素”。標記與標記為了能夠更好地理解“塊級元素”和“行內元素”，這里介紹在CSS排版的頁面中經常使用的標記和（division）簡單而言是一個區塊容器標記，即與之間相當于一個容器，可以容納段落、標題、表格、圖片，乃至章節、摘要和備注等各種HTML元素。可以把與中的內容視為一個獨立的對象，用于CSS的控制。標記與標記一

14、樣，作為容器標記而被廣泛用在HTML語言中。在與中間同樣可以容納各種HTML元素，從而形成獨立的對象。與的區別在于， 是一個塊級元素，它包圍的元素會自動換行。而僅僅是一個行內元素，在它的前后不會換行。1.4.5 盒子在標準流中的定位原則如果要精確地控制盒子的位置，就必須對margin有更深入的了解。margin用于調整不同的盒子之間的位置關系。行內元素之間的水平margin塊級元素之間的豎直margin行內元素之間的水平margin 當兩個行內元素緊鄰時，它們之間的距離為第1個元素的margin-right加上第2個元素的margin-left。塊級元素之間的豎直margin 兩個塊級元素之間

15、的距離不是margin-top與 margin-bottom的總和，而是兩者中的較大者。 1.5 盒子的浮動與定位在標準流中，一個塊級元素在水平方向會自動伸展，直到包含它的元素的邊界；而在豎直方向和兄弟元素依次排列。使用“浮動”方式后，塊級元素的表現會有所不同。CSS中有一個float屬性，默認為none，也就是標準流通常的情況。如果將float屬性的值設置為left或right，元素就會向其父元素的左側或右側靠緊，同時盒子的寬度不再伸展，而是收縮，根據盒子里面的內容的寬度來確定。盒子的定位在CSS中有一個非常重要的屬性position,從字面上看就是指定塊的位置。屬性值如下：static:默認值relative:相對定位absolute:絕對定位使用相對定位，除了將position屬性設為relative之外，還需指定一定的偏移量，水平方向通過left或right屬性來指定，豎直方向通過top和bottom來指定。使用絕對定位的盒子已