北大青鳥軟件工程師HTMLTP_第1頁
北大青鳥軟件工程師HTMLTP_第2頁
北大青鳥軟件工程師HTMLTP_第3頁
北大青鳥軟件工程師HTMLTP_第4頁
北大青鳥軟件工程師HTMLTP_第5頁
已閱讀5頁，還剩20頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第六章層疊樣式表回顧2-1<TABLEwidth="200"border="1"align="center"><CAPTIONalign="bottom">我的表格</CAPTION><TRbgcolor="yellow"><TH>1</TH><TH>2</TH></TR><TRalign="center"><TDrowspan="2">3</TD><TDalign="right">4</TD></TR><TR><TDalign="right">5</TD></TR></TABLE>代碼閱讀2回顧2-2要求密碼文本框不超過10個字符，請補全HTML代碼。

密碼<INPUTtype=“?”?=“10”>下面有關(guān)單選按鈕的HTML代碼正確嗎？

<INPUTtype="radio"name="radio1"value="F">

<INPUTtype=“radio”name=“radio2”value=“M”>女按鈕分為哪三類，類型(type)分別是？下拉列表框中顯示的超級女生是？

最佳超級女生是<SELECTNAME=“myselect"><OPTION>1號</OPTION><OPTION>2號</OPTION><OPTIONselected>3號</OPTION></SELECT>3目標掌握樣式表的語法規(guī)則樣式表的分類：行內(nèi)樣式表內(nèi)嵌樣式表外部樣式表掌握常用的樣式了解層<DIV>和<SPAN>標簽4DHTML簡介DHTML=HTML腳本語言JavaScript++層疊樣式表CSS指定一個網(wǎng)頁的元素決定元素的大小顏色和位置操縱網(wǎng)頁的元素DHTML是制作動態(tài)

HTML頁面的技術(shù)！5DHTML的功能設(shè)計人員可以隨著與用戶的交互操作而改變文本的顏色、字體和大小設(shè)計人員可以隨用戶的輸入或事件（如單擊鼠標）而更改頁面的內(nèi)容設(shè)計人員可以用x座標和y座標來指定網(wǎng)頁元素的確切位置（絕對位置或相對位置）設(shè)計人員可以將網(wǎng)頁中的表格綁定到數(shù)據(jù)庫設(shè)計人員可以將選擇的字體和網(wǎng)頁一起封裝Web程序員可以編寫腳本以更改網(wǎng)頁的樣式和內(nèi)容在DHTML中，每個元素都被視為一個對象?？梢元毩⒌貙γ總€對象進行訪問和編程動態(tài)樣式動態(tài)內(nèi)容定位數(shù)據(jù)綁定可下載字體腳本對象結(jié)構(gòu)6DHTML示例閃爍文本移動文本消隱文本7<HTML><HEAD><TITLE>設(shè)置屬性</TITLE></HEAD><BODY><P

style="color:red;font-size:30px;font-family:隸書;">

這個段落應(yīng)用了樣式<P>這個段落按默認樣式顯示</BODY></HTML>什么是樣式？指定顯示樣式樣式規(guī)則8常用的樣式屬性9根據(jù)樣式代碼的位置，分為三類：行內(nèi)樣式內(nèi)嵌樣式外部樣式樣式的分類

在最后一個聲明后面加上一個分號(;)是一個好習慣10行內(nèi)樣式您如果希望某段文字和其他段落的文字顯示風格不一樣，那么請采用“行內(nèi)樣式”。行內(nèi)樣式使用元素標簽的STYLE屬性定義。/*－－關(guān)鍵代碼--*/

<p>剩余時間：成交結(jié)束<BR>新舊程度：全新<BR>所在地：北京<BR>寶貝數(shù)量：5件<BR>瀏覽量：220次</p><pstyle=“color:#FF00FF;font-family:隸書;font-weight:bold;font-size:24px">另送價值50元的充電器套裝！(一個充電器，兩節(jié)充電電池)可使用半年以</p>11<HTML><HEAD><TITLE>應(yīng)用樣式</TITLE><STYLETYPE="text/css">

P{font-size:20px;color:blue;text-align:center}</STYLE></HEAD><BODY><P>我是段落1</P><P>我是段落2</P><P>我是段落3</P><P>我們的樣式絕對統(tǒng)一</P></BODY></HTML>內(nèi)嵌樣式-1樣式表樣式規(guī)則所有的段落都采用P樣式，保證樣式統(tǒng)一行內(nèi)樣式表局限于某個標簽，如果希望本網(wǎng)頁內(nèi)的所以同類標簽都采用統(tǒng)一樣式，這時應(yīng)采用內(nèi)嵌樣式。選擇器用分號隔開12內(nèi)嵌樣式-2選擇器根據(jù)選擇器的不同，內(nèi)嵌樣式又分為：HTML選擇器CLASS類選擇器ID選擇器

