2012級講義htmlcss第二部分flex builder

上傳人：我*** IP屬地：北京上傳時間：2023-04-12 格式：PPTX 頁數：666 大小：25.78MB 積分：22 舉報 版權申訴

已閱讀5頁，還剩661頁未讀，繼續(xù)免費閱讀

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

871FLEXBUILDER第二部分HTML+CSS第二本講義872千萬千萬記住：

一定要自己錄入代碼，才能掌握代碼，只有掌握了每句代碼才能編寫程序，只有能編寫程序才能有工作能力，有了工作能力才能有工作機會，有了工作機會才能有高薪和前程。873為了預防有些同學大量復制粘貼代碼，期末結束前有一場筆試，筆試的功能是尋找和篩選那些粘貼代碼做假的同學。只要筆試不過關，就認定實驗作業(yè)沒有自己敲代碼或者作蔽，一票否決本課程不合格。這類同學男生得分直接為25分，女生為38分。筆試過關的同學，以大作業(yè)為打分依據。874新浪博客上的聲音播放器代碼：<EMBEDtype="application/Windows"height="40"width="200"align="baseline"pluginspage=""src="/media/0/110624161419469.mp3"allowscriptaccess="samedomain"autostart="false"border=""player=""media=""></EMBED>875說明：pluginspage是插件頁面，加入這個屬性可檢測瀏覽器是否裝了flash播放器插件，如果沒有裝，會引導用戶去這個頁面下載安裝flash播放器插件，不換網址也不會影響插入flash，但是建議還是改一下網址，節(jié)省打開域名轉向的時間。pluginspage="/go/getflashplayer"pluginspage="/tw/flashplayer/"876allowscriptaccess指定是否可以調用外部的腳本代碼，有三個參數：always：可以調用網頁以外的代碼。never：永遠不能調用網頁以外的代碼。samedomain：可調用同域代碼。autostart指定播放器自動放映，邏輯值.true指定自動播放false指定不自動播放877embed

標簽--定義網頁中嵌入除圖片外的多媒體不符合標準網頁設計的理念,不贊成使用.embed標簽是單獨出現的,以<embed>開始，</embed>結束使用embed標簽可以在網頁中嵌入Flash，Mid，MP3等嵌入式內容embed標簽已經被符合標準的object標簽代替。屬性Common--一般屬性align--對齊方式autostart--是否自動播放true--自動播放，默認值false--不自動播放border--邊框，單位像素controls--控制面板樣式console--正常面板，默認值smallconsole--小面板playbutton--只顯示播放按鈕的面板pausebutton--只顯示暫停按鈕的面板stopbutton--只顯示停止按鈕的面板volumelever--只顯示音量調節(jié)按鈕的面板878hidden--隱藏嵌入內容(也可以把高度與寬度設置為0)，通常用于聲音true--顯示，默認值false--不顯示hspace--水平距離，單位像素loop--是否循環(huán)播放數字--循環(huán)次數true--循環(huán)播放false--不循環(huán)播放，默認值palette--嵌入內容的顏色，例如：red|black，red為前景色，black為背景色src--嵌入內容的URLtype--嵌入內容的MIME類型units--嵌入內容的單位，可以改變height與width的單位為envolume--音量大小，取值[0-100]，應根據系統(tǒng)確定音量vspace--垂直距離，單位像素width--嵌入內容寬度，單位像素height--嵌入內容高度，單位像素embed:嵌入引用網址:

/xhtml/tag_embed/879補充：DTD解析DTD(DocumentTypeDefinition)

