《CSS入門教程》word版_第1頁
《CSS入門教程》word版_第2頁
《CSS入門教程》word版_第3頁
《CSS入門教程》word版_第4頁
《CSS入門教程》word版_第5頁
已閱讀5頁，還剩22頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、.CSS入門教程1、CSS簡介在理解了HTML或者XHTML之后，我們可以學習CSS。什么是CSS呢？讓我們先來一點感性體驗吧?？纯催@個沒有添加CSS的HTML文件 :/ csszengarden /zengarden-sample.html，是一個普普統(tǒng)統(tǒng)的網頁。然而通過給這個文件添加的CSS規(guī)那么，我們可以得到非常美觀的網頁 :/ csszengarden /?cssfile=/208/208.css&page=0。我們不改動HTML，只是通過添加不同的CSS規(guī)那么，我們就可以得到各種不同款式的網頁。好了，下面我們再來答復什么是CSS這個問題。CSS是CascadingStyleS

2、heets層疊款式表的縮寫。它的作用是定義網頁的外觀例如字體，顏色等等，它也可以和javascript等閱讀器端腳本語言合作做出許多動態(tài)的效果。同學習XHTML一樣，在學習CSS的過程中您只需要使用Windows自帶的記事本Notepad.exe就可以了。在實際制作網頁的時候您可能需要用到FontPage、Dreamweaver等專業(yè)的網頁設計軟件，它們將使得為網頁添加CSS的工作變得異常簡單。但是再次強調，在學習CSS的過程中，您不需要這些強大的軟件。本教程只使用visual studio 2020，目的在于練習手寫CSS代碼的才能，也是為了方便那些還沒有Dreamweaver之類軟件的讀者

3、。2、款式表的根本語法本節(jié)著重介紹款式表的根本語法，這是學好CSS的根底。2.1 插入款式表前后的網頁。為了更好地理解款式表的作用，我們先看一個CSS的應用實例。在本例子中，你很容易比照出使用CSS前后兩個網頁的區(qū)別，當然了，如今你可能讀不懂CSS部分的代碼。別擔憂，這些代碼將在少后的教程中介紹。我們首先來看一下未參加CSS的頁面。網頁里只有一段話：“菜鳥吧的站長是大傻瓜！傻瓜愛吃大西瓜！。而且由于分別是標題1、2、3、4，頁面內字體大小也不一樣，還有標題的自動換行。它的源代碼如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Stric

4、t/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" :/ /1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta -equiv="Content-Type" content="text/html; charset=gb2312" /> <!-這里將要插入CSS -> </hea

5、d> <body> <h1><a href=" :/cainiao8 /">菜鳥吧</a></h1> <h2>的站長</h2> <h3>是大傻瓜！傻瓜</h3><!-我就要被修該啦，郁悶 -> <h4>愛吃大西瓜！</h4> </body> </html> 下面我們簡單的為它加上一點CSS，來讓我不再傻按如下提示修改網頁的代碼：<!DOCTYPE html PUBLIC "-/W3C/D

6、TD XHTML 1.0 Strict/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" :/ /1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta -equiv="Content-Type" content="text/html; charset=gb2312" /> <style ty

7、pe="text/css"> <!- h1 font-size: 12px; h2,h4 font-size: 12px; display:inline; -> </style> </head> <body> <h1><a href=" :/cainiao8 /">菜鳥吧</a></h1> <h2>的站長</h2> <h3 style="display:none">是大傻瓜！傻瓜</h3>

8、; <h4>愛吃大西瓜！</h4> </body> </html> 讓我們來看看參加CSS之后的網頁。你很容易看出兩個網頁的差異，頁面內的文字大小統(tǒng)一了，而且只有標題1后面有一個換行，甚至有一部分文字被隱藏了起來。這都要歸功于上面紅色部分的代碼。它們就是CSS，下面就讓我們大概理解一下這些代碼的意義。2.2 CSS語法簡介加在head部分的<style type="text/css">和</style>分別被閱讀器識別為CSS的開場和完畢。而注釋標簽<!- ->那么是防止不支持CSS的閱讀器

