網(wǎng)站設(shè)計與建設(shè)15課件_第1頁
網(wǎng)站設(shè)計與建設(shè)15課件_第2頁
網(wǎng)站設(shè)計與建設(shè)15課件_第3頁
網(wǎng)站設(shè)計與建設(shè)15課件_第4頁
網(wǎng)站設(shè)計與建設(shè)15課件_第5頁
已閱讀5頁，還剩12頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第15章層疊式樣式表CSS第三部分網(wǎng)站設(shè)計技術(shù)第15章層疊式樣式表CSS第三部分網(wǎng)站設(shè)計技術(shù)1CSS是CascadingStyleSheets（層疊樣式表單）HTML的Tag主要是定義網(wǎng)頁的內(nèi)容(Content)，而CSS決定這些網(wǎng)頁內(nèi)容如何顯示(Layout)。創(chuàng)建層疊樣式表的四種方法，CSS是CascadingStyleSheets（層疊樣215.1.樣式表是放置在網(wǎng)頁HEAD部分的格式指令的集合允許改變一個單一文件能改變整個網(wǎng)站的外觀通過改變樣式表可以改變網(wǎng)站的外觀W3CRecommendationforHTML3.2開始支持樣式表CSS1級規(guī)范和CSS2級規(guī)范15.1.樣式表是放置在網(wǎng)頁HEAD部分的格式指令的集合315.2層疊樣式表CSS層疊樣式表（CascadingStylesheet）指的是在一個單一的文件中使用多個樣式定義。一個樣式表文件可以鏈接到網(wǎng)站的每一個文檔，因此可以控制整個網(wǎng)站的外觀。但是在任何一個鏈接的文檔中的樣式定義會覆蓋鏈接的樣式表。術(shù)語Cascading（層疊）指的是繼承或者在鏈接的、導(dǎo)入的、內(nèi)嵌的以及內(nèi)聯(lián)樣式之間的等級關(guān)系。/TR/REC-CSS1。一個CSS1測試套件/style/CSS/Test/。15.2層疊樣式表CSS層疊樣式表（CascadingS415.3定義和使用樣式