是一套關于標簽的語法規(guī)則。它是XML1.0版規(guī)格的一部分，同時也是XML文件的驗證機制，屬于XML文件的組成部分。XML文件提供了網絡應用程序的數據交換標準和格式，但各公司的數據標準可能不同，則DTD正是讓公司數據格式轉換成為XML文件標準，即各公司的數據都能依據DTD轉換標準轉換成XML文件數據標準，并且還能進行驗證，滿足了網絡共享和數據交互。DTD文件是一個ASCII文本文件，后綴名為dtd。880XHTML1.0支持三種DTD（文檔類型定義）聲明：過渡型(Transitional)、嚴格型(Strict)、和框架型(frameset).1、過渡型這種文檔類型對于標簽和屬性的語法要求不是很嚴格，允許在頁面中使用HTML4.01的標簽（符合XHTML語言標準）。xhtml1.0過渡型DTD語句和XMLNS語句如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml">881882883其實，在DW中新建文檔時如果新建HTML4版的文檔，其DTD過渡型代碼如下：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html>注釋：在<html>標簽中沒有指定XMLNS代碼。loose：寬松的，不精確的8848858862、嚴格型這類文檔類型對于文檔內的代碼要求比較嚴格，不允許使用任何表現層的標簽和屬性。在XHTML1.0中，嚴格型DTD語句和xmlns語句如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="/1999/xhtml">887888889在DW中新建文檔時如果新建HTML4版的嚴格型文檔，其DTD嚴格代碼如下(沒有指定xmlns空間)：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""/TR/html4/strict.dtd"><html>890891892在xhtml1.0嚴格型文檔中，下列用于表現層的標簽或者屬性元素都不支持：center：居中，用于表現層font：字體，用于表現層strike：刪除線，用于表現層s：刪除線，用于表現層u：下劃線，用于表現層iframe：嵌入式框架窗口，用于框架和過渡型文檔isindex：提示用戶輸入單行文本(與input元素語義重復)dir：定義目錄列表（與dl元素語義重復）menu：定義菜單列表（與ul元素語義重復）basefont：定義文檔默認字體屬性applet：定義插件（與object元素語義重復）893align(支持table包含的相關元素：tr,td,th,col,colgroup,thead,tbody,tfoot)languagebackgroundbgcolorborder(table元素支持)height(img和object元素支持)hspacename(在HTML4.01Strict中支持，在xhtml1.0Strict中的form和img元素不支持)894noshadenowraptargettextlink,alink,vlinkvspacewidth(img,object,table,col和colgroup元素中支持可用)8953、框架型當一種專門針對框架頁面所使用的DTD，當頁面中含有框架元素時應該采用這種DTD。在新建xhtml1.0框架型文檔時DTD代碼如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">事實上，在DWCS6中，在新建文檔時沒有框架型文檔類型，請看下圖所示，但有XHTML1.1版的文檔：896897898如果頁面中沒有顯示聲明DOCTYPE，則不同的瀏覽器就會自動采用各自默認的DOCTYPE規(guī)則來解析文檔，則文檔中的標簽和CSS的顯示效果可能會有差異。因此，從各種瀏覽器的差異和兼容性來考慮必須聲明DOCTYPE。DOCTYPE聲明必須放在HTML文檔或者XHTML文檔的頂部，在DOCTYPE聲明上面不能包含任何HTML代碼，也不能有HTML注釋語句。DOCTYPE聲明語句結構圖如下：899DOCTYPE聲明中各部分說明：1）頂級元素：DTD中聲明的頂級元素類型，這與聲明的SGML(StandardGeneralizedMarkupLanguage)文檔類型相對應。HTML文檔默認頂級元素為html，即腳本語言的第一個標簽是<html>。9002）可用性：指定正式公開標識符(FPI)是可公開訪問的對象(PUBLIC)還是系統(tǒng)資源(SYSTEM)，默認為PUBLIC，SYSTEM系統(tǒng)資源包括本地文件或者URL。3）注冊：指定組織是否由國際標準化組織(ISO)注冊。“+”（默認）表示組織名稱已經注冊，“-”表示組織名稱未注冊。W3C是屬于未注冊的ISO組織，以顯示為“-”符號。4）組織：指定創(chuàng)建和維護DTD的組織名稱。xhtml語言規(guī)范的創(chuàng)建和維護組織是W3C。9015）類型：指定公開文本的引用對象類型。XHTML默認為DTD.6）標簽和版本號：指定公開文檔的描述，后面可跟版本號。HTML默認為HTML4.01等，而XHTML默認為XHTML1.0等。7）定義：指定文檔類型，包括過渡型文檔(Transitional)、嚴格型文檔(Strict)和框架集文檔(Frameset).嚴格型文檔禁止使用W3C規(guī)范中指定的將逐步淘汰的元素（標簽）和屬性。過渡型文檔可以使用除frameset標簽以外的所有內容。9028）語言：指定公開文本的語言，即指定編碼系統(tǒng)。語言定義采用ISO639語言代碼標準，只能用二個大寫字母，默認為EN（英語）。URL：指定引用對象的位置?？傊珼OCTYPE聲明語句嚴格遵循一定的規(guī)則，只有這樣，瀏覽器才能調用對應文檔類型的規(guī)則來解釋文檔中的標簽，因此，所謂文檔類型規(guī)則集就是W3C公開發(fā)布的一個文檔類型定義（DTD）中包含的規(guī)則。903補充：XML的命名空間xmlns在標準網頁設計制作中，在<html>頂級標簽里必須用xmlns屬性指定一個網頁，用來定義該頂級標簽元素以及其它包含的各級子標簽元素的唯一性，即在命名空間聲明里允許用戶通過一個網址指向，來識別文檔內標簽的唯一性。在DWCS6編輯HTML文檔是，如果文檔版本是XHTML1.0或者XHTML1.1，無論是文檔類型是過渡型還是嚴格型，其XMLNS都指向同一個網址：<htmlxmlns="/1999/xhtml">在HTML4.01版本中沒有指定XMLNS命名空間。904十九、CSS層疊樣式表過去，所謂的動態(tài)網頁離不開CSS和JavaScript的控制，但由于JavaScript沒有數據庫，不能做成后臺的動態(tài)網頁，只是做出web前端的動態(tài)網頁，畫面很炫麗。而如今可以用PHP+mySQL等語言來控制Web后臺數據了，可以做成非常漂亮的帶數據庫的動態(tài)網頁。DHTML(dynamicHTML)稱為動態(tài)HTML。而DHTML有三個基本要素：905HTML+CSS+Javascript或者其它語言(ActionScript3.0)。這些語言主要做web前端開發(fā)，即為IE瀏覽器端開發(fā)程序代碼，而PHP+mySQL做web后臺開發(fā)，即為服務器端開發(fā)程序代碼。網頁的開發(fā)語言一般都是腳本語言，這是由于腳本語言才能方便地與html腳本語言混用。我們后面要講的PHP也是腳本語言，自然容易與HTML混用了。9061、CSS的基本概念CSS(CascadingStylesheets)叫層疊樣式表。1996-12-17日由W3C推出CSS1，又在1998-5-12日推出CSS2，經過了11年以后，在2011-6-7日最后敲定CSS2.1，而CSS3只是一個建議，目前還沒有正式發(fā)布，在網上查詢不到CSS3的正式發(fā)布日期，但是CSS3選擇器已經在2011-9-29日正式發(fā)布了。W3C只是個民間組織，沒有強行推廣CSS3的權力，只是建議CSS3標準。先大家用，然后有問題大家一起修改，最后成熟以后才推出正式標準。9072、CSS的功能和特點HTML語言的文檔結構與顯示混合在一起，直接導致了瀏覽器之間不兼容。為了讓網頁在各種瀏覽器平臺上都能正常顯示，需要一種新規(guī)范，將顯示(表現)描述徹底獨立于文檔結構。xml語言完全遵守表現與文檔結構的獨立，而html語言文檔結構和表現效果混為一體，存在著嚴重的缺陷。文檔結構：指網頁組成內容。文檔表現：網頁顯示的效果和格式，指網頁顯示效果。908CSS就是為了彌補這種文檔結構與表現效果混為一體的缺陷而誕生的，同時也是為了各瀏覽器之間兼容問題。CSS是一種簡單靈活易學的工具，任何瀏覽器都聽從CSS指令，知道如何顯示元素及其內容?？偟膩碇v，CSS有下幾項功能：1）彌補HTML語言對網頁格式功能的不足，比如段落間距、行距等。2）字體變化和大小3）頁面格式的動態(tài)更新4）排版定位等909CSS特點:1）可以將格式（表現）和結構（內容）分離2）可以用以前所沒有的能力控制頁面布局3）可以制作體積小、下載更快的網頁4）可以將許多網頁同時更新，比以前的網頁更新時更快更容易。5）將建成更友好的界面CSS在本質上屬于類，由于用它來裝飾網頁的顯示效果，也叫樣式，與WORD中的樣式概念相當。9103、用CSS重新定義標簽格式（內嵌樣式）標簽名{屬性1:值1;屬性2:值2;屬性3:值3;….}說明:a.標簽名稱為選擇符或者選擇器。標簽本身就是一種類，標簽有有些書中稱為標記，在CSS定義中可以修改標簽(類)中的定義內容。b.大括弧是樣式分隔符c.屬性和屬性值叫聲明，在大括弧中可寫許多聲明，用分號分開。用CSS重新定義標簽時可以這么表示：911標簽名{聲明1;聲明2;聲明3;….}“聲明”書寫方式：屬性:屬性值;CSS在<head>標簽中定義，定義格式如下：<styletype=“text/css”></style>注：可以不用。912標記就是標簽。在<style>標簽中定義CSS時，一般在注釋語句中定義的，但這并不影響定義的有效性。標簽本質上也是一種樣式，屬于類。913例：先做一個網頁，然后用CSS再修改<h1>、<h2>、<body>標簽的屬性值。學號專業(yè)姓名h64.html先不用CSS，看效果：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8">914<title>更改標簽屬性的CSS要在head中實現</title></head><body><h1>主流網頁設計軟件</h1><h2>重慶師范大學計算機學院2012級電子商務和信息管理</h2><p>目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p></body></html>915916然后再<head>標簽內添加CSS定義體：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>更改標簽屬性的CSS要在head中實現</title>917918<styletype="text/css"></style></head>919<body><h1>主流網頁設計軟件</h1><h2>重慶師范大學計算機學院2012級電子商務和信息管理</h2><p>目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p></body></html>920921922用<style></style>標簽可以定義一個CSS對象，但有時也可以直接在標簽里定義CSS標簽格式，這種定義CSS的方式叫行內樣式，例如：<h3style=“font-size:10pt;font-family:隸書”><pstyle=“font-size:9pt;line-height:12pt;background-color:#ffcc00;font-family:宋體”>CSS有繼承性，可以反復使用，而直接在標簽里用style屬性定義的CSS標簽新格式只能用一次，沒有繼承性。學號姓名專業(yè)h65.html先把h64.html文件另存為h65.html文件。然后把CSS定義中h2標簽和body標簽定義刪除掉，只留下h1的定義。修改后的代碼如下圖所示：923924925在</body>上方添加一個橫線<hr/>，然后再從<h1>到</p>之間的內容復制到橫線下方。最后把第一個<h2>標簽樣式更改為：<h2style="font-size:large;color:blue">把第一個<p>標簽樣式更改為：<pstyle="font-family:楷體;font-size:10pt;color:#ff0000;line-height:12pt;background-color:#ffff00">DW代碼窗口如下圖所示：926927928IE瀏覽器效果929結論：在標簽中直接定義CSS行內樣式只能在此標簽中使用，沒有繼承性。而在<head>標簽中定義的CSS標簽屬性（內嵌樣式）有繼承性，可以反復使用。學號姓名專業(yè)h65.html的最后代碼：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>更改標簽屬性的CSS要在head中實現</title>930<styletype="text/css">h1{font-size:x-large;color:red}</style></head><body><h1>主流網頁設計軟件</h1><h2style="font-size:large;color:blue">重慶師范大學計算機學院2012級電子商務和信息管理</h2><pstyle="font-family:楷體;font-size:10pt;color:#ff0000;line-height:12pt;background-color:#ffff00">目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p>931<hr/><h1>主流網頁設計軟件</h1><h2>重慶師范大學計算機學院2012級電子商務和信息管理</h2><p>目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p></body></html>9324、自定義CSS對象（內嵌樣式）.css對象名{屬性1:值1;屬性2:值2;….}.css對象名{聲明1;聲明2;聲明3;….}說明:a..css對象名稱為選擇符或者選擇器，它是CSS自定義對象，在本質上屬性類定義。標簽是類，而自定義CSS對象也是類。b.大括弧是樣式分隔符c.屬性和屬性值叫聲明，在大括弧中可寫許多聲明，用分號分開。933自定義CSS對象格式：在<head>標簽中定義<styletype=“text/css”></style>注：符可以省略934在標簽中引用自定義CSS類時，可以用以下方式：<標簽名class=“CSS自定義對象名”>class就是類的意思。在下圖中，類別選擇器就是自定義CSS選擇器。935<styletype=“text/css”>h1{font-family:隸書;color:#ff0000;font-weight:

