第二章CSS技術(shù)

1、第二章CSS技術(shù)由于HTML語言將美化和代碼寫在一起不利于后期的維護(hù)，因此使用CSS技術(shù)進(jìn)行美化您的頁面。 一、CSS的簡 CSS即Cascade Style Sheet 級聯(lián)【層疊】樣式表。主要負(fù)責(zé)是頁面的美化，因此該技術(shù)不能脫離頁面進(jìn)行獨(dú)立使用。CSS的注釋/*/ 1、CSS引入的頁面樣式的幾種方式 方式一行內(nèi)樣式 方式 HTML中給所有的標(biāo)記元素提供了一個(gè)style屬性專門用于美化該元素 舉例 我的第一個(gè)頁面 缺點(diǎn)不能復(fù)用， 方式二內(nèi)部樣式 方式 HTML中提供了一個(gè)標(biāo)簽【一般放在標(biāo)簽中】來集中的編寫該頁面的樣式 舉例 h2color:red; 缺點(diǎn)：頁面之間不能復(fù)用 優(yōu)點(diǎn)：將一頁頁面的

2、樣式集中起來便于操作。 方式三外部連接方式 HTML中提供了一個(gè)元素可以引入外部的樣式文件 獨(dú)立的建立一個(gè)后綴為.css的樣式文件 demo1.css 舉例 缺點(diǎn)：效率很低、 優(yōu)點(diǎn)：復(fù)用性很強(qiáng) rel屬性指定的是引入的文件和該文本本身的關(guān)系type屬性指定引入的文件的類型是什么 百度、Google頁面樣式是怎么寫的?【行內(nèi)樣式】 方式四導(dǎo)入引入方式 CSS2.1中提供了一個(gè)獨(dú)立的元素import來引入指定的樣式文件，但是該元素必須寫在標(biāo)簽中 舉例 吧 簡化import url(css/demo1.css) import css/demo1.css 【面試題】： 在引入外部樣式的時(shí)候link和i

3、mport有什么區(qū)別? 共同點(diǎn) 【都可以引入外部的獨(dú)立的樣式文件、實(shí)際使用的時(shí)候都需要HTML標(biāo)簽環(huán)境】 不同點(diǎn) 1. link屬于HTML import屬于CSS2 2. import引入的css文件的個(gè)數(shù)有限制3040 3. 執(zhí)行順序不同 link在頁面加載執(zhí)行到的時(shí)候就直接加載css樣式文件【餓漢式】import頁面元素加載完畢后才加載樣式【懶漢式】4. JavaScript操作樣式的時(shí)候不同 link DOM操作修改樣式 import進(jìn)來的不支持修改 【換膚】 推薦使用link元素進(jìn)行外部的引入. 2、CSS由于多種引入方式帶來的問題以及處理方案? 問題1 優(yōu)先級問題? 行內(nèi)樣式 內(nèi)部

4、樣式 外部樣式【前提是內(nèi)部樣式在外部引入樣式的下面】 提高自己樣式的優(yōu)先級。使用!important 原則：就近原則。 問題3 一個(gè)頁面中可以使用多個(gè)和標(biāo)記引入多個(gè)樣式 3、CSS的樣式的基本語法 3.1. 什么是選擇器? 選擇器的目的是為了更好的找到頁面需要修飾的元素。 3.2. 常見選擇器 元素選擇器 舉例 我的一級標(biāo)題 h1color:red; ID選擇器 舉例 我的div塊元素One #onebackground-color: gray; 類選擇器 舉例 我的段落2 .clazz1color: blue; 交集選擇器 舉例 我的段落中包含了一個(gè)超鏈接:我的超鏈接2 p acolor:

5、red; 并集選擇器 舉例 我的字體我做主我的粗體我做主 font,bborder: 1px solid red; 通用選擇器 舉例 *background-color: gray; 偽類選擇器 a:linkcolor:red; a:visitedcolor:gray; a:hovercolor:blue; 默認(rèn)必須按照這樣的順序出現(xiàn)注意：避免出現(xiàn)id濫用的情況?注意：所有的常見的選擇器都可以進(jìn)行相互恰套。 3.3. 常見的CSS屬性 /* 復(fù)合的背景屬性 */background: url(imgs/img1.ico) center no-repeat;/* 文本縮進(jìn) */text-inde