4種方法：外部樣式表文件鏈接導(dǎo)入樣式信息內(nèi)部樣式表內(nèi)嵌樣式15.3定義和使用樣式4種方法：53.內(nèi)部樣式表<html><head><styletype="text/css"><!--a{text-decoration:none;/*下劃線：underline;none*/background:green;/*背景色*/ color:blue;/*前景色*/corsur:hand;font-size:20pt}/*字體大小*/body{text-decoration:underline;background-color:#ddccff;color:blue;font-weight:bold}--></style></head><body>使用CSS的一個簡單實例。<br></body></html>3.內(nèi)部樣式表<html>6內(nèi)部樣式表是寫在HTML的<head></head>里面的，只對所在的網(wǎng)頁有效。使用內(nèi)部樣式表可能是使用樣式最簡單的方法。使用<STYLE>標記符在HTML文檔的head部分放置信息。樣式信息包含在注釋標記符“<!---->”中內(nèi)部樣式表是寫在HTML的<head></head>里面的，74.使用內(nèi)嵌樣式內(nèi)嵌樣式是混合在HTML標記里使用的，用這種方法，可以很簡單的對某個元素單獨定義樣式，只對所在的Tag有效。內(nèi)嵌樣式的使用是直接在HTML標記里加入style參數(shù)，而style參數(shù)的內(nèi)容就是CSS的屬性和值只適合用于偶然的樣式改變。最優(yōu)先4.使用內(nèi)嵌樣式8<html><head><title>CSS的一個簡單實例</title><styletype="text/css"><!--body{text-decoration:underline;background-color:#ddccff;color:blue;font-weight:bold}--></style></head><body>使用CSS的一個簡單實例。<br><spanstyle="background-color:#ff0000;color:yellow;font-size:30pt">這是一個使用CSS修飾文字的簡單實例</span></body></html><html>9外部文件*.css鏈入導(dǎo)入外部文件*.css10鏈接來自一個樣式表<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>CSS的一個簡單實例</title><linkrel=stylesheettype="text/css"href="sample-1505.css"></head><body><ahref="">計算機科學(xué)與技術(shù)學(xué)院</a><br><spanstyle="background-color:#ff0000;color:yellow;font-size:30pt">這是一個使用CSS修飾文字的簡單實例</span></body></html>一個CSS文件鏈接來自一個樣式表<html>一個CSS文件11鏈接來自一個樣式表(續(xù))sample-1505.css<styletype="text/css"><!--a{text-decoration:none;/*下劃線：underline;none*/background:green;/*背景色*/ color:blue;/*前景色*/corsur:hand;font-family:隸書;font-size:20pt}/*字體大小*/body{text-decoration:underline;background-color:#ddccff;color:blue;font-weight:bold}--></style>鏈接來自一個樣式表(續(xù))sample-1505.css<st12導(dǎo)入樣式信息：僅適于IE<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>CSS的一個簡單實例</title><styletype="text/css">@importurl("sample-1505.css"); h1{color:red}</style></head><body><ahref="">計算機科學(xué)與技術(shù)學(xué)院</a><br><spanstyle="background-color:#ff0000;color:yellow;font-size:30pt">這是一個使用CSS修飾文字的簡單實例</span><h1>山東大學(xué)</h1></body></html>導(dǎo)入樣式信息：僅適于IE<html>1315．4可變的樣式元素表15.11．樣式繼承層疊性就是繼承性，樣式表的繼承規(guī)則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素當樣式表繼承遇到?jīng)_突時，總是以最后定義的樣式為準。樣式(Styles)的優(yōu)先級依次是內(nèi)嵌樣式、內(nèi)部樣式、外部樣式、瀏覽器缺省。15．4可變的樣式元素表15.114CSS2特性Mediatypes（媒體類型）根據(jù)文檔是在屏幕上顯示的，是打印出來的，用語音合成器展示的，還是使用盲文設(shè)備展示的來決定文檔外觀?？梢跃碌馗淖冏煮w類型使它可以在具體的環(huán)境中最利于閱讀（例如，sansserif適于在屏幕上閱讀，而serif適合在印刷媒體上閱讀Pagedmedia（分頁媒體）CSS2用限定寬度和高度的頁框，決定了頁媒體（例如幻燈片）的顯示。該特性提供了一個區(qū)域，作為傳輸?shù)酱蛴∶襟w上的信息的分頁符。Auralstylesheets（聽覺樣式表）使用聽覺樣式表可以優(yōu)化聽覺障礙用戶語音合成器的使用。CSS屬性頁允許作者改變合成語音的質(zhì)量（聲音類型、頻率、變形等）Bidirectionaltext（雙向文本）對雙向文本的支持對于顯示國際組織的其他語言信息很重要。例如，有時Arabic和Hebrew語言使文檔呈現(xiàn)混合的方向性。CSS2屬性定義了算法來保證正確的雙向解釋。Fontsupport（字體支持）在CSS1中，假設(shè)客戶端支持所有的字體。換句話，為了正確地產(chǎn)生頁面，在用戶系統(tǒng)中必須加載字體。與此對照，CSS2允許改進的客戶端字體匹配，允許字體合成和漸進的生成，允許從Web中下載字體。Relativeandabsolutepositioning（相對和絕對定位）CSS2去除了對瀏覽器私有的<LAYER>標記符的需求，它提供了一個z軸允許在頁面上堆放元素，從而顯示。樣式表的絕對定位允許你形成類似框架的頁面CSS2特性Mediatypes（媒體類型）154．CSS定位CSS定位主要是在頁面的布局和控制上進行定義，可使頁面從這兩個方面都展現(xiàn)的非常完美，更加富有動感。所謂相對定位是指允許元素在相對于文檔布局的原始位置上進行偏移；而絕對定位允許元素與原始的文檔布局分離且任意定位。實現(xiàn)CSS的定位最終還是要靠屬性，CSS的定位屬性共有9個，分別是：position、left、top、width、height、overflow、z-index、visibility和position4．CSS定位169.樣式類連結(jié)：<span>或<div>標志局部使用樣式單<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>CSS內(nèi)聯(lián)樣式</title><styletype="text/css">@importurl("sample-1505.css"); h1{color:red}；

.mycolor{color:green;font-family:幼圓}</style></head><body><ahref="">計算機科學(xué)與技術(shù)學(xué)院</a><br><spanstyle="background-c

溫馨提示

  • 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)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論