9、將CSS內容作為網頁正文顯示在頁面上。上面的內容并沒有定義任何款式，它的任務只是告訴閱讀器CSS代碼的位置。下面的內容是重點，正是下面這一部分的內容使得頁面的外觀發(fā)生了明顯的變化，它也就是CSS的描繪部分定義部分：h1 font-size: 12px;h2,h4 font-size: 12px; display:inline; <h3 style="display:none">是大傻瓜！傻瓜</h3> 1 選擇器通常情況下，CSS的描繪部分是由三部分組成的，分別是選擇器、屬性和屬性值。寫法如下：選擇器 屬性: 屬性值; 例如：h1 font-size

10、: 12px;本例中選擇器也就是你想要描繪的HTML標簽，其它選擇器將在后面的教程中講解。上面例子的選擇器就是h1標簽。屬性和屬性值那么是說明你想要描繪h1的哪一個屬性，該屬性的值為多少，例如上面例子中將h1字體大小屬性為12像素，寫成font-size: 12px。屬性和屬性值之間用一個冒號“:分開，以一個分號“;完畢，最后別忘記用一對大括號“括起來。我們也可以為一個選擇器同時定義多個款式，款式之間用分號“;隔開。也可以同時為幾個標簽同時定義一組款式，標簽之間用逗號“,隔開。也許這兩句話比較繞嘴，不過事實上上面例子的第二行代碼就用到了CSS的這個特性。語句“h2,h4 font-size:

11、12px; display:inline; 同時為h2和,h4兩個標簽定義了兩個款式。當然了，為了使你的CSS代碼更容易閱讀和維護，你可以分行書寫這些屬性：h2,h4 font-size: 12px; display:inline; 注意1：如今講解上面代碼的最后一行，在<h3 style="display:none">中，我們沒有看到選擇器，這是因為插入CSS的位置不同，它將直接作用與當前標簽之內的元素。關于CSS不同的插入方式將在隨后的教程中討論。注意2：CSS的書寫方式請大家根據自己的愛好決定，不過最終的目的都很明確，進步維護CSS代碼的效率。2.3 CS

12、S注釋 我們以一個例子介紹在CSS中插入注釋的方法：<style type="text/css"> <!- h1 font-size: 12px; /* 把標題的大小都定義為12個像素 */ h2,h4 font-size: 12px; display:inline;-></style> 在CSS中，注釋以“/*開場，以“*/完畢，注釋里面的內容對于閱讀器來說是沒有意義的。2.4 class類和idclass和id是CSS中非常重要的內容。在上一節(jié)中我們理解了如何為特定的標簽定義款式，例如我們利用 “h1font-size: 12px;將

13、頁面內所有的標題1的字體大小改為了12像素。那么假設我不希望所有的標題1款式都被修改該怎么做呢？這時class和id就可以幫你的忙。為了理解class和id，我們先來看兩個網頁。紅色字體的是我們本節(jié)將要學習的部分。沒有參加CSS時的頁面<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" "http:/ /TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" :/ /1999/xhtml">

14、<head> <title>我真慘!被用來演示CSS!</title> <meta -equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <h1>我是頁面最上端的標題1</h1> <h1>我是頁面左側的標題1，用來導航</h1> <h1>我是頁面右側新聞的標題1</h1> <p>我是新聞的內容。</

15、p> </body> </html> 參加CSS之后的頁面<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" :/ /1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta -equiv="C

16、ontent-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!- h1.dabiaoti font-weight: bolder; text-align: center; h1#daohang font-size: 12px; font-weight: bolder; text-align: left; h1.xinwen font-size: 16px; font-weight:bold; text-align: center

17、; color:green; -> </style> </head> <body> <h1 class="dabiaoti">我是頁面最上端的標題1</h1> <h1 id="daohang">我是頁面左側的標題1，用來導航</h1> <h1 class="xinwen">我是頁面新聞的標題1</h1> <p class="xinwen">我是新聞的內容。</p> </bo

18、dy> </html>上面的例子應用class和id實現了3種不同的標題1。下面我們就來講講class和id的詳細應用規(guī)那么。1指定標簽的class和id首先我們要在<head>部分定義class類或id。class的定義方法： 指定標簽. 類名 款式id的定義方法：指定標簽#id名 款式然后我們在想要應用類的標簽上加上class類或者id屬性：class的應用方法：<指定標簽 class="類名">id的應用方法：<指定標簽 id="id名">這種方式定義的class類和id只能作用于指定標簽。在上

