CSS+DIV課程筆記_第1頁
CSS+DIV課程筆記_第2頁
CSS+DIV課程筆記_第3頁
CSS+DIV課程筆記_第4頁
CSS+DIV課程筆記_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

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

2、、網(wǎng)頁加載速度快2、更容易被搜索引擎接受3、能實現(xiàn)更多動態(tài)效果4、后期維護方便四、傳統(tǒng)html的缺點：（1）維護困難（2）標記不足（3）網(wǎng)頁過“胖”（4）定位困難1-2、1-3、1-4、CSS樣式的使用方法一、CSS樣式的使用方法:1、行內(nèi)樣式：直接在html標記中使用style=”來設(shè)置屬性，也就是直接將css代碼嵌套在html標注中，像使用html標記一樣使用。2、內(nèi)嵌式：只對本頁面起作用。加在<head></head>之間<title></title>代碼下面，格式：<style type=”text/css”><!- /

3、防止低版本的瀏覽器不支持會直接將CSS顯示出來。加這上這個相當于html的注釋，如果顯示就直接注釋掉。 -></style>3、鏈接式：引入外部一個css文件，加在<head></head>標簽之間<title></title>下面如：<link href=”1.css” type=”text/css” rel=”stylesheet”>1-5、CSS樣式的定義方法一、CSS樣式的定義方法：1、自定義樣式（類別選擇器）2、標記定義（標記選擇器）3、#號定義法（ID選擇器）（1）自定義樣式方法：.自定義名稱font-s

4、ize:12px;color:#FF0000;使用方法：<p class=”自定義名稱”;> 效果 </p>（2）標記定義方法：pfont-size:12px;color:#FF0000;注：通過標記定義好的CSS樣式效果會自動應(yīng)用給網(wǎng)頁中所有使用此標記的元素或?qū)ο?。?）#號定義的方法：#自定義名稱font-size:12px;color:#FF0000;使用方法：<p id=” 自定義名稱”;> 效果 </p>注：通過#號定義的CSS樣式，在html代碼中最好只使用一次，因為我們有的時候需要使用javascript腳本對應(yīng)用此類CSS樣式的對

5、象進行控制，如果應(yīng)用多次的話，javascript不知道該對哪個對象進行控制。1-8、1-9、CSS樣式的集體定義方法一、集體定義所謂集體定義是在多個標記使用同一個CSS效果，這時就可以同時對多個標記做一次性定義。（1）集體定義的方法：.自定義名稱，標記，#自定義名稱font-size:12px;color:#FF0000;二、CSS樣式的繼承繼承的原則是由外到內(nèi)，先使用第一個樣式，然后再使用第二個樣式。1-10、CSS樣式定義的嵌套（選擇器的嵌套）一、選擇器的嵌套如：p bcolor:#FF0000;font-size:12px;注：上面這種定義方法表示P標記里面包含的b標記的樣式，也就是說

6、只有當b標記被p標記包含的時候才會使用這個樣式，沒有被p標記包含b標記不會調(diào)用這個樣式，同時p標記也不會使用這個樣式。2-1、文字樣式的設(shè)置一、文字樣式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:黑體，幼圓;表示采用黑體，如果系統(tǒng)沒有黑體就

7、采用幼圓，如果沒有幼圓那么就采用瀏覽器默認字體。2-2、文字大小和顏色一、文字大?。ㄗ痔枺╢ont-size）1、文字大小的單位：in：英寸，cm：厘米，mm：毫米，px：象素。2、font-size在設(shè)置文字大小時分為絕對大小和相對大小。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-de

8、coration：加下劃線、頂劃線，刪除線（1）overline：上劃線（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、水平方向?qū)R：text-align（1）left：左對齊（2）center：水平居中（3）right：右對齊

9、2、垂直方向?qū)R：vertical-align（1）top：頂對齊（2）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注：寬度和高度可以設(shè)置絕對大小和相對大小。3-4

10、、圖片的對齊一、圖片的對齊1、水平方向?qū)R：text-align（1）left：左（2）right：右（3）center：水平居中2、垂直方向?qū)R：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-botto