bolder}h2{font-family:黑體;color:#0000ff;font-weight:bold}.text{font-family:宋體,仿宋_gb2312;color:#ffffff;font-weight:bold;background:#009999}</style>把h64.html文件另存為h66.html文件，然后按照以下方式更改代碼：936937學號專業(yè)姓名h66.html<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>自定義CSS</title><styletype="text/css">h1{font-family:隸書;color:#ff0000;font-weight:bolder}h2{font-family:黑體;color:#0000ff;font-weight:bold}.text{font-family:宋體,仿宋_gb2312;color:#ffffff;font-weight:bold;background:#009999}</style></head>938<body><h1>主流網頁設計軟件</h1><h2>重慶師范大學計算機學院2012級電子商務和信息管理</h2><pclass="text">目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p></body></html>939940CSS可以定義在<head>標簽里，也可以專門做一個CSS文件，把所有的CSS定義的內容都放在此CSS文件中，例如CSS文件為my.css，那么可以在<head>標簽里添加一句代碼就可以把CSS文件中自定義的所有CSS對象添加到HTML腳本文件中，這種方式引用的CSS樣式稱為鏈接樣式：<linkhref=“my.css”rel=“stylesheet”type=“text/css”>此句不在css定義標簽里使用。把h66.html文件中定義的CSS對象做到h67.css文件中，放在www目錄下。941h67.css文件內容：h1{font-family:隸書;color:#ff0000;font-weight:bolder}h2{font-family:黑體;color:#0000ff;font-weight:bold}.text{font-family:宋體,仿宋_gb2312;color:#ffffff;font-weight:bold;background:#009999}942把h66.html文件另存為h67.html，然后把css定義刪除掉，在<head>標簽里添加一句代碼：<linkhref="h67.css"rel="stylesheet"type="text/css">其它部分代碼不變。注：rel是relation的縮寫，表示關系或者關聯(lián)。學號專業(yè)姓名h67.html<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8">943<title>使用自定義CSS文件</title><linkhref="h67.css"rel="stylesheet"type="text/css"></head><body><h1>主流網頁設計軟件</h1><h2>重慶師范大學計算機學院2012級電子商務和信息管理</h2><pclass="text">目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p></body></html>944945946如果在定義CSS的標簽里引用CSS文件中定義的樣式對象時，可以用以下代碼“導入樣式”：<styletype="text/css">@importurl(css文件名.css);這兒再寫其它CSS定義內容的代碼等</style>

把h66.html文件另存為h68.html，并且修改代碼如下：947學號專業(yè)姓名h68.html<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>自定義CSS</title><styletype="text/css">@importurl(h67.css);.txt{font-family:隸書;color:#00f;background:#ee0}</style></head>948<body><h1>主流網頁設計軟件</h1><h2>重慶師范大學計算機學院2012級電子商務和信息管理</h2><pclass="text">目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p><hr/><pclass="txt">目前，網頁技術進入了一個新階段，現在的網頁再也不是圖片堆積和枯燥無味的文本了。人們正在追求網頁的動態(tài)效果和交互性。而Adobe公司的網頁設計三劍客軟件DW、FL、FW正是交互性網頁設計的杰出代表，其最新版本CS6繼承了前期版本的優(yōu)點和特點，進行了功能整合，非常適合于網頁設計和網站建設的需要。</p></body></html>949950951Css引用小結：引用CSS控制頁面的四種方式（樣式）：行內樣式、內嵌樣式、鏈接樣式、導入樣式。1)行內樣式(內聯(lián)樣式)：<pstyle="color:#F00;background:#CCC;font-size:12px;"></p>"在標記里定義樣式。這種樣式只能在此標記里使用，沒有繼承性。行內樣式在其它標簽里也能使用。9522)內嵌樣式(內部樣式)在<head>標簽里用<style>標簽申明的CSS樣式。<head><styletype=“text/css”></style></head>9533)鏈接樣式(外部樣式)當要引用CSS文件時，可以在<head>標簽里用<link>標簽鏈接引用。<head><linkhref="文件名.css"rel="stylesheet"type="text/css"></head>4)導入樣式(外部樣式)<styletype="text/css">@importurl(css文件名.css);這兒再寫其它CSS定義內容的代碼等</style>954在有CSS文件時，采用鏈接樣式和導入樣式看起來好像差不多，其實在速度上不同。鏈接樣式速度要快一些，建議一般采用鏈接樣式。當有多個CSS文件時，好像用導入樣式更方便，但如果網頁速度慢了，會導致網頁剛開始時沒有CSS的裝飾效果。四種樣式的級別：以就近原則，可得：行內樣式>內嵌樣式>鏈接樣式>導入樣式9555、用CSS重新定義<A>標簽樣式(偽類選擇器)可以對鏈接標簽<a>樣式進行重新定義。因為<a>標簽有四種樣式：一是普通樣式，即鼠標不在鏈接文字上的樣式或者格式。a:link二是鼠標在鏈接文字上的樣式。a:hover三是鼠標單擊選定以后的樣式。a:visited四是鼠標按下左鍵時的樣式。a:active956CSS重新定義<A>標簽的樣式：<styletype="text/css">a:link{color:#0000ff;font-family:"宋體";text-decoration:underline}a:hover{color:#ff0000;font-family:"隸書";text-decoration:none}a:visited{color:#099;font-family:"楷體";text-decoration:line-through}a:active{color:#0f0;}</style>957說明：a:link定義鏈接文字平時的格式，即鼠標指針不在鏈接文字上的格式。a:hover定義鼠標指針在鏈接文字上的格式。a:visited定義鼠標指針單擊過的鏈接文字上的格式。a:active定義鼠標單擊超級鏈接時的格式。以上定義方式是偽類選擇器958學號專業(yè)姓名h69.html<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>用CSS重新定義鏈接標簽A的樣式</title>959960<body><ahref=""target="_blank">重慶師范大學</a><br/><br/><ahref=""target="_blank">重慶大學</a><br/><br/><ahref="/dssb"target="_blank">道升隨筆</a></body></html>961962沒有用過鏈接時鼠標移動到鏈接文字上時963用過以后的鏈接文字顏色鼠標左鍵按下去時的顏色964提醒：用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。在<body>標簽中，有幾個與鏈接有關的重要屬性在此需要重新提醒一下：965link:鏈接文字顏色alink:鼠標左鍵按下去時鏈接文字顏色vlink:用過的鏈接文字顏色格式：<bodylink=“顏色值”alink=“顏色值”vlink=“顏色值”>請參考實作9里的內容，在190張幻燈片上。9666、CSS嵌套和沖突當一段文字應用了多個CSS樣式時，如果這些樣式之間設置了相同的屬性就會發(fā)生矛盾，引起沖突。但CSS樣式遵循了以下規(guī)則，回避了這些矛盾沖突：1）當兩個CSS樣式應用于同一段文本時，瀏覽器將在這段文字上顯示這兩個CSS樣式中所有的屬性，除非在這兩個CSS樣式中有相同的屬性沖突了。例如，一個CSS樣式顯示文本為紅色，另一個CSS樣式顯示文本為綠色。2）當兩個CSS樣式中相同的文本屬性應用到同一段文本時便產生了屬性沖突，則瀏覽器將采用距離文本最近的CSS樣式中的屬性。9673）當HTML中的標簽中的屬性與CSS樣式中的屬性產生沖突時，則CSS樣式中的屬性優(yōu)先。<span>標簽被用來組合文檔中的行內元素，沒有格式屬性，不換行，可以認為是行內分組。而<div>標簽被用來組合文檔中的元素，要換行，沒有格式屬性，稱為分組標簽。<div>標簽與CSS組合常用來布局網頁。例如：<p><span>一段文字</span>一段其它文字</p>如果在<span>標簽里不用CSS樣式，那么此標簽沒有任何功能，也不會對此標簽里的文字格式進行任何修改。968學號專業(yè)姓名h70.html<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>css沖突和等級</title><styletype="text/css">.myred{font-family:"隸書";color:#ff0000}.mygreen{color:#00ff00}</style></head>969<body><h3>這里的顏色應該是紅顏,這兒的顏色應該是綠色，這兒的顏色也應該是紅顏色。</h3><h3><span>這里的顏色應該是紅顏色，<span>這兒的顏色應該是綠色，</span>這兒的顏色應該也是紅顏色。</span></h3><h3><spanclass=myred>這里的顏色應該是紅顏色，<spanclass=mygreen>這兒的顏色應該是綠色，</span>這兒的顏色應該也是紅顏色。</span></h3><h3class=myred>這里的顏色應該是紅顏色，<h3class=mygreen>這兒的顏色應該是綠色，</h3>這兒的顏色應該也是紅顏色。</h3><br/>這兒的顏色應該也是紅顏色。</body></html>970遇到<h3>標簽和</h3>標簽就要換行971顯示myred樣式顯示myred樣式顯示mygreen樣式，但字體是myred樣式中定義的恢復顯示myred樣式綠色，但是h3里的字體一般文本格式，沒有恢復myred樣式一般文本格式9727、CSS的字體屬性字體屬性主要有：字體、字號、字形和加粗1）font-family:指定字體名，如果是二個以上時用逗號分開。例如：font-family:"字體";font-family:"字體1,字體2";2）font-size:指定字號，單位為pt(磅值)，也可以指定px(像素)，也可以指定特殊字符。這些特殊字符也表示字號大小。1英寸=72磅值，word中的西文字號就是pt.973例如：font-size:20pt;font-size:smaller;font-size:small;font-size:x-small;font-size:xx-small;font-size:larger;font-size:large;font-size:x-large;font-size:xx-large;9743）font-style:指定字形或者字型。有三種字形：normal(普通)、italic(斜體)、oblique(斜體)例子：font-style:italic;font-style:oblique;font-style:normal;9754）font-weight:指定字體加粗。它有以下幾個值：可以用數字表示：100~900之間。normal表示正常,等同于400bold表示加粗，等同于700bolder表示更粗。lighter表示更細。例子：font-weight:500;font-weight:bolderfont-weight:normal9765）color：指定字符顏色。用#rrggbb十六位數表示顏色種類。如果每種三基色的兩位十六進制數字相同，可以簡寫成三位顏色表示：#rgb例如：color:#FFFFFF;表示白色color:#FFF;表示白色color:#FF0000;表示紅色color:#F00;表示紅色color:#00FF00;表示綠色color:#0F0;表示綠色977color:#0000FF;表示藍色color:#00F;表示藍色color:#000000;表示黑色color:#000;表示黑色color:#FFFF00;表示黃色color:#FF0;表示黃色color:#FF00FF;表示紫色color:#F0F;表示紫色color:#00FFFF;表示青色color:#0FF;表示青色978例子：<styletype="text/css"></style>980學號專業(yè)姓名h71.html<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>CSS中的字體屬性</title>981<styletype="text/css"></style>983</head><h1>這是css修改了h1標簽的字體</h1><body>這是原始字號<br/><spanclass="text">這是text樣式的字體</span><br/><spanclass="t">這是t樣式的字體</span><br/>這是原始字號<br/><spanclass="smaller">這是字號smaller</span><br/><spanclass="small">這是字號small</span><br/>984<spanclass="xsmall">這是字號x-small</span><br/><spanclass="xxsmall">這是字號xx-small</span><br/>這是原始字號<br/><spanclass="larger">這是字號larger</span><br/><spanclass="large">這是字號large</span><br/><spanclass="xlarge">這是字號x-large</span><br/><spanclass="xxlarge">這是字號xx-large</span><br/></body></html>985986987觀察：smaller和small字號一樣大。larger和large字號一樣大。988觀察：smaller和small字號一樣大。x-small和xx-small字號一樣大larger比large字號稍微大一點989如果在h71.html文件中，在CSS定義中添加一個body樣式：body{font-size:20pt}這句代碼只更改了<body>標簽的字號，沒有更改它的字體顏色和字體其它屬性。其它代碼不變，結果很令人吃驚。990這兒添加了一句代碼991smaller和small字號大小不一樣了。larger和large字號大小也不一樣了。large和small應該以<body>標簽原始字號放大縮小。而larger和smaller應該以<body>標簽當前字號放大縮小。992smaller和small字號大小不一樣了。x-small和xx-small大小仍然一樣。larger和large字號大小也不一樣了。large和small應該以<body>標簽原始字號放大縮小。而larger和smaller應該以<body>標簽當前字號放大縮小。9938、CSS的文本屬性1）字間距l(xiāng)etter-spacing設置字間距，單位px，例如：letter-spacing:10px2）行間距l(xiāng)ine-height設置文字的行間距，單位pt，例如：line-height:24pt9943）文字修飾text-decoration此屬性用來修飾文本，有幾下幾種屬性值：underline:下劃線overline:上劃線line-through:刪除線blink:閃爍只適用于NetScape瀏覽器none:無任何修飾例如text-decoration:underlinetext-decoration:overlinetext-decoration:line-through9954）文本對齊text-align此屬性指定文本對齊，屬性值有：left,center,right,justify(兩端對齊)例如：text-align:justify5）文本縮進text-indent要指定一個縮進數值，單位為pt，也可以用百分比。例如：text-indent:24pt996補充知識：px和pt的區(qū)別px是屏幕上顯示的一個像素點，而pt是長度單位磅值。1英寸=72磅值當屏幕分辨率為72 DPI時，即一英寸長度上有72個像素點，這時px=pt。然而，當屏幕分辨率不是72DPI時，px≠pt。例如，當屏幕分辨率為92dpi，那么92px=72pt，這樣可得：1pt=92/72或者1px=72/92pt總之，屏幕分辨率的大小決定了像素點PX的大小，但PT單位長短始終不變。西文字號一般用PT表示，但現在新書中西文字號也開始用px了。9979、文本背景屬性主要有四個屬性：1）background-color:背景顏色，#rrggbb2）background-image:背景圖像，指定圖片的url值。3）background-repeat:背景圖像是否重復顯示，并且要指定重復顯示的方向，有四個值可選：repeat-x:橫向重復repeat-y:縱向重復no-repeat:不重復repeat:橫向和縱向重復。9984）background-position:指定背景圖像在頁面上的位置，有五個參數值可選：left,right,center,top,bottom學號專業(yè)姓名h72.html<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8">999<title>CSS中的文本屬性和背景屬性設置</title><styletype="text/css">.text_normal{letter-spacing:normal;line-height:normal}.text_increase{letter-spacing:10px;line-height:24pt}.underline{text-decoration:underline}.line_through{text-decoration:line-through}.justify{text-align:justify}.indent20{text-indent:20pt}.indent30{text-indent:30pt}1000.back_color{background-color:#FF9}.bg{background-image:url(103.gif);background-repeat:repeat;font-size:24pt}.bg1{background-image:url(1.jpg);background-repeat:no-repeat;background-position:center;font-size:36pt}</style></head>1001<body>用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（沒有參數的情況）<hr/><spanclass="text_normal">用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（正常字間距和正常行間距）</span>1002<hr/><spanclass="text_increase">用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（字間距10px,行間距24pt）</span>1003<hr/><spanclass="underline">用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，<spanclass="line_through">不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。</span>在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（由于下劃線和刪除線同時顯示并不矛盾，則中間那段刪除線套用時也顯示了下劃線）</span><hr/>1004<spanclass="indent30">用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（文本縮進沒有效果）</span><hr/><spanclass="back_color">用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（背景為淡黃色。#FF9=#FFFF99）</span>1005<hr/><imgsrc="103.gif">這是103.gif圖片文件<br/><br/><spanclass="bg">用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（背景填充小圖片:用圖片的一行區(qū)間來反復填充文字的背景，而不是網頁的背景）</span><hr/>1006<imgsrc="1.jpg">這是1.jpg圖片文件<br/><br/><spanclass="bg1">用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。用過的鏈接再使用時，文字上的顏色始終顯示為用過以后的鏈接顏色，不會再顯示沒有用過的鏈接文字顏色或者鼠標移到鏈接文字上面時的顏色。在實驗中，由于不知道這個常識，容易出現實驗效果的誤判。（背景一張大圖片居中：用圖片一行的區(qū)間填充一次文字的背景，沒有重復填充，效果讓人失望）</span></body></html>100710081009101010111012101310141015在h72.html文件中，我在<span>標簽中引用了bg1樣式，而<span>標簽只在行內引用，結果導致了圖片背景成為了文字的背景。如果在<body>標簽中引用bg1樣式，并且把bg1樣式中的字號屬性【font-size:36pt】刪除，不影響原來的字符的大小，結果顯示效果完全不同。為了縮短顯示內容，也把最后一個自然段刪除。把h72.html文件另存為h73.html文件，然后進行適當地修改，在<body>標簽中引用bg1樣式。學號專業(yè)姓名h73.html1016在body標簽中引用bg1樣式刪除了font-size屬性1017最后一個自然段被刪除了10181019在body標簽引用bg1效果滿意1020在上例中，如果bg樣式被<body>標簽引用，并且刪除最后一個自然段上取消<span>標簽和顯示103.gif圖片。結果是bg樣式中會重復在背景上反復填充103.gif圖片。由于bg樣式中設置了24pt字號，取消字號設置，保持原始<body>標簽里的字號。最后一個自然段的字號從24pt恢復到<body>標簽原來的字號。把h73.html文件另存為h74.html文件，按以上方式修改文件，如下圖所示。學號專業(yè)姓名h74.html1021字號刪除了引用bg樣式1022這兒刪除了照片顯示鏈接最后一個自然段刪除了<span>標簽1023

戴政國老師邀請你們參加師生學習討論群1024所以在<body>標簽里重復顯示背景圖片可以做到瓷磚效果，如上圖所示。10、文本邊框和段落邊框屬性任何一個標簽元素都有四個邊框：上邊框、下邊框、左邊框和右邊框。對于邊框線型有九種：none：無邊框dotted：點線dashed：短線，虛線solid：實線double：雙實線1025groove：有立體感的溝槽線ridge：脊形線inset：內嵌一個立體邊框outset：外嵌一個立體邊框11、ID選擇器自定義css樣式名前面加“.”，而加#號定義了id對象。用#號定義的ID對象不能用class來引用，只能用id來引用，而.號定義的CSS樣式只能用class來引用，不能用id引用.1026在ID選擇器里定義ID對象的方法與CSS定義方法完全相同，并且聲明中的屬性對象也是相同的。1027<styletype="text/css"></style>聲明注釋：屬性名："值"；引用例子：<bodyid="id對象名">1028<html><head><title>ID選擇器</title><styletype="text/css"></style></head>1029<body> <pid="one">ID選擇器1</p> <pid="two">ID選擇器2</p> <pid="two">ID選擇器3</p> <pid="onetwo">ID選擇器4</p></body></html>1030在引用時，用兩個id對象名，這是錯誤的。但是在CSS引用時，可以用兩個對象名。<html><head><title>同時使用兩個class</title><styletype="text/css"></style></head>1031<body> <h4>一種都不使用</h4> <h4class="one">只使用one</h4> <h4class="two">只使用two</h4> <h4class="onetwo">同時使用one和two</h4> <h4>一種都不使用</h4></body></html>1032學號專業(yè)姓名h75.html<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用xhtml標準定義和引用CSS樣式</title>1033<styletype="text/css">.one{ border-top:2pxsolid#F00; border-right:2pxdashed#B915B0; border-left:2pxdouble#FF6633; border-bottom:2pxdotted#1B7628;}#two{ border-to

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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

2012級講義htmlcss第二部分flex builder

文檔簡介

溫馨提示

最新文檔

評論

2012級講義htmlcss第二部分flex builder

文檔簡介

溫馨提示

最新文檔

評論

相關文檔