19、面的例子中我們定義了三個類，類名分別為"dabiaoti"、"daohang"和"xinwen"，它們均作用于h1標簽。當我們試圖將其中“xinwen的款式應用于一個<p>標簽的時候<p class="xinwen">我是新聞的內容。</p>，您會看到它的款式沒有發(fā)生任何改變。這是一種錯誤的CSS應用，因為類"xinwen"是給標簽h1定義的，而沒有給標簽p定義。注意：類名和id名不可以用數字開頭。2不指定標簽的類或id在網頁設計的過程中，你可能不希望你定義的

20、類只局限于一個標簽。就拿上面的例子來說，你可能希望xinwen類可以應用于段落標簽<p>。那么你只需要將定義部分的h1.xinwen改為.xinwen，即去掉h1。這種定義中不含標簽名的類當然也就不再局限于某一個標簽了。修改代碼中的款式，在閱讀器中看看修改之后的網頁，“新聞的內容也應用了xinwen類的款式。3class類與id的區(qū)別到這里你也許要問了，class和id看起來除了一個.和#的區(qū)別之外，無論在定義上還是在應用上似乎都是一模一樣??？然而事實上并不如此，同一id在一個頁面內只能應用一次，而class那么是用于描繪屢次出現的元素。這從它們的名稱上很容易理解。id就類似元素的

21、身份證號碼，它必須是唯一的，而class那么是一類具有共同屬性的元素的合稱，是一類。假設你試圖在一個頁面內屢次使用同一個id，頁面通常是可以正常顯示的。但是這會給后期的維護帶來不便，還可能造成其它的問題。所以我們一定要區(qū)分開id和class，并且合理的應用它們。4包含選擇符包含選擇符是指：標記1里包含標記2，假設只想定義標記2的款式，并且這種款式只對在標記1里的標記2中有效，對單獨的標記1或標記2無定義，例如： Table a font-size: 12px 在表格內的鏈接改變了款式，文字大小為12象素，而表格外的鏈接的文字仍為默認大小。3、款式表參加網頁方式本節(jié)以實例的形式講解如何為一個網頁

22、添加CSS款式。在上兩節(jié)中我們已經為網頁添加過簡單的款式表了，我們也理解了款式表的語法根底。本節(jié)將介紹將款式表參加到頁面中的幾種不同方法。3.1內部款式表其實我們在前兩節(jié)已經應用了內部款式表。內部款式表需要在網頁的<head>部分定義，格式如下：<head> <style type="text/css"> /*符合CSS語法構造的CSS語句，例如*/ body background-color: blue; </style> </head> 3.2行內款式表內嵌款式表它的使用方法我們在前兩節(jié)也已經使用過了。行內款式

23、表直接在標簽內部定義，使用style屬性，寫法如下：<標簽 style="符合CSS語法構造的CSS語句">例如：<p style="text-indent:24px;">段落內容</p>3.3外部款式表使用外部款式表時，CSS文件與網頁文件html是別分開來的。要讓某一個網頁調用一個外部CSS文件，你需要在網頁的<head>部分插入以下內容：<head> <link rel="stylesheet" type="text/css" href=&qu

24、ot;文件位置/你的CSS文件名.css" />/*文件位置就是所處在的文件夾相對與當前網頁的相對途徑*/ </head> 下面我們以一個實例來看看如何使用外部款式表：請看下面這個網頁文件，紅色部分的內容為網頁鏈入了一個CSS款式表文件“waibu.css，網頁和CSS文件的源代碼分別如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns

25、=" :/ /1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta -equiv="Content-Type" content="text/html; charset=gb2312" /> <link rel="stylesheet" type="text/css" href="waibu.css"> </head> <bod

26、y> <h1 class="dabiaoti">我是頁面最上端的標題1</h1> <h1 id="daohang">我是頁面左側的標題1，用來導航</h1> <h1 class="xinwen">我是頁面新聞的標題1</h1> <p>我是新聞的內容。</p> </body> </html>h1.dabiaoti font-weight: bolder; text-align: center; h1#daohan

