Web應(yīng)用程序客戶端界面設(shè)計(jì)-第4章

1、第四章 CSS根底 .復(fù)習(xí)第一章運(yùn)用計(jì)算演化主機(jī)/啞終端方式 c/s方式 b/s方式Web運(yùn)用程序任務(wù)原理效力器 閱讀器HTTP協(xié)議復(fù)習(xí)第二章 復(fù)習(xí)第三章 請(qǐng)留意一定要設(shè)復(fù)習(xí)第三章用戶名 性別 Tabindex accessKey經(jīng)過(guò)jsp/asp/php等效力器上的腳本來(lái)處置表單數(shù)據(jù)。目的了解運(yùn)用CSS的優(yōu)點(diǎn)掌握CSS的語(yǔ)法規(guī)那么掌握CSS根本屬性了解款式層疊和承繼為什么需求CSS款式表HTML標(biāo)簽的外觀款式比較單一顏色只需黑白字體類型和大小無(wú)變化款式表的作用相當(dāng)于華美的衣服內(nèi)容一樣外觀不同為什么需求CSS款式表款式表能實(shí)現(xiàn)內(nèi)容與款式的分別，方便團(tuán)隊(duì)開發(fā)程序員寫代碼美工做款式內(nèi)容與款式調(diào)和一

2、致的完好網(wǎng)頁(yè)什么是CSSCSS是層疊款式表Cascading Style Sheets的縮寫，它用于定義HTML元素的顯示方式，是一種格式化網(wǎng)頁(yè)內(nèi)容的技術(shù)。CSS如今曾經(jīng)被大多數(shù)閱讀器所支持，成為網(wǎng)頁(yè)設(shè)計(jì)者必需掌握的技術(shù)之一。W3CWorld Wide Web Consortium 自1996年12月發(fā)布第一個(gè)CSS正式引薦版CSS 1.0以來(lái)，不斷在對(duì)CSS規(guī)范進(jìn)展修訂、晉級(jí)。1999年1月，CSS 2.0 正式引薦版發(fā)布，添加了對(duì)其它媒體打印機(jī)、視覺(jué)設(shè)備、可下載字體、元素定位和表格的支持。最新版本的CSS規(guī)范CSS 3.0正在開發(fā)中。運(yùn)用CSS的優(yōu)點(diǎn) CSS將從根底開場(chǎng)建立直到全面替代傳統(tǒng)

3、Web設(shè)計(jì)方法。W3C組織創(chuàng)建的CSS技術(shù)將替代HTML中用于表現(xiàn)的HTML元素。提高頁(yè)面閱讀速度。運(yùn)用CSS，比傳統(tǒng)的Web設(shè)計(jì)方法至少節(jié)約50%以上的文件尺寸。 縮短改版時(shí)間，降低維護(hù)費(fèi)用。只需簡(jiǎn)單修正幾個(gè)CSS文件就可以重新設(shè)計(jì)一個(gè)有成百上千頁(yè)面的站點(diǎn)。強(qiáng)大的字體控制和排版才干。有了CSS，我們不再需求用font標(biāo)志或者透明的1 px GIF圖片來(lái)控制標(biāo)題，改動(dòng)字體顏色、字體款式等等。CSS非常容易編寫。我們可以象寫HTML代碼一樣輕松地編寫CSS。可以一次設(shè)計(jì)，隨處發(fā)布。他的設(shè)計(jì)不僅僅用于Web閱讀器，也可以發(fā)布在其他設(shè)備上。更好的控制頁(yè)面規(guī)劃。結(jié)合CSS和div元素，可以比傳統(tǒng)的運(yùn)用

