網頁設計:CSS樣式表格應用.ppt

(38頁)

'網頁設計:CSS樣式表格應用.ppt'
第四章 CSS樣式表應用主講:鐘杰卓0本章內容概述CSS簡介1CSS語法基礎2CSS布局基礎3CSS布局實例4CSS濾鏡應用514.1 CSS簡介CSS的全稱是Cascading Style Sheet,通常稱為“層疊樣式表”。是網頁設計不可缺少的工具之一。 CSS是一組樣式,樣式的屬性在HTML元素中一次出現,并顯示在瀏覽器中。樣式可以定義在HTML文檔的標記里,也可以放在外部附加文檔中,一個樣式表文檔可以用于多個頁面,甚至是整個站點,因此具有更好的易用性和擴展性。 CSS可以減少開發和維護HTML文檔所用的時間。增加了Web站點中文檔間的靈活性。24.2 CSS語法基礎完成了網頁框架的構建,下一步就應該使用CSS來布局和修飾了。使用CSS的方法可以簡單概括為:選擇符:表示要定義樣式的對象,可以是元素本身,也可以是一類元素或指定名稱的元素。選擇屬性:制定選擇符所具有的屬性,它是CSS的核心。CSS 2一共定義了150多個屬性,其中大部分屬性是用于任何選擇符。定義屬性值:數值表示(25px)、百分比表式(20%)、范圍表示(top、right) Selector { property:value; property:value;}body { color:#333; background-color:#eee;}34.2 CSS語法基礎CSS選擇符類型選擇器: 類型選擇符就是網頁元素本身,定義時直接使用元素名稱,如定義段落樣式,可以選擇p元素,即把p作為選擇符。在HTML和XHTML中,所有的元素都可以作為類型選擇符來進行定義: 定義了類型選擇符,所定義的屬性會影響引用這個樣式的所有該元素的顯示效果。使用恰當會非常省力,但如果考慮不周,貿然定義會給網頁設計增加無窮煩惱。html { /**/color : #f60 ;font-size:14px ;} Body { /**/Margin-left:0px; Margin-top:0px;}Td { /**/Font-family:”宋體”,”黑體”;}44.2 CSS語法基礎id選擇符: CSS中的id是作為網頁中元素的“身份證”來使用的。因此它是唯一的,不同元素的id值不能重復。使用id選擇器能夠擴展HTML和XHTML元素的顯示效果。為每個元素的具體對象定義不同的樣式,方便了用戶更加精細地控制頁面。 當使用id選擇符時,應先為元素定義一個id屬性: 在樣式表中,需要使用 # 號進行標識:#lefttable {color : #f60 ;font-size:14px ; border:1pt #999 solid;} ……54.2 CSS語法基礎class選擇符: class是一個集合名次,意味著在一個文檔中可以為不同類型的元素定義相同的類名。是先把具有相同樣式的元素統一為一類。使用class選擇符可以實現代碼簡化的目的,節約了了CSS代碼的編寫,增強了代碼的可讀性。 當使用class選擇符時,首先應為每個元素定義class屬性: 在樣式表中,需要使用 . 號進行標識:.red {color : #ff0000;} 64.2 CSS語法基礎群選擇符: 群選擇符不是一種選擇符的類型,而是一種選擇符的使用方法。當多個對象定義了相同的樣式時,可以把它們分成一組,以便簡化代碼讀寫,選擇符分組,可以用逗號把同組內不同對象分割: 派生選擇符: 可以使用派生選擇器給一個元素里的子元素定義樣式,例如,給li下面的子元素a定義文字大小和顏色的樣式:.dh1 a {font-size:12px; color:#333333; } p, td, li { font-size:12px; }74.2 CSS語法基礎偽類: CSS中用四個偽類來定義鏈接的樣式,分別是:a:link、a:visited、a:hover和a : active a:link { /* 定義超級鏈接的默認樣式 */ font-size:12px; color:#c00; text-decoration:none; }a:visited { /* 定義訪問過的鏈接樣式 */ font-size:12px; color:#c00; text-decoration:none; }a:hover { /* 定義鼠標經過的鏈接樣式 */ font-size:12px; color:#f30; text-decoration:underline; }a:active { /* 定義鼠標按下的鏈接樣式 */ font-size:12px; color:#c00; text-decoration:none; }84.2 CSS語法基礎在網頁中添加CSS的方法 CSS樣式可以以多種方式靈活地應用到設計的頁面中,選擇方法根據設計的不同要求來指定。行內樣式表: 指將CSS樣式混合在HTML標簽里使用,行內樣式由HTML元素的style屬性支持,只需要將CSS代碼用分號隔開,書寫在style=“”之中既可。 此做法是先了CSS對元素的精確控制,但是沒有很好地將表現與內容分離,所以不推薦這樣的用法。94.2 CSS語法基礎內部樣式表: 內部樣式表也將CSS樣式編寫到頁面中,不同的是,內部樣式可以將樣式統一放置在一個固定的位置。這種CSS樣式控制的內容一般位于HTML文件的頭部,即標簽內,并以開始,以結束。 104.2 CSS語法基礎鏈接外部樣式表: 鏈接外部樣式表是CSS應用的首選形式,將CSS樣式代碼單獨編寫在一個獨立文件中,由頁面進行調用,多個網頁可以同時使用一個樣式表文件。 Style.css文件內容: Body{Background-color:#eee。省略部分。height:160px; width:260px; margin:60px; padding:60px; border:solid 60px #aaa; background-image:url(box.jpg); background-color:#CC99CC;} 254.3 CSS布局基礎CSS盒模型margin-leftmargin-rightmargin-topmargin-bottomborder-leftborder-rightborder-topborder-bottompadding-leftpadding-rightpadding-toppadding-bottomwidthheight264.3 CSS布局基礎盒模型的類型 CSS把盒模型分為兩種基本形態:Block(塊狀)和Inline(內聯或行內)。在默認狀態下,塊狀元素的寬度為100%,而且后面隱藏附帶有換行符,使塊狀元素始終占據一行。 如:div、p 、table 、ul 、li 、ol 、dl 、h1-h6……內聯元素沒有高度和寬度,因此也就沒有固定的形狀,定義它的width和height屬性無效。內聯元素可以在行內自由流動,但它會遵循盒模型的基本規則,可以定義邊界、補白、邊框及背景。 如:a 、b 、em 、span 、img……274.3 CSS布局基礎盒模型的顯示類型可以使用display屬性來定義。任何元素都可以通過display屬性改變默認顯示類型。display屬性的選項值如下:block:塊狀顯示,在元素后面添加換行符,也就是說,其他元素不能在其后并列顯示。none:隱藏顯示,此聲明不會為被隱藏的元素保留位置。inline:內聯顯示,在元素后面刪除換行符,多個元素可以在一行內并列顯示。list-item:具有塊狀特征的列表項目顯示,可添加可選項目標志。284.3 CSS布局基礎布局模型 布局模型與盒模型一樣都是CSS最基本、最核心的概念,CSS包含3種基本的布局模型:Flow、Layer和Float1. Flow Model(流動模型) 流動模型是HTML默認布局模型,在此模型中,元素本身是被動的,隨著文檔流自上而下按順序動態分布。流動布局只能根據元素排列的先后順序來決定分布位置,要改變某個元素的位置,只能通過改變它在HTML文檔流中的分布位置。同時這種模式又是活動的,它的位置隨時發生變化,當我們在一個元素前面添加另一個元素,它的位置會向后推移。294.3 CSS布局基礎2. Layer Model(層模型) Layer將頁面的內容引入層,希望像圖像編輯器那樣精確定位網頁元素,擺脫HTML元素自然流動帶來的弊端。然而網頁永遠是一個活動的窗口,沒法預知不同瀏覽者所使用的窗口大小,同時大部分網頁本身的大小也是無法預測和控制的。3. Float Model(浮動模型) 浮動模型汲取了前兩者的優點,希望在流動和固定之間取得一個平衡,實現網頁布局的自適應能力。304.3 CSS布局基礎流動布局模型流動布局模型的特征 任何沒有具體定義定位方式的元素,默認都呈現流動布局模式塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布內聯元素都會在所處的包含元素內從左到右水平分布顯示。314.3 CSS布局基礎層布局模型 層布局模型中最核心的技術是元素的定位類型。該屬性取值可以包括:static、absolute、fixed和relativestatic:不定位,遵循默認的流動模型。absolute:絕對定位,將元素從文檔流中拖出來,使用left\right\top\bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。fixed:固定定位。元素本身是固定的,不會隨瀏覽器窗口的滾動條滾動而變化。relative:相對定位。通過left\right\top\bottom屬性確定元素在正常文檔流中的偏移位置。div { position:absolute; }324.3 CSS布局基礎絕對定位包含塊 CSS包含塊是絕對定位的基礎。包含塊是對絕對定位元素提供坐標偏移和顯示范圍的參照物,即確定絕對定位的偏移起點的參考。默認狀態下,body元素就是一個大的包含塊,所有絕對定位的元素都是根據窗口來確定自己所處的位置和百分比大小顯示的。但是如果我們定義了某個元素為包含塊后,對于包含的絕對定位元素來說,就會根據最接近的具有定位功能的上級包含元素來決定自己的顯示位置。 一般情況下,用position屬性來定義任意包含塊,position屬性有效取值包括absolute、fixed、relative334.3 CSS布局基礎浮動布局模型 任何元素在默認情況下都是不能浮動的,但是可以用CSS定義為浮動。浮動布局模型的特征任何定義為float的元素都會自動被設置為一個塊狀元素顯示,這樣就可以為浮動元素定義width和height屬性。浮動模型不會與流動模型發生沖突。當文檔定義為浮動布局時,它在垂直方向上應該還處于文檔流中,既不會脫離正常的文檔流任意浮動。浮動元素始終位于包含元素內,不會游離于外,或破壞包含元素div { float:left; /* 取值還包括right、none */}344.4 CSS擴展濾鏡濾鏡可以用來改變圖象或文字外觀,如加陰影、圖像透明效果等。增加元素的視覺效果。不透明度:alpha 不透明度alpha濾鏡標記可以設置圖像或文字的不透明度。其屬性參數如下表:屬 性屬性描述opacity設置對象的不透明度,取值范圍0~100,默認為0,即完全透明finishopacity可選項,設置對象透明漸變的結束透明度,取值范圍0~100style用于指定漸變的形狀,0為無漸變,1為直線漸變,2為圓型漸變,3為矩形漸變startx透明漸變開始點的水平坐標,其數值作為對象寬度的百分比處理,默認為0starty透明漸變開始點的垂直坐標finishx透明漸變結束點的水平坐標finishy透明漸變結束點的垂直坐標354.3 CSS布局基礎364.4 CSS擴展濾鏡動感模糊:blur對顏色進行透明處理:chroma設置陰影:dropshadow對象的翻轉:flipH、flipV發光效果:glow灰度處理:gray 反相:invertX光片效果:Xray遮罩效果:mask波形濾鏡:wave 37
關 鍵 詞:
css 樣式 表格 網頁設計 應用
 天天文庫所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
關于本文
本文標題:網頁設計:CSS樣式表格應用.ppt
鏈接地址: http://www.476824.live/p-51617142.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服點擊這里,給天天文庫發消息,QQ:1290478887 - 聯系我們

本站為“文檔C2C交易模式”,即用戶上傳的文檔直接賣給(下載)用戶,本站只是中間服務平臺,本站所有文檔下載所得的收益歸上傳人(含作者)所有【成交的100%(原創)】。本站是網絡服務平臺方,若您的權利被侵害,侵權客服QQ:1290478887 歡迎舉報。

[email protected] 2017-2027 http://www.476824.live 網站版權所有

粵ICP備19057495號 

收起
展開
球探网即时蓝球比分 贵州快3今日开奖视频 仙牛网配资 东方6十1开奖结果查询七乐彩 河南快三在哪下载安装 期货股票融资 河南快3走势图表 彩票玩法大乐透 浙江20选5开奖官网 如何下载股票数据 河南22选5基本走势图近300期