6、nt: 20px;/* 字體大小和風(fēng)格 */font-size:1.5em;font-weight:bolder;/* 內(nèi)容溢出處理屬性 auto超過顯示滾動條 hidden超過直接隱藏 scroll使得橫向和縱向都滾動*/overflow:scroll;/* 列表的圖標(biāo)屬性 */list-style-type:square;/* 取消超鏈接下面的下劃線 */text-decoration:none;3.4. CSS的三大核心技術(shù)(盒子模型) 3.4.1. 盒子模型HTML頁面中充斥這大量的HTML標(biāo)記元素，瀏覽器廠商在解析每一個(gè)HTML頁面元素的時(shí)候都會按照盒子模型的結(jié)構(gòu)進(jìn)行解析。我的文本-

7、| margin | - | - border| | padding | | | - | | | | | | | | | content | | | | | | | | | - | | | | | - | | |- pandding和margin如果寫兩個(gè)值如padding:1px 5px;表示上下值均為1px左右值均為5px。如果寫四個(gè)值則按順時(shí)針方向賦值。6. 浮動技術(shù)行內(nèi)元素【不能自動換行】和塊級元素【可以自動的換行div】,布局技術(shù)DIV+CSS。6.1 是否有CSS屬性可以在行內(nèi)元素和塊元素之間轉(zhuǎn)換? YES display = block 塊級 | inline 行內(nèi)，但是div元

8、素的高度和寬度是無效的，因此使用div布局的 時(shí)候不能轉(zhuǎn)換div為行內(nèi)元素，需要采用浮動技術(shù)進(jìn)行布局。 display:none; 釋放自己的位置 visibility: hidden; div塊隱藏但 不會釋放自己的位置, One 6.2 浮動的核心所有的浮動的元素會脫離文檔流，然后在頁面的上層形成一個(gè)立體的層結(jié)構(gòu)?？偨Y(jié)： # 如果一個(gè)頁面中具有浮動和和非浮動元素，那么在浮動元素之前的非浮動元素會先占據(jù)文檔的位置。且默認(rèn)情況下 浮動層的該位置也被占用。 # 浮動的元素在遇到障礙的時(shí)候停止浮動 # 如果都是浮動元素,空間夠大，那么浮動元素會在一起，如果需要在另一行顯示那么必須在浮動的同時(shí)使用

9、clear屬性 left | right | both。 擴(kuò)展 在div的樣式中設(shè)置position: fixed;可以起到網(wǎng)頁中的廣告效果。固定在網(wǎng)頁的 左右兩側(cè) 案例：使用div+CSS浮動技術(shù)實(shí)現(xiàn)框架頁效果【參考如下demo8】 .top,.foot width: 970px; height: 110px; .left,.right height: 430px; .left width: 170px; .right width: 797px; div border:1px solid red; float:left; Top 系統(tǒng)菜單 學(xué)生信息管理 教師信息管理 Copyright fu

10、nction openView(ele) / alert(ele.innerHTML); if(ele.innerHTML = 學(xué)生信息管理) / 需要獲取頁面中的iframe元素 var iframe = window.document.getElementById(myiframe); / alert(iframe.src); / 修改框架對象顯示的頁面 iframe.src = demo2.html; else if(ele.innerHTML = 教師信息管理) alert(ele.innerHTML); 擴(kuò)展Ul(unorder list)無需裂變,li(list)是列表的一個(gè)項(xiàng)，比

11、如“本書作者（排名不分先后）：張三，李四，王五”就可以這樣寫ol是有序列表本書作者（排名不分先后）張三李四王五 7. 定位技術(shù) 定位技術(shù)主要的任務(wù)就是將頁面中的元素放置到指定的位置。 常見的定位有三種： # 絕對定位 position: absolute; 指定定位元素的坐標(biāo) 【top left right bottom】 是以整個(gè)頁面的(0,0)左上角的位置開始計(jì)算。 # 相對定位 position: relative; 指定定位元素的坐標(biāo) 【top left right bottom】 是相對的該元素在頁面中原有的位置 # 固定定位 position: fixed; 在寫框架的時(shí)候由于to

12、p的下邊框以及center的上邊框重疊導(dǎo)致重疊部分線很粗，用下面屬性解決 Eg：Top border-bottom-width規(guī)定下邊框的寬度。參閱：border-bottom-width 中可能的值。border-bottom-style規(guī)定下邊框的樣式。參閱：border-bottom-style 中可能的值。border-bottom-color規(guī)定下邊框的顏色。參閱：border-bottom-color 中可能的值。廣告位案例 出售廣告位 div width: 150px; height: 350px; border: 1px solid #FFFF00; margin-top: 10%; .left float: left; position: fixed; top:10%; left: 10px; .right float: right; position: fixed; top:10%; right: 10px; 賣廣告啦.