11、m：下間距4-1、網(wǎng)頁背景顏色的設(shè)置一、網(wǎng)頁背景顏色1、background-color:背景顏色4-2、4-3、網(wǎng)頁背景圖片1、background-image:背景圖片2、background-repeat:背景圖片是否重復(fù)3、background-position:背景圖片的位置4、background-attachment:背圖圖片是否固定注：1、網(wǎng)頁背景顏色和背景圖片可以同時設(shè)置嗎？2、如果讓背顏色和背景圖片同時顯示？4-4、網(wǎng)頁背景的綜合設(shè)置background5-1、表格中的標記1、表格中的標記table：表格tr：行td：單元格caption：表格的總標題th：表格的行列標題5

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

13、:hover ：鼠標移上去。4、.a1:active：點下去。6-4、6-5、按鈕式超鏈接的制作1-21、padding：內(nèi)容和邊框的距離。2、margin：邊框外的距離。6-6、按鈕式超鏈接的制作31、padding：內(nèi)容和邊框的距離。注：距離順序為上、右、下、左。6-7、浮雕式超鏈接效果的制作16-8、浮雕式超鏈接效果的制作26-9、不同鼠標形狀的超鏈接1、cursor：鼠標形狀（1）help：幫助形狀（2）move：移動形狀（3）wait：等待形狀（4）hand：手的形狀。7-1、項目列表1項目列表是用于對數(shù)據(jù)按邏輯方式進行分組，常用的列表有兩種：1、無序列表<ul>

14、;</ul>2、有序列表<ol></ol>無序列表：指各條列之間無順序關(guān)系，只是利用條列方法呈現(xiàn)資料而已。無序列表中的每個值用：<li></li>circle：空心圓disc：實心圓（默認）square：方形有序列表：指條列之間是有順序的，從1，2，3，.直延伸下去。列表中的每一項值用:<li></li>decimal、表示1，2，3，4，.順序upper-alpha：表示A、B、C、順序lower-alpha：表示a、b、c、順序upper-roman：羅馬（大寫）lower-roman：羅馬（小寫）list

15、-style-type：項目列表的類型注：使用CSS控制項目列表，有序列表和無序列表沒有本質(zhì)的區(qū)別。7-2、項目列表21、不同類型符號的定義2、list-style-image：圖片符號7-3、定義塊元素1、display:block：定義為塊元素注：當超鏈接被定義為塊元素后，鼠標進入該塊的任何區(qū)域都會被激活。7-4、7-5、縱向菜單效果的制作1-21、list-style-type：none不設(shè)置項目符號7-6、橫向菜單效果的制作1、float：left：左對齊排列7-7、什么是DIV一、什么是DIVDIV是層的標記，在DIV中可以放入網(wǎng)頁中任何一種元素（如：文字、圖片、），,然后配合CSS

16、，可以實現(xiàn)網(wǎng)頁各個元素的精確定位。7-8、Tab菜單效果的制作17-9、Tab菜單效果的制作27-10、Tab菜單效果的制作37-11、Tab菜單效果的制作47-12、Tab菜單效果的制作58-1、詳細講解DIV標記一、詳細講解DIV標記1、默認每個DIV單獨占滿整行8-2、span標記一、span標記1、每個span標記不是單獨占一行注：div標記一般用于大區(qū)塊，span標記一般用于小區(qū)塊。8-3、盒子模型一、盒子模型（矩形區(qū)域）1、border：邊框2、padding：內(nèi)邊距3、margin：外邊距注：在利用CSS給對象設(shè)置屬性時，任何一個對象都可以看成盒子模型。8-4、盒子模型大小的計算

17、方法一、盒子模型（矩形區(qū)域）1、width，height：寬度和高度指的是內(nèi)容區(qū)域的大小。盒子大?。簩挾龋簑idth+padding+border+margin高度：height+padding+border+margin8-5、盒子模型中各參數(shù)的設(shè)置一、盒子模型（矩形區(qū)域）1、border：邊框2、padding：內(nèi)邊距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對網(wǎng)頁進行分塊一、網(wǎng)頁布局分類（1）“同”字式（2）“廠”字式或反“廠”字式二

溫馨提示

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

評論

0/150

提交評論