27、g font-size: 12px; font-weight: bolder; text-align: left; .xinwen font-size: 16px; font-weight:bold; text-align: center; color:green; p text-align: center; 3.4層疊的意義當我們?yōu)橥粋€標簽屢次設置款式表的時候，這些款式表會最終層疊成一個款式表來作用于標簽。例如，你在外部款式表中為p定義了如下款式：p text-align: left; 而在內部款式表中又定義了如下款式：p text-indent: 24px;那么最終網頁內p標簽的款式將為

28、： p text-align: left;text-indent: 24px;。3.5幾種款式表的優(yōu)先級上面的兩個款式表的層疊比較好理解，兩個款式表分別定義了一個標簽的不同屬性。但是假設外部款式表與內部款式表同時定義了一個屬性呢？看下面的例子。外部款式表的內容：p text-align: center; 內部款式表的內容：p text-align: left; 最終頁面中的段落將是左對齊，也就是說假設你試圖對同一標簽的同一屬性屢次定義，那么內部款式表的定義將要覆蓋外部款式表的定義。這是因為內部款式表的優(yōu)先級高于外部款式表。三種款式表的優(yōu)先級由高到低排列如下：1. 行內款式表內嵌款式表 2. 內

29、部款式表 3. 外部款式表 4. 補充規(guī)那么：優(yōu)先級一樣的情況下，后定義的屬性會覆蓋先前定義的。 5. 其他高級規(guī)那么：CSS中的important!是比較實用的技巧，這里就不多說了。將在后續(xù)的CSS技巧中討論。 4、文字屬性font與文本屬性text4.1 CSS文字屬性font屬性文字是一個網頁的核心部分。CSS可以定義文字的字體、大小和粗細等許多外觀。font屬性在CSS中的使用頻率是相當高的。下面我們就來看看font屬性都可以做什么。4.1.1.定義字體font-family<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Stric

30、t/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=" :/ /1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta -equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css&

31、quot;> <!- p.song font-family: "宋體" p.hei font-family: "黑體" p.eng font-family: Arial; -> </style> </head> <body> <p class="song">我的字體是宋體</p> <p class="hei">我的字體是黑體</p> <p class="eng">My font fa

32、mily is Arial.</p> </body> </html> 上面的網頁分別為三個段落定義了三種不同的字體。請注意中文的字體要使用引號，而英文字體那么不需要。而且在實際應用中你可能遇到這樣的問題：網站閱讀者的電腦并沒有你設置的字體。為了防止這種情況我們可以定義備用字體，方法如下：p font-family: "黑體", "宋體", "新宋體" 這樣，當客戶的計算機中不存在黑體的時候，它就會以后面的備用字體顯示文字。4.1.2.定義文字大小font-size p.f12 font-size:

33、12px; p.f16 font-size: 16px; p.f20 font-size: 20px; <p class="f12">我12像素</p> <p class="f16"><span class="16">我16像素</span></p> <p class="f20"><span class="20">我20像素</span></p> 注意不要忘記寫上大小的單位，我

34、們這里使用了像素px。通常中文網站的文字都定義為12px大，使用像素定義字體大小有明顯的優(yōu)點：準確，方便；不過使用像素定義字體大小也有一個缺陷：用IE閱讀器無法調整"字體大小"選項。4.1.3.定義文字款式font-style p.ita font-style: italic; <p>我是正?？钍?lt;/p> <p class="ita">我是斜體</p> 4.1.4.定義文字粗細font-weigh p.b font-weight: bold; <p>我是正常的字體。</p> <

35、p class="b">我是粗體</p> 4.2文本屬性text文本屬性主要用于控制頁面內文本的屬性，例如顏色、間距和首行縮進等等合理的應用CSS文本屬性不只可以改變你頁面文本的風格，還可以在一定程度上幫你省去不必要的勞動。比方你試圖為每一個段落的首行打兩個空格，在CSS中你只需要一小段代碼就可以讓你站點之內所有的段落都自動縮進兩個字符。我們就以首行縮進開場介紹一些常用的文本屬性。4.2.1.首行縮進text-indentp text-indent: 24px; 參加上面CSS語句的頁面，所有的段落首行都將自動縮進24個像素。4.2.2.文本顏色color

