1、睿思科技網站建設CSS+DIV課程筆記1-1、什么是CSS和DIV一、什么是CSSCSS的全稱是：Cascading Style Sheet（層疊樣式表），利用它可以對頁面當中的文本、段落、圖像、頁面背景、表單元素外觀等實現更加精確的控制，甚至瀏覽器滾動條等瀏覽器的一些屬性都可以通過它來調整。更為重要的是，CSS真正實現了網頁內容和格式定義的分離，通過修改CSS樣式表文件就可以修改整個站點文件的風格，大大減小了更新站點的工作量。二、什么是DIVDIV是層的標記，在DIV中可以放入網頁中任何一種元素（如：文字、圖片、），,然后配合CSS，可以實現網頁各個元素的精確定位。三、CSS+DIV的優勢1

2、、網頁加載速度快2、更容易被搜索引擎接受3、能實現更多動態效果4、后期維護方便四、傳統html的缺點：（1）維護困難（2）標記不足（3）網頁過“胖”（4）定位困難1-2、1-3、1-4、CSS樣式的使用方法一、CSS樣式的使用方法:1、行內樣式：直接在html標記中使用style=”來設置屬性，也就是直接將css代碼嵌套在html標注中，像使用html標記一樣使用。2、內嵌式：只對本頁面起作用。加在之間代碼下面，格式：3、鏈接式：引入外部一個css文件，加在標簽之間下面如：1-5、CSS樣式的定義方法一、CSS樣式的定義方法：1、自定義樣式（類別選擇器）2、標記定義（標記選擇器）3、#號定義法

3、（ID選擇器）（1）自定義樣式方法：.自定義名稱font-size:12px;color:#FF0000;使用方法： 效果 （2）標記定義方法：pfont-size:12px;color:#FF0000;注：通過標記定義好的CSS樣式效果會自動應用給網頁中所有使用此標記的元素或對象。（3）#號定義的方法：#自定義名稱font-size:12px;color:#FF0000;使用方法： 效果 注：通過#號定義的CSS樣式，在html代碼中最好只使用一次，因為我們有的時候需要使用javascript腳本對應用此類CSS樣式的對象進行控制，如果應用多次的話，javascript不知道該對哪個對象進行

4、控制。1-8、1-9、CSS樣式的集體定義方法一、集體定義所謂集體定義是在多個標記使用同一個CSS效果，這時就可以同時對多個標記做一次性定義。（1）集體定義的方法：.自定義名稱，標記，#自定義名稱font-size:12px;color:#FF0000;二、CSS樣式的繼承繼承的原則是由外到內，先使用第一個樣式，然后再使用第二個樣式。1-10、CSS樣式定義的嵌套（選擇器的嵌套）一、選擇器的嵌套如：p bcolor:#FF0000;font-size:12px;注：上面這種定義方法表示P標記里面包含的b標記的樣式，也就是說只有當b標記被p標記包含的時候才會使用這個樣式，沒有被p標記包含b標記不

5、會調用這個樣式，同時p標記也不會使用這個樣式。2-1、文字樣式的設置一、文字樣式1、font-family：字體2、font-size：文字大小3、color：顏色4、font-weight：文字粗細5、font-style：斜體6、text-decoration：加下劃線、頂劃線，刪除線7、text-transform：英文字母大小寫8、text-indent：首行文本縮進9、letter-spacing：字間距二、字體（font-family）1、H2Font-family:黑體，幼圓;表示采用黑體，如果系統沒有黑體就采用幼圓，如果沒有幼圓那么就采用瀏覽器默認字體。2-2、文字大小和顏色一

6、、文字大小（字號）（font-size）1、文字大小的單位：in：英寸，cm：厘米，mm：毫米，px：象素。2、font-size在設置文字大小時分為絕對大小和相對大小。14px像這樣表示絕對大小，large 像這種表示相對大小。二、color：顏色1、顏色的表示方法（1）單詞：red、green、blue（2）RGB：RGB（255,255,255）（3）十六進制：#FFFFFF2-3、2-4、文字粗細、斜體和劃線1、font-weight：文字粗細2、font-style：斜體（1）italic：斜體3、text-decoration：加下劃線、頂劃線，刪除線（1）overline：上劃線

7、（2）underline：下劃線（3）line-through：刪除線4、text-transform：英文字母大小寫（1）capitalize：單詞開頭大寫（2）lowercase：全部小寫（3）uppercase：全部大寫5、text-indent：首行文本縮進6、letter-spacing：字間距2-5、練習一、定義CSS的原則相同屬性定義在一起，不同屬性分別定義。2-6、2-7、文字的對齊一、文字的對齊1、水平方向對齊：text-align（1）left：左對齊（2）center：水平居中（3）right：右對齊2、垂直方向對齊：vertical-align（1）top：頂對齊（2）

8、middle：垂直居中（3）bottom：底對齊二、行間距和字間距1、行間距：line-height2、字間距：letter-spacing2-8、首字放大一、首字放大1、float：left2、float：right3-1、3-2、圖片的邊框效果1-2一、圖片的邊框效果邊框：border線型：style（solid：實線，dashed：虛線， dotted：點劃線）顏色：color寬度：width3-3、圖片的大小與縮放一、圖片的大小與縮放寬度：width高度：height注：寬度和高度可以設置絕對大小和相對大小。3-4、圖片的對齊一、圖片的對齊1、水平方向對齊：text-align（1）l

