網站設計與建設15課件_第1頁
網站設計與建設15課件_第2頁
網站設計與建設15課件_第3頁
網站設計與建設15課件_第4頁
網站設計與建設15課件_第5頁
已閱讀5頁，還剩12頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

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

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

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

溫馨提示

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

評論

0/150

提交評論