36、 p.lv color: green; p.hong color: red; <p class="lv">我是綠色的</p><p class="hong">我是紅色的</p> 4.2.3.文本對齊屬性text-alignp.zhong text-align: center; p.zuo text-align: left; p.you text-align: right;<p class="zhong">我的對齊方式是居中</p><p class="

37、zuo"><span class="lv">我的對齊方式是左對齊</span></p><p class="you"><span class="lv">我的對齊方式是右對齊</span></p> 4.2.4.文本修飾text-decorationp.shang text-decoration: overline; p.xia text-decoration: underline; p.zhong text-decoration: line

38、-through;a.none text-decoration:none; <p class="shang">上劃線</p><p class="xia">下劃線</p><p class="zhong">中劃線</p><p ><a href=" :/ cainiao8 /" class="none">我是一個鏈接，但是沒有下劃線。</a></p>以上四個CSS文本屬性在實際的網頁

39、設計過程中都是非常常用的。當然了，它們不是全部的文本屬性。還有有一些并不常用的文本屬性和一些只涉及英文網頁的CSS文本屬性例如大小寫，可以參閱一下文本屬性的詳細列表：5、背景屬性background背景屬性background看起來似乎不如文字和文本等屬性重要，但事實上它往往決定了網站的整體風格。回想一下你最喜歡的網站？你知道它們的首頁標題字號嗎？也許不。那么試著回憶起一些關于網站外觀的東西。怎么樣，是不是還記得它們的背景顏色？事實上，假設你有一個比較有名氣的網站。然后假設你更改了它的背景顏色，那么馬上會有人認為你的網站改版了。我想這足以說明背景的重要性。下面我們就介紹一些常用的CSS背景屬性

40、。5.1.背景顏色屬性background-color<style type="text/css"> body background-color:red ;</style> 5.2.背景圖片background-image<style type="text/css"> body background-image:urlimages/logo.gif;</style> 正如你所看到的，默認情況下背景圖片將會不斷重復，直到添滿整個頁面，下面我們來看看如何控制圖片的重復。5.3.背景圖片的重復設置backgrou

41、nd-repeat不重復；<style type="text/css"> body background-image:url :/ cainiao8 /images/logo.gif; background-repeat:no-repeat; </style> 只在程度方向重復；<style type="text/css"> body background-image:url :/ cainiao8 /images/logo.gif; background-repeat:repeat-x;</style>

42、只在垂直方向重復。<style type="text/css"> body background-image:url :/ cainiao8 /images/logo.gif; background-repeat:repeat-y;</style>5.4.背景圖片位置background-position除了設置背景圖片的重復屬性之外，我們還可以控制背景圖片出現的位置。<style type="text/css"> body background-image:url :/ cainiao8 /images/logo.g

43、if; background-position:center; background-repeat:no-repeat;</style> 背景圖片出現的位置可以是：top、left、right、bottom、center。5.5.將背景圖片固定在頁面的某個位置background-attachment通過該屬性可以設置背景圖片是否隨著滾動條滾動而改變位置。<style type="text/css"> body background-image:url :/ cainiao8 /images/logo.gif; background-attachme

44、nt:fixed; background-repeat:no-repeat </style>background-attachment屬性值有：fixed固定、Scroll滾動。以上只是做為實例的網頁，在實際的網頁設計過程中，還要注意網頁的背景顏色與文字顏色配合得是否合理等等細節(jié)問題。6、列表list假設您使用過Word，那您一定知道Word中有一個“工程符號和編號的功能。在XHTML中我們無法對列表工程符號做出更改，而CSS賦予了我們這樣的才能。因為在CSS中，已經提供了進展列表的專用列表屬性。列表屬性包括了“l(fā)ist-style列表款式、“l(fā)ist-item列表項等多種屬性，我

45、們先來看一下列表屬性的詳細列表：下面我們來看一個列表屬性的例子，代碼如下所示：<html><head> <title> fenji css </title> <style type=“text/css>/*定義CSS*/ <!-pdisplay：block；white-space：normal /*定義顯示屬性為“block，意思是在新的區(qū)域里顯示； white-space的屬性normal使多重空白合成為一個*/ emdisplay：inline/*定義EM的顯示屬性為“inline 目的是為了其控制下的文本顯示中不折行*/l