9、eft：左（2）right：右（3）center：水平居中2、垂直方向對齊：vertical-align（1）top：頂對齊（2）middle：垂直居中（3）bottom：底對齊3-5、圖文混排效果一、圖文混排1、float：left（將圖片單獨分離出來放在左邊。）2、float：right（將圖片單獨分離出來放在右邊。）3-6、圖片與文字的間距一、圖片與文字的間距1、margin：間距（1）margin-left：左間距（2）margin-right：右間距（3）margin-top：上間距（4）margin-bottom：下間距4-1、網頁背景顏色的設置一、網頁背景顏色1、backgrou

10、nd-color:背景顏色4-2、4-3、網頁背景圖片1、background-image:背景圖片2、background-repeat:背景圖片是否重復3、background-position:背景圖片的位置4、background-attachment:背圖圖片是否固定注：1、網頁背景顏色和背景圖片可以同時設置嗎？2、如果讓背顏色和背景圖片同時顯示？4-4、網頁背景的綜合設置background5-1、表格中的標記1、表格中的標記table：表格tr：行td：單元格caption：表格的總標題th：表格的行列標題5-2、表格顏色的設置5-3、表格的邊框設置11、border-colla

11、pse:collapse：重疊邊框5-4、表格的邊框設置2 5-5、隔行變色表格的制作 5-6、CSS設置表單樣式15-7、CSS設置表單樣式25-8、CSS設置表單樣式36-1、6-2、超鏈接特效1-2一、超鏈接指的是通過點擊一個對象可以鏈接打開另外一個對象（網頁、圖片、程序等）。二、超鏈接的各種狀態1、a:link：默認。2、a:visited：點擊過。3、a:hover：鼠標移上去。4、a:active：點下去。6-3、超鏈接特效31、.a1:link：默認。2、.a1:visited：點擊過。3、.a1:hover：鼠標移上去。4、.a1:active：點下去。6-4、6-5、按鈕式超

12、鏈接的制作1-21、padding：內容和邊框的距離。2、margin：邊框外的距離。6-6、按鈕式超鏈接的制作31、padding：內容和邊框的距離。注：距離順序為上、右、下、左。6-7、浮雕式超鏈接效果的制作16-8、浮雕式超鏈接效果的制作26-9、不同鼠標形狀的超鏈接1、cursor：鼠標形狀（1）help：幫助形狀（2）move：移動形狀（3）wait：等待形狀（4）hand：手的形狀。7-1、項目列表1項目列表是用于對數據按邏輯方式進行分組，常用的列表有兩種：1、無序列表2、有序列表無序列表：指各條列之間無順序關系，只是利用條列方法呈現資料而已。無序列表中的每個值用：circle：空

13、心圓disc：實心圓（默認）square：方形有序列表：指條列之間是有順序的，從1，2，3，.直延伸下去。列表中的每一項值用:decimal、表示1，2，3，4，.順序upper-alpha：表示A、B、C、順序lower-alpha：表示a、b、c、順序upper-roman：羅馬（大寫）lower-roman：羅馬（小寫）list-style-type：項目列表的類型注：使用CSS控制項目列表，有序列表和無序列表沒有本質的區別。7-2、項目列表21、不同類型符號的定義2、list-style-image：圖片符號7-3、定義塊元素1、display:block：定義為塊元素注：當超鏈接被定

14、義為塊元素后，鼠標進入該塊的任何區域都會被激活。7-4、7-5、縱向菜單效果的制作1-21、list-style-type：none不設置項目符號7-6、橫向菜單效果的制作1、float：left：左對齊排列7-7、什么是DIV一、什么是DIVDIV是層的標記，在DIV中可以放入網頁中任何一種元素（如：文字、圖片、），,然后配合CSS，可以實現網頁各個元素的精確定位。7-8、Tab菜單效果的制作17-9、Tab菜單效果的制作27-10、Tab菜單效果的制作37-11、Tab菜單效果的制作47-12、Tab菜單效果的制作58-1、詳細講解DIV標記一、詳細講解DIV標記1、默認每個DIV單獨占滿

15、整行8-2、span標記一、span標記1、每個span標記不是單獨占一行注：div標記一般用于大區塊，span標記一般用于小區塊。8-3、盒子模型一、盒子模型（矩形區域）1、border：邊框2、padding：內邊距3、margin：外邊距注：在利用CSS給對象設置屬性時，任何一個對象都可以看成盒子模型。8-4、盒子模型大小的計算方法一、盒子模型（矩形區域）1、width，height：寬度和高度指的是內容區域的大小。盒子大小：寬度：width+padding+border+margin高度：height+padding+border+margin8-5、盒子模型中各參數的設置一、盒子模型

16、（矩形區域）1、border：邊框2、padding：內邊距3、margin：外邊距8-6、8-7、8-8、8-9元素的定位1-4一、元素的定位1、float：float定位2、position：相對或絕對定位（1）absolute：絕對定位（2）relative：相對定位3、z-index：前后定位8-10、圖片簽名效果8-11、Position定位1、position：相對或絕對定位（1）absolute：絕對定位（2）relative：相對定位（相對父對象即相對原位置）8-12、文字陰影9-1、如何用DIV對網頁進行分塊一、網頁布局分類（1）“同”字式（2）“廠”字式或反“廠”字式二、網頁分塊（1）banner（2）conte