《Dreamweaver CS6網(wǎng)頁(yè)設(shè)計(jì)與制作》第4章css基礎(chǔ)知識(shí) 劉敏娜 主編

1、 css基本語(yǔ)法 css設(shè)置圖片格式 css設(shè)置網(wǎng)頁(yè)中的背景 css設(shè)置表格與表單的樣式 css設(shè)置頁(yè)面和瀏覽器的元素 用css制作實(shí)用的菜單 css（cascading style sheet），中文名為層疊樣式表，用于控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)志性語(yǔ)言。 引入它是為了使html語(yǔ)言能夠更好的適應(yīng)頁(yè)面的美工設(shè)計(jì)。 css文件是純文本文件。 使用文字處理軟件均可編輯。推薦dreamweaver軟件。 行內(nèi)樣式 內(nèi)嵌式 鏈接式 導(dǎo)入式 所有樣式中最直接的一種，它直接對(duì)html的標(biāo)記使用style屬性，然后將css代碼直接寫(xiě)在其中。 如：正文內(nèi)容 行內(nèi)樣式是最為簡(jiǎn)單的css

2、使用方法，但后期維護(hù)不容易，不推薦使用。 將css寫(xiě)在之間，并且用標(biāo)記聲明。 如： 鏈接式css樣式表是使用頻率最高的樣式。 如： 與鏈接式功能相似，只是語(yǔ)法和運(yùn)作方式不同。 采用import方式導(dǎo)入的樣式表，在html文件初始化時(shí)，會(huì)被導(dǎo)入到html文件內(nèi)，作為文件的一部分，類似內(nèi)嵌式的效果。而鏈接式樣式表則是在html標(biāo)記需要格式時(shí)才以鏈接形式引入。 語(yǔ)法： 選擇器屬性值css標(biāo)記選擇器是聲明哪些html標(biāo)記采用哪種css樣式。class選擇器選擇器 class選擇器選擇器1class選擇器選擇器2class選擇器選擇器3h3同樣適用同樣適用 可以在標(biāo)記聲明后接類別名稱沒(méi)來(lái)區(qū)別標(biāo)記。 標(biāo)記

3、選擇器.class 標(biāo)記選擇器.class1標(biāo)記選擇器.class3使用于別的標(biāo)記 使用方法與class選擇器基本相同，不同在于ID選擇器只能在html頁(yè)面中使用一次。 #one color:red; . ID選擇器 ID選擇器1ID選擇器2 Css文字樣式 首字放大效果 圖片樣式 圖片的對(duì)齊 圖文混排 圖文實(shí)例 圖片邊框 (border-color,border-sytle,border-width) 圖片縮放：width與height實(shí)現(xiàn) 圖片對(duì)齊： 橫向?qū)R：分左中右，text-align:left 縱向?qū)R：主要體現(xiàn)在與文字搭配的情況。Vertical-align:middle 文字環(huán)

4、繞：float:left 設(shè)置圖片與文字間距：為img標(biāo)記添加margin 屬性 如 margin-right，margin-bottom 背景顏色:background-color 背景圖片:background-img:url( ) 重復(fù)：background-repeat:repeat-y; 位置：background-position:bottom right 固定背景圖片：background-attachment:fixed 控制表格 css與表單 表格的顏色 文字顏色：color 背景顏色：background 表格的邊框 border:1px solid #007eff; bo

5、rder-collapse:collapse; 實(shí)例一：隔行變色（為偶數(shù)行進(jìn)行格式設(shè)置） 實(shí)例二：鼠標(biāo)經(jīng)過(guò)時(shí)變色（用javascript讀取鼠標(biāo)的狀態(tài)） 實(shí)例三：日歷 表單中的標(biāo)記：form,input,textarea,select等。 可以為表單標(biāo)記設(shè)置格式，如邊框、背景色、寬度和高度等。 直接輸入的Excel表格 模仿新浪網(wǎng)民調(diào)查問(wèn)卷 鼠標(biāo)特效 頁(yè)面滾動(dòng)條 通過(guò)cursor屬性來(lái)設(shè)置各種各樣的鼠標(biāo)指針。 這個(gè)屬性可以在任何標(biāo)記中使用。 常見(jiàn)的屬性值：auto、default、no-drop。 如：bodycursor:pointer; 滾動(dòng)條由3dlight, highlight, fa

6、ce, arrow, shadow, darkshadow等組成 例子： 項(xiàng)目列表 實(shí)例 項(xiàng)目列表的編號(hào)是通過(guò)屬性list-style-type來(lái)修改，無(wú)論是在標(biāo)記還是標(biāo)記中都可以。 ullist-style-type:decimal; 可用的屬性值：disc,circle,square,upper-alpha Css還提供了屬性list-style-image，可以將項(xiàng)目符號(hào)顯示為任意的圖片。 如下例 設(shè)置list-style-type為none的效果（無(wú)項(xiàng)目符號(hào)） display屬性：display:block; li標(biāo)記的float屬性：float:left(水平顯示各個(gè)項(xiàng)目) 百度導(dǎo)航

