《Dreamweaver CS6網(wǎng)頁設計與制作》第4章css基礎知識 劉敏娜 主編

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

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

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

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

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

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

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

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

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

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

11、 當頁面的內(nèi)容確定以后，則需要根據(jù)內(nèi)容本身考慮整體的頁面版型，如單欄、雙欄或左中右等。#container#banner#content#links#footer首先對body標記和#container父塊進行設置：body margin:0px; font-size:13px; font-family:Arial;#container position:relative; width:100%; 以上設置了頁面文字的字號、字體，以及父塊的寬度，讓其撐滿整個瀏覽器。接下來設置#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; 頁面部分：頁面具體內(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設置標記的樣式bodymargin:0px;padding:0px;font-family:arial;color:#060;background-color:#ccc;#leftposition:absolute;top:0px;l