4、table元素更好地控制頁(yè)面規(guī)劃。實(shí)現(xiàn)表現(xiàn)和構(gòu)造、內(nèi)容相分別。將網(wǎng)頁(yè)的表現(xiàn)方式部分剝離出來(lái)放在一個(gè)獨(dú)立款式文件中，可以減少未來(lái)網(wǎng)頁(yè)無(wú)效的能夠。更方便搜索引擎的搜索。用只包含構(gòu)造化內(nèi)容的HTML替代嵌套的標(biāo)簽，搜索引擎將更有效地搜索到網(wǎng)頁(yè)的內(nèi)容，并能夠給網(wǎng)頁(yè)一個(gè)較高的評(píng)價(jià)。款式表的根本語(yǔ)法款式表的根本構(gòu)造 P color:red; font-size:30px; font-family:隸書; 聲明文檔款式表終了文檔款式表開場(chǎng)，類型為CSS款式款式規(guī)那么選擇器款式規(guī)那么 P color:red; font-size:30px; font-family:隸書;屬性屬性的值款式表的根本語(yǔ)法款式規(guī)那么

5、 P color:red; font-family:隸書; font-size:24px;靜夜思床前明月光，疑是地上霜。我是郭德剛，低頭思故土。本頁(yè)面中一切的P標(biāo)簽都運(yùn)用了此款式一切的段落都采用P款式，保證風(fēng)格一致用分號(hào)隔開選擇器如何編寫此款式?字體類型為律書、大小24pxCSS屬性單位長(zhǎng)度單位：cm mm in pt 1點(diǎn)=1/72英寸pc 1pc=12點(diǎn)em 當(dāng)前字體中M字母的寬度px 象素ex 當(dāng)前字體中X字母的寬度顏色單位color:rgb(50%,0,50%);color:rgb(255,0,255);color:rgb(#ff0000);Red,blueURL單位backgroun

6、d-image:url(“1.gif);設(shè)置元素字體設(shè)置字體稱號(hào)font-family:verdana;設(shè)置字體傾斜程度f(wàn)ont-style:italic normal,italic,oblique設(shè)置字體的變體Font-variant:normal : 正常的字體 small-caps : 小型的大寫字母字體 設(shè)置字重font-weight : normal | bold | bolder | lighter | number 設(shè)置字體大小font-size:larger 12pt縮寫font-style Font-variant font-weight font-size font-fam

7、ily小結(jié)1編寫如以下圖所示效果對(duì)應(yīng)的HTML代碼黑體，字體大小20px字體大小14px，藍(lán)色設(shè)置元素內(nèi)容文本設(shè)置首行縮進(jìn)Text-indent:3em;設(shè)置文本對(duì)齊Text-align:left right center設(shè)置文本修飾方式Text-decoration:none underline下劃線 overline上劃線 line-through刪除線設(shè)置文本陰影特效Text-shadow:black設(shè)置行高Line-height:2em;設(shè)置字間距Letter-spacing:0.1em;設(shè)置元素內(nèi)容文本設(shè)置詞間距Word-spacing:1em;設(shè)置文本大小寫方式Text-trans

8、form:uppercase lowercase設(shè)置空白顯示方式pwhite-space:pre設(shè)置元素字體顏色和背景顏色：color背風(fēng)光:background-color背景圖像:background-image背景圖像能否鋪排:background-repeat圖像隨對(duì)象滾動(dòng)還是固定:background-attachment設(shè)置列表格式(list-style-type)實(shí)心黑點(diǎn) disc空心圓圈 circle方形黑塊 square十進(jìn)制 decimal小寫羅馬數(shù)字 lower-roman大寫羅馬數(shù)字 upper-roman小寫字母 lower-alpha大寫字母 upper-alpha

9、款式規(guī)那么的位置 外部款式表不需求style標(biāo)簽嵌入式款式表p內(nèi)聯(lián)款式屬性名為style舉例:款式表的三類運(yùn)用方式嵌入款式表內(nèi)嵌款式表運(yùn)用格式如下：行內(nèi)嵌入款式表外部款式表文件 款式規(guī)那么 假設(shè)希望本網(wǎng)頁(yè)內(nèi)的一切同類標(biāo)簽都采用一致款式，這時(shí)應(yīng)采用內(nèi)嵌款式。嵌入款式表P font-family:隸書; font-size:18px; color:#FF0000;床前明月光，疑是地上霜。我是郭德剛，低頭思故土?？钍揭?guī)那么一切的段落都采用 P 款式，保證款式一致選擇符款式表內(nèi)聯(lián)款式表 假設(shè)希望某段文字和其他段落文字顯示風(fēng)格不一樣， 該如何處理？ 運(yùn)用行內(nèi)內(nèi)聯(lián)款式表可以處理行內(nèi)內(nèi)聯(lián)款式表設(shè)置屬性 這個(gè)

10、段落運(yùn)用了款式這個(gè)段落按默許款式顯示為標(biāo)簽p指定款式本段標(biāo)簽采用了行內(nèi)款式行內(nèi)內(nèi)聯(lián)款式表靜夜思李白 床前明月光，疑是地上霜。我是郭德剛，低頭思故土。查看源代碼行內(nèi)款式運(yùn)用范圍更小，只適用于某一個(gè)標(biāo)簽，對(duì)其他標(biāo)簽不起作用本段標(biāo)簽采用了行內(nèi)款式外部款式表文件 假設(shè)希望一個(gè)網(wǎng)站中多個(gè)頁(yè)面的款式堅(jiān)持一致， 如何處理？運(yùn)用外部款式表文件款式表可以處理外部款式表文件根據(jù)款式文件與網(wǎng)頁(yè)的關(guān)聯(lián)方式又分為：鏈接LINK 外部款式表導(dǎo)入import外部款式表款式文件.css網(wǎng)頁(yè)2網(wǎng)頁(yè)3網(wǎng)頁(yè)1鏈接LINK 外部款式表運(yùn)用LINK鏈接標(biāo)簽 :第一步：創(chuàng)建款式表文件newstyle.css 第二步：把款式文件和網(wǎng)頁(yè)綁定

11、第三步：閱讀查看各網(wǎng)頁(yè)款式文件：newstyle.css Link_Outcss1.htmlLink_Outcss2.html 引入的款式文件導(dǎo)入import外部款式表運(yùn)用import導(dǎo)入 ，語(yǔ)法： import newstyle.css;引入款式表文件了解款式表的層疊 層疊款式表背后的概念是，多個(gè)款式定義可以層疊向下經(jīng)過(guò)多個(gè)層次來(lái)影響文檔?？钍蕉x的多個(gè)層次可以運(yùn)用于任何文檔。層次的優(yōu)先級(jí)別從小到大依次為：用戶閱讀器的設(shè)置外部款式表嵌入式款式表內(nèi)聯(lián)款式創(chuàng)建款式規(guī)那么 了解款式表的第一步就是了解如何正確編寫款式規(guī)那么。每個(gè)款式規(guī)那么分為選擇器和規(guī)那么本身兩個(gè)部分，選擇器用于規(guī)那么所運(yùn)用的元素，

12、規(guī)那么本身那么指定格式。選擇器元素選擇器類選擇器ID選擇器 包含選擇器通配選擇器 偽類選擇器偽元素選擇器 元素選擇器HTML元素是最典型的選擇器類型，任何一個(gè)HTML元素都可以做為選擇器 元素 屬性: 值; h1 color: red; h1 color: #ff0000; h2 color: #FF0000; h1, h2 color: #ff0000; 類選擇器1 假設(shè)想要把某一個(gè)款式運(yùn)用到不同的HTML元素上，可以采用類選擇器來(lái)定義，然后在不同標(biāo)簽中運(yùn)用它們。 .類名 屬性: 值; html 類選擇器例如1.tt font-size:10pt; font-family:黑體; color

13、:#800080; font-weight:bold; 例如一 /*p標(biāo)簽運(yùn)用名字為tt的類層疊款式表*/例如二 /*h1標(biāo)簽也運(yùn)用名字為tt的類層疊款式表*/類選擇器2 假設(shè)我們希望為某一個(gè)HTML元素創(chuàng)建多個(gè)款式規(guī)那么，可以在類名前面加上該元素的稱號(hào) 元素.類名 屬性: 值; 類選擇器例如2 h1.left color:blue; h1.right color:red; 第一行 /*h1運(yùn)用名為h1.left的類款式規(guī)那么/第二行 /*h1也運(yùn)用名為h1.right 的類款式規(guī)那么*/ID選擇器 除了運(yùn)用類選擇器的方式定義一個(gè)款式以外，還可以運(yùn)用ID定義款式。ID與類選擇器的概念類似，只是

14、ID選擇器只能被援用一次，而類選擇器可以被多次援用。要將一個(gè)ID包括在款式定義中，運(yùn)用一個(gè)井號(hào)#作為ID稱號(hào)的前綴 #id名 屬性: 值; #red color: red; 歡迎運(yùn)用id選擇器ID選擇器和類選擇器的選擇能否在一個(gè)文檔內(nèi)反復(fù)運(yùn)用能否可以運(yùn)用組合類選擇器ID選擇器比類選擇器優(yōu)先級(jí)高包含選擇器假設(shè)需求為位于某個(gè)標(biāo)志符內(nèi)的元素設(shè)置特定的款式規(guī)那么，那么應(yīng)將選擇器指定為具有上下文關(guān)系的HTML標(biāo)志 h1 b color:blue; /*留意h1和b之間以空格分隔*/通配選擇器 通配選擇器可以用來(lái)匹配文檔中任何元素。通配選擇器是一個(gè)星號(hào)* * color: red; 偽類及偽元素選擇器 偽

15、類和偽元素是特殊的類和元素，能自動(dòng)地被支持CSS的閱讀器所識(shí)別。偽類區(qū)別開不同種類的元素。例如，visited links已訪問(wèn)的鏈接和active links可激活鏈接描畫了兩個(gè)錨點(diǎn)的類型。偽元素指元素的一部分，例如段落的第一個(gè)字母。選擇器:偽類 屬性: 值; 選擇器:偽元素 屬性:值; a:link color: #FF0000; text-decoration: none /* 未訪問(wèn)的鏈接 */a:visited color: #00FF00; text-decoration: none /* 已訪問(wèn)的鏈接 */a:hover color: #FF00FF; text-decorati

16、on: underline /* 鼠標(biāo)在鏈接上 */a:active color: #0000FF; text-decoration: underline /* 激活鏈接 */ 偽類及偽元素選擇器(續(xù)) 選擇器.類:偽類 屬性:值; 選擇器.類:偽元素 屬性:值; a.red:link color: reda.red:visited color: bluea.blue:link color: yellowa.blue:visited color: black如今運(yùn)用在不同的鏈接上：這是第一組鏈接這是第二組鏈接有時(shí)為了給不同的鏈接添加不同的效果，我們可以將類與偽類配合起來(lái)實(shí)現(xiàn)，格式如下：編寫如以

17、下圖所示效果對(duì)應(yīng)的HTML代碼小結(jié)2細(xì)邊框solid款式無(wú)下劃線的超銜接款式鼠標(biāo)在超鏈接上懸停時(shí)，超鏈接文本變?yōu)榧t色p font-size: 12ptp:first-letter font-size: 200%;The first words of an article. 偽類及偽元素選擇器(續(xù)) 款式承繼承繼從文檔樹中有些css屬性會(huì)從祖先元素傳到后代元素不能被承繼的屬性：border/margin/padding/backgroud.Font-size不能直接承繼款式表的層疊默許的優(yōu)先級(jí)閱讀器默許款式外部款式表嵌入款式內(nèi)聯(lián)款式款式的優(yōu)先級(jí)算法Css的重要性和來(lái)源 ！importantCss規(guī)那么的特殊性Css規(guī)那么在文檔中出現(xiàn)的順序總結(jié)CSS是層疊款式表Cascading Style Sheets的縮寫，它用于定義HTML元素的顯示方式，是一種格式化網(wǎng)頁(yè)內(nèi)容的技術(shù)。CSS款式由款式規(guī)那么組成，一切的款式規(guī)那么的語(yǔ)法遵照如下一樣的根本格式：選擇器 屬性1: 值1; 屬性2: 值2; . 屬性N: 值N; 一條款式規(guī)那么由一個(gè)選擇器和一個(gè)或者多個(gè)