46、idisplay：list-item；list-style：square/*定義li的顯示屬性為“l(fā)ist-item，顯示在列表項中參加一個符號標記， 而list-style屬性值定義為square使列表項前的標記為方塊*/imgdisplay：block /*定義圖片屬性為block使圖片在新的位置翻開*/ -> </style> </head> <body> <p><em>sample</em>text<em>sample</em>text<em>sample</em&g

47、t; text<em>sample</em> text<em>sample</em></p>/*定義一段文本*/<ul>/*定義列表項*/ <li>list-item 1</li> <li>list-item 2</li> <li>list-item 3</li> </ul> <p><img src=“ss01068.jpg width=“280height=“185 alt=“invisible></p>

48、;/*定義一幅圖片*/ </body> </html> 上段代碼的顯示效果如以以下圖：我們看到由于定義了<p>的屬性為Block，所以文本、列表、圖片都在不同的位置上翻開，Inline屬性使文本不折行，list-style-type的屬性值為square使列表項前的符號為方塊；假設我們在上面的代碼中做一些改動，那么將以另一種效果顯示，我們在<head>中把“EM的display屬性值改為block，使其都在新的位置翻開；li的“l(fā)ist-style屬性值改為“Upper-roman大寫羅馬符號，img的“display屬性值改為“none讓圖片不

49、顯示。 修改后的顯示效果如以以下圖：我們看到列表屬性也能到達排版的部分功能，幾處代碼的改動就可以使頁面發(fā)生很大的變化。自己來試一試其他的效果吧！7、div和spandiv和span是XHTML中比較特殊的標簽。結合CSS他們可以實現許多方便的功能。7.1 div和span是什么意思?相對與其他XHTML標簽，div和span對于它們包含的元素是沒有意義的。例如當你看到<h1></h1>標簽，你知道里面是標題，當你看到<p></p>標簽的時候你知道里面是一個新的自然段。可是div和span標簽并沒有這樣的意義。div只是一個分塊的標簽，他可以將網頁

50、分成幾個區(qū)塊。div里面可能包含一個標題，一個段落，也可能包含圖片在內的很多元素，甚至div也可以再包含div。而span是行級元素行內標簽，通常情況下它都用來定義一小段文字的款式。它們的另一個區(qū)別就是div會造成換行，而span那么不會。下面我們就來看看div和span的應用實例。7.2塊級標簽<div>源代碼如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" " :/ /TR/xhtml1/DTD/xhtml1-strict.dtd"> <html

51、 xmlns=" :/ /1999/xhtml"> <head> <title>我真慘!被用來演示CSS!</title> <meta -equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-.box background-color: #EEFAFF; width: 30%; float: left; .boxh

52、ead font-size: 14px; font-weight: bold; background-color: #AEC6FD; text-align: center; width: 100%; color: #FFFFFF; -> </style> </head> <body><div class="box"><div class="boxhead">我在div內，類為boxhead</div><p>我在div內</p><p>我在div

53、內</p><p>我在div內</p><p>我在div內</p></div></body> </html> 在上面的例子中，我們首先在頁面內放了一個class為box的div，而在它的內部又放了一個class為boxhead的div。為了便與觀察，我們?yōu)閐iv添加了背景顏色。下面我們來看看對這兩個div定義的前面教程中沒有的屬性：對box的屬性：width: 30%;表示這個box div占頁面寬度的30%，而浮動屬性float: left; 那么表示box div浮動在頁面的左側。 對boxhead

54、的屬性：width: 100%;由于boxhead div在box div之內，那么這里的100%是指box的寬度。 7.3行級標簽<span>行內標簽本實例在上面實例的根底之上，只修改一段文本的顏色。修改如下代碼：將第一個“<p>我在div內</p>修改為<p><span style="color:red">我在div內，也在span內，</span>屬性為box。</p> 以上只是關于div和span的簡單介紹，而實際應用中div和span的用法是非常靈敏的。8、盒子boxCSS盒子CS