7、條 流行的Tab菜單 div標(biāo)記與span標(biāo)記 盒子模型 元素的定位 div（division）是一個(gè)區(qū)塊容器標(biāo)記，可以容納段落、標(biāo)題、表格等網(wǎng)頁(yè)元素。可以把中的內(nèi)容看作一個(gè)獨(dú)立的對(duì)象，用于css的控制。 span標(biāo)記也是作為網(wǎng)頁(yè)中的容器。 區(qū)別：span是一個(gè)行內(nèi)元素，在它的前后不會(huì)換行。 Span標(biāo)記可以包括在div標(biāo)記中，反之不成立。 所有頁(yè)面中的元素都可以看成是一個(gè)盒子，占據(jù)著一定的頁(yè)面空間。 可以通過(guò)調(diào)整盒子的邊框和距離等參數(shù)來(lái)調(diào)節(jié)盒子的位置。 一個(gè)盒子模型由content（內(nèi)容）,border（邊框）,padding（間隙）,margin（間隔）4個(gè)部分構(gòu)成。 盒子的實(shí)際寬度是由：

8、content+padding+border+margin構(gòu)成。在css中width和height是指width+padding。content border一般用于分離元素，border的外圍是元素的最外圍，因此在計(jì)算元素實(shí)際的高度和寬時(shí)要將bordre計(jì)算入內(nèi)。 border的屬性：color,width,style style可取值：none,hidden,dotted,dashed,solid,double,insert等。例子： padding用于控制content與border之間的距離。 可以設(shè)置4個(gè)方向上的值 也可以合并為一個(gè)語(yǔ)句,方向?yàn)閺纳戏介_(kāi)始順時(shí)針。 用于表示元素之間的距

9、離。 如果是行內(nèi)元素緊鄰時(shí)，之間的距離是第一個(gè)元素的margin-right+第二個(gè)元素的margin-left 如果不是行內(nèi)元素：則取margin-bottom和margin-top兩個(gè)中的大者 Float定位 Position定位 實(shí)例 可以設(shè)置為left,right或者none。 分別取static,absolute,relative,fixed; 取absolute時(shí)，子塊不屬于父塊，左邊框相對(duì)于body左邊的距離，四個(gè)邊上的值可以為絕對(duì)的像素，也可以為百分?jǐn)?shù). 當(dāng)值取relative時(shí)，子塊是相對(duì)于父塊定位。 例子 Css排版觀念 固定寬度且居中的版式 左中右版式 將頁(yè)面首先在整體上

10、進(jìn)行標(biāo)記的分塊，然后對(duì)各個(gè)塊進(jìn)行css定位，最后再在各個(gè)塊中添加相應(yīng)的內(nèi)容。 通過(guò)css排版的頁(yè)面，維護(hù)更新非常容易。 要求設(shè)計(jì)者先對(duì)頁(yè)面有一個(gè)整體的框架規(guī)劃，包括整個(gè)頁(yè)面分為哪些模塊、各個(gè)模塊之間的父子關(guān)系。 以最簡(jiǎn)單的框架為例，頁(yè)面由Banner、主體內(nèi)容、菜單導(dǎo)航和版權(quán)所有組成，各個(gè)部分分別由自己的id來(lái)標(biāo)識(shí).#container#banner#content#links#footer頁(yè)面中每一個(gè)色塊都是一個(gè)div，直接用css的id表示方法來(lái)表示各個(gè)塊,對(duì)于每個(gè)div還可以加入各種塊元素或者行內(nèi)元素。例#content.blog.date.blogcontent.page.update

11、 當(dāng)頁(yè)面的內(nèi)容確定以后，則需要根據(jù)內(nèi)容本身考慮整體的頁(yè)面版型，如單欄、雙欄或左中右等。#container#banner#content#links#footer首先對(duì)body標(biāo)記和#container父塊進(jìn)行設(shè)置：body margin:0px; font-size:13px; font-family:Arial;#container position:relative; width:100%; 以上設(shè)置了頁(yè)面文字的字號(hào)、字體，以及父塊的寬度，讓其撐滿整個(gè)瀏覽器。接下來(lái)設(shè)置#banner塊：#banner height:80px; border:1px solid #000000; text

12、-align:center; background-color:#a2d9ff; padding:10px; margin-bottom:2px;#contentfloat:left;#linksfloat:right;width:200px;text-align:center;#container#banner#content#footer#links#container#linksfloat:right;width:200px;border:1px solid #000000;margin-left:-200px;text-align:center;#container#content#f

13、ooter#links#banner#contentfloat:left;text-align:center;padding-right:200px; #footerclear:both;height:30px;border:1px solid #000000;text-align:center; 頁(yè)面部分：頁(yè)面具體內(nèi)容body,htmlmargin:0px;text-aligh:center;#containerposition:relative;margin:0px auto;width:700px;text-aligh:left;background:url(bg.jpg) repeate-y;exbody,htmlmargin:0px;#containerposition:relative;left:50%;width:700px;margin-left:-350px;例例 11-3#left#middle#rightleft正文內(nèi)容正文內(nèi)容right設(shè)置標(biāo)記的樣式bodymargin:0px;padding:0px;font-family:arial;color:#060;background-color:#ccc;#leftposition:absolute;top:0px;l