13/*--關(guān)鍵代碼--*/<HEAD><STYLEtype="text/css">P{/*設(shè)置樣式：字體和背景色*/ font-family:System; font-size:18px; color:#3333CC;}H2{ background-color:#CCFF33; text-align:center;}</STYLE></HEAD><BODY><H2>品種特征方面：</H2><P>1、蛋魚：蛋魚…….。</P><P>2、龍睛：龍睛……..。</P><P>3、高頭：高頭….。</P>內(nèi)嵌樣式-3HTML選擇器HTML選擇器應(yīng)用H2樣式應(yīng)用P樣式14內(nèi)嵌樣式-4class類選擇器<HEAD><STYLEtype="text/css">.myinput

{ border:1pxsolid; border-color:#D4BFFF; color:#2A00FF}</STYLE></HEAD><BODY><FORM><P>用戶名<INPUTname="textfield"type="text"class="myinput"></P><P>密 碼<INPUTname="textfield"type="password"class="myinput"></P><P><INPUTtype="submit"name="Submit"value="重填"><INPUTtype="submit"name="Submit"value="提交"></P>CLASS類選擇器應(yīng)用類選擇器：class＝”類名“類選擇器的定義格式為：.類名{…樣式規(guī)則;}15<HEAD><STYLETYPE="text/css"> #fire{color:red;font-size:24px;} </STYLE></HEAD><BODY><H2ID="fire">我是二級標題，火是這樣的</H2><PID="fire">我是段落，火是這樣的</P></BODY> 內(nèi)嵌樣式-5ID選擇器ID選擇器ID選擇器的定義格式為：＃ID名{…樣式規(guī)則;}應(yīng)用ID選擇器：ID＝”ID名“16<HEAD><STYLEtype="text/css">A{/*設(shè)置超鏈接不帶下劃線*/color:blue;text-decoration:none;/*文本修飾：無*/}A:hover{/*鼠標在超鏈接上方停留時，帶下劃線*/color:red;text-decoration:underline;/*文本修飾：下劃線*/}</STYLE>HEAD><BODY><Ahref=“a.htm">俺是超鏈接，移過來我就顯示下劃線</A></BODY></HTML>內(nèi)嵌樣式-6特殊的選擇器HTML選擇器特殊的偽類：A代表超鏈接，hover代表鼠標懸停17外部樣式根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為：鏈接（LINK）外部樣式表導入（import）外部樣式表樣式文件P{…..}網(wǎng)頁2網(wǎng)頁3網(wǎng)頁118鏈接外部樣式表使用LINK（鏈接）標簽，語法：<HEAD><LINK

rel=“stylesheet”type=”text/css”href=”樣式表文件.css”></HEAD>第一步：創(chuàng)建樣式表文件newstyle.css第二步：把樣式文件和網(wǎng)頁關(guān)聯(lián)樣式文件：newstyle.css

P{…..}Onel.htmanother.htm第三步：瀏覽查看各網(wǎng)頁演示：鏈接樣式表示例19導入外部樣式表使用@import導入，語法：<HEAD><STYLETYPE="text/css">@import樣式表文件.css;</STYLE></HEAD>操作步驟同鏈接樣式表20外部樣式文件樣式的混合使用行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表各有優(yōu)勢，實際的開發(fā)中常常需要混合使用：有關(guān)整個網(wǎng)站統(tǒng)一風格的樣式代碼，放置在獨立的樣式文件*.css某些樣式不同的頁面，除了鏈接外部樣式文件，還需定義內(nèi)嵌樣式某張網(wǎng)頁內(nèi)，部分內(nèi)容”與眾不同“，采用行內(nèi)樣式對于某個HTML標簽：1）如果有多種樣式，如果規(guī)定的樣式?jīng)]有沖突，則疊加；2）如果有沖突，則最先考慮行內(nèi)樣式表顯示，如果沒有，再考慮內(nèi)嵌樣式顯示，如果還沒有，最后采用外面樣式表顯示，否則就按HTML的默認樣式顯示；內(nèi)嵌樣式

行內(nèi)樣式

某個HTML標簽21<DIV>層標簽…關(guān)鍵代碼…

<DIV

id="Layer1"style="position:absolute;left:149px;top:110px;width:357px;height:87px;z-index:1;"><IMGsrc="talk.gif"width="91"height="76"><P>Z-index=1，我是第一層，我是容器，包含圖片段落</P></DIV>

<DIVid="Layer2"style=“….;z-index:2;…."><IMGsrc="bbs_logo.gif"width="101"height="43"><P>Z-index=2，我是第二層，包含圖片和段落</P>

</DIV>…使用Z－index指定是哪一層<DIV>是塊級容器標簽，可以包含圖片、標題、段落、文字等圖片段落topleft22<SPAN>標簽<HTML><BODY><H2>所有韓款童裝<SPANstyle=“color:#FF66FF;font-size:50px;”>10</SPAN>元/件起拍嘍</H2><IMGsrc="show.gif"width="360"height="195"><BR></BODY></HTML><SPAN>是行級容器標簽，不可以包含圖片、標

溫馨提示

  • 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

提交評論