第六章CSS概述25課件

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

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

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

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

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

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

7、接式、導(dǎo)入式。行內(nèi)式行內(nèi)式式所有樣式方法中最為直接的一種，它直接對HTML的標(biāo)記使用style屬性，然后將CSS代碼直接寫在其中。例如 歡迎內(nèi)嵌式內(nèi)嵌式樣式表就是將CSS寫在與之間，并用和標(biāo)記進(jìn)行聲明?？梢钥闯鏊蠧SS的代碼被集中在了同一個區(qū)域，方便了后期的維護。鏈接式鏈接式CSS樣式是使用頻率最高，也是最為實用的方法。它將HTML頁面本身與CSS樣式風(fēng)格分離為兩個或多個文件，實現(xiàn)了頁面框架HTML代碼與美工CSS代碼的完全分離，使得前期制作和后期維護都十分方便。語法：導(dǎo)入式導(dǎo)入式樣式表與鏈接式樣式表的功能基本相同，只是語法和運作方式上略有區(qū)別。采用import方式導(dǎo)入樣式表。常用的方法如下

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

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

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

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

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

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

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

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