55、S box又稱為CSS盒形式，是CSS非常重要的一部分。尤其在網頁的布局中更是必不可少的。首先要清楚，CSS中沒有box這個屬性。CSS的盒子box是由以下幾個部分組成的：內容content、填充padding、邊框border和邊界margin。盒子的內容當然是必須有的，而填充、邊框和邊界都是可選的。假設把CSS的盒子看做現實生活中的盒子，那么內容就是盒子里裝的貨物；而填充就是怕貨物損壞而添加的泡沫或者其它抗震的東西；邊框就是盒子本身了；至于邊界那么說明盒子擺放的時候的不能與其他物體緊挨在一起，而必須有一段空隙。當然了，CSS中的盒子是平面的。下面我們來一個一個地介紹組成盒子的幾個屬性。8.

56、1 CSS邊框border本節(jié)的實例均在上一節(jié)的例子根底上修改。首先我們來為上一節(jié)的box div添加邊框。 代碼修改如下： .box background-color: #EEFAFF; width: 30%; float: left; border: 1px solid #000000; 查看修改后的頁面，可以看到box的外邊多了一條1像素寬的黑色實線邊框。在border: 1px solid #000000;一句中，我們一起為border指定了三個屬性值，其實它等效與下面的CSS語句：border-style:solid;border-color:#000000;border-width

57、:1px; 其實CSS中還有一些屬性支持這樣的寫法，比方之前學過的font。但是這里暫不介紹。下面讓我們來看看如何控制某一側的邊框屬性。我們?yōu)閎oxhead div添加一個1像素的虛線下側邊框。修改的代碼如下：.boxhead font-size: 14px;font-weight: bold;background-color: #AEC6FD;border-bottom:1px dashed #000000;text-align: center;width: 100%;color: #FFFFFF;上面的例子只用到了兩種邊框，下面來看看其它幾種款式的邊框。<p style="

58、border:dotted">&nbsp;</p><p style="border:double"></p><p style="border:groove"></p><p style="border:inset"></p><p style="border:outset"></p><p style="border:ridge"></p>邊框屬性

59、列表：8.2 CSS填充屬性padding填充屬性定義的是內容content與邊框border的間隔 ，下面我們來為boxhead div添加一個5像素的填充。 .boxhead font-size: 14px; font-weight: bold; background-color: #AEC6FD; border-bottom:1px dashed #000000; text-align: center; width: 100%; color: #FFFFFF; padding:5px; 看看修改之后的頁面，是不是boxhead div中的內容間隔 邊框有了一段間隔 ？與邊框屬性borde

60、r一樣，填充屬性padding也可以只設定某一邊。例如：padding-left、padding-bottom。填充距的屬性列表：8.3 CSS邊界屬性marging為了更好的理解邊界marging屬性，我們如今試著為網頁多添加幾個box，也就是復制幾個<div class="box"> </div>內容，然后再看看網頁的外觀。你會發(fā)現box都連在了一起，也許你不喜歡這樣的布局。那么我們就為他們設置邊界屬性吧，需要修改的代碼如下：.box background-color: #EEFAFF; width: 30%; float: left; bord

61、er: 1px solid #000000; margin:5px; 修改之后的頁面所有的box之間都有了5個像素的間隔，這就是邊界屬性的作用。當然了，邊界屬性與其他兩個構成盒子的屬性一樣都可以單獨定義某一個方向。邊距屬性的詳細列表： 至此，我們已經理解了構成盒子的幾個元素。不過想要完全的掌握盒子的還需要不斷的理論，尤其是想要完全用盒子來取代table定位的朋友更是要花一定的時間在理論練習上。9、定位positonCSS定位在網頁布局中是起著決定性作用。CSS的定位功能是很強大的，利用它你可以做出各種各樣的網頁布局。本節(jié)就介紹一些CSS常用的定位語句。9.1.相對定位relative相對定位是指相對它本來應該處的位置所做的挪動。 <style type="text/css">.dingwei position:relative; left:50px; </style> <p>我是一段正常的文本</p> <p class="dingwei">我本來應該在它的正下方，可是relative相對定位讓我在正常位置的根底上向右挪動了50個像素。</p> 9.2.絕對定位absolute絕對定位非常好理解，你指定元素出現的坐標x,y，然后它

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論