人機(jī)交互與界面設(shè)計(jì)-第4章

上傳人：6*** IP屬地：湖北上傳時(shí)間：2023-01-14 格式：PPT 頁(yè)數(shù)：57 大小：1.36MB 積分：28 舉報(bào) 版權(quán)申訴

已閱讀5頁(yè)，還剩52頁(yè)未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡(jiǎn)介

第4章層疊樣式表CSS2023/1/1414

頁(yè)面設(shè)計(jì)

4.1頁(yè)面設(shè)計(jì)概述4.2DHTML簡(jiǎn)介

4.3層疊樣式表CSS2023/1/1424.1頁(yè)面設(shè)計(jì)概述

Web網(wǎng)站開發(fā)的全過(guò)程大致分為5個(gè)階段：策劃與定義、設(shè)計(jì)、開發(fā)、測(cè)試和發(fā)布。首先要根據(jù)建站目的和定位進(jìn)行策劃與定義，確定網(wǎng)站風(fēng)格、欄目、布局方式等，然后進(jìn)行頁(yè)面設(shè)計(jì)和后臺(tái)程序開發(fā)。頁(yè)面設(shè)計(jì)包括靜態(tài)頁(yè)面設(shè)計(jì)和動(dòng)態(tài)頁(yè)面設(shè)計(jì)。靜態(tài)頁(yè)面設(shè)計(jì)主要采用HTML來(lái)完成。HTML語(yǔ)言已先后推出了HTML2.0、HTML3.0、HTML3.2、HTML4.0、XHTML及HTML5等多個(gè)版本。HTML4.0將HTML語(yǔ)言推向一個(gè)新高度，該版本倡導(dǎo)兩個(gè)理念：一是將文檔結(jié)構(gòu)和顯示樣式分離，二是更廣泛的文檔兼容性。2023/1/1434.2DHTML簡(jiǎn)介客戶端頁(yè)面的動(dòng)態(tài)特性主要是通過(guò)層疊樣式表（CSS）、腳本程序和HTML4.0來(lái)實(shí)現(xiàn)的，這三者構(gòu)成了動(dòng)態(tài)HTML（DynamicHTML，DHTML）?！皠?dòng)態(tài)”的含義不僅指頁(yè)面中加入了動(dòng)畫、影像或聲音，更重要的是指頁(yè)面應(yīng)具有交互性，可以控制頁(yè)面內(nèi)容的變化。DHTML是一種通過(guò)各種技術(shù)的綜合而得以實(shí)現(xiàn)的概念。DHTML基于HTML語(yǔ)言，利用CSS擴(kuò)展樣式進(jìn)行編排，借助瀏覽器對(duì)象模型概念，用腳本程序?qū)W(wǎng)頁(yè)進(jìn)行動(dòng)態(tài)控制。2023/1/1444.2DHTML簡(jiǎn)介2023/1/145HTML4.0

HTML4.0對(duì)以前版本的標(biāo)記進(jìn)行了擴(kuò)充，它將頁(yè)面中的文字及圖像等都作為對(duì)象來(lái)處理，并可通過(guò)腳本語(yǔ)言程序?qū)ζ涮匦院妥兓枰钥刂啤＿@樣頁(yè)面的內(nèi)容可以根據(jù)用戶的動(dòng)作而變化，大大豐富了“動(dòng)態(tài)”的含義。

4.2DHTML簡(jiǎn)介2023/1/146層疊樣式表（CSS）

CSS（CascadingStyleSheets）是W3C協(xié)會(huì)為彌補(bǔ)HTML在顯示屬性設(shè)定上的不足而制定的一套擴(kuò)展樣式標(biāo)準(zhǔn)。通過(guò)使用CSS，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離，使網(wǎng)頁(yè)設(shè)計(jì)趨于明了、簡(jiǎn)潔。樣式的定義只要改動(dòng)一次，就會(huì)影響到使用該樣式的每一個(gè)元素，樣式提供了一種更新文檔格式以及在多個(gè)文檔之間保持一致的簡(jiǎn)便形式。CSS是一套開放性標(biāo)準(zhǔn)，不僅可用于HTML語(yǔ)言，也可用于其他網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，如XML語(yǔ)言。

目前CSS的版本包括CSS1、CSS2和CSS3。4.2DHTML簡(jiǎn)介2023/1/147腳本語(yǔ)言

腳本語(yǔ)言是DHTML最重要的部分，因?yàn)轫?yè)面中對(duì)象要“動(dòng)”起來(lái)，就必須通過(guò)腳本程序進(jìn)行控制。IE和Netscape瀏覽器在4.0版本及以后都支持對(duì)象概念，即定義瀏覽器是由各種對(duì)象（如Window、Document等）組成的。文件對(duì)象模型DOM（DocumentObjectModel）的核心是將網(wǎng)頁(yè)內(nèi)容，包括文字、圖像、表格和表單等都作為對(duì)象。有了瀏覽器的對(duì)象模型，只要為HTML中的標(biāo)記設(shè)定一個(gè)標(biāo)識(shí)符（ID），就可將所標(biāo)識(shí)的內(nèi)容作為對(duì)象在腳本程序中使用。4.2DHTML簡(jiǎn)介2023/1/148【例2-14】一個(gè)DHTML簡(jiǎn)例。<html><head><title>DHTML簡(jiǎn)例</title></head><body><spanid="s1"onMouseOver="s1.style.color='red'"onMouseOut="s1.style.color='black'">這是使用了DHTML的一個(gè)簡(jiǎn)例。</span></body></html>

4.3層疊樣式表CSS2023/1/149樣式是對(duì)網(wǎng)頁(yè)中的元素（字體、段落、圖像、列表等）屬性的整體概括，即描述所有網(wǎng)頁(yè)對(duì)象的顯示形式，如設(shè)置文字大小、顏色，圖片大小、邊框等。層疊是指樣式之間可以堆疊或相互覆蓋。當(dāng)存在多個(gè)樣式定義時(shí)，將依據(jù)層次的先后來(lái)處理樣式的繼承關(guān)系。4.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式表的作用是通知瀏覽器如何呈現(xiàn)文檔，樣式表的定義是CSS的基礎(chǔ)。

【例2-15】一個(gè)使用CSS對(duì)文字顯示特性進(jìn)行控制的HTML文件。<html><head><title>CSS示例</title><metahttp-equiv="content-type"content="text/html;charset=gb2312"><styletype="text/css">h1{font-family:"隸書","宋體";color:#ff8800}.text{font-family:"宋體";font-size:14pt;color:red}</style></head><bodytopmargin="4"><h1>這是一個(gè)CSS示例！</h1><spanclass="text">這行文字應(yīng)是紅色的。</span></body></html>

2023/1/14104.3層疊樣式表CSS2023/1/14114.3.1樣式表的定義和引用樣式表定義

CSS樣式表定義的基本語(yǔ)法為：選擇符{規(guī)則表}

選擇符是指引用樣式的對(duì)象。選擇符可以是一個(gè)或多個(gè)HTML標(biāo)記（各個(gè)標(biāo)記之間以逗號(hào)分開），也可以是類選擇符、ID選擇符或上下文選擇符。規(guī)則表是由一個(gè)或多個(gè)樣式屬性組成的樣式規(guī)則，各個(gè)樣式屬性間由分號(hào)隔開，每個(gè)樣式屬性的定義格式為：樣式名:值樣式定義中可以加入注解，格式為：/*字符串*/4.3.1樣式表的定義和引用樣式表定義

樣式定義表的例子：①p{font-family:"宋體";color:darkblue;background-color:yellow;font-size:9pt;/*字體大小*/}②h1,h2{font-family:"隸書","宋體";color:#ff8800;text-align:center;}例①定義了一個(gè)樣式表供HTML文件的<p>標(biāo)記使用。例②定義了一個(gè)樣式表供HTML文件的<h1>和<h2>標(biāo)記使用。在例②中，選擇符由兩個(gè)HTML標(biāo)記組成，表示兩種對(duì)象均遵循該樣式定義。

2023/1/14124.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

樣式引用的方式主要有以下4種：（1）鏈接到外部樣式表（2）引入外部樣式表（3）嵌入樣式表（4）內(nèi)聯(lián)樣式2023/1/14134.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

（1）鏈接到外部樣式表（簡(jiǎn)稱鏈接方式）如果多個(gè)HTML文件要共享樣式表（這些頁(yè)面的顯示特性相同或十分接近），則可將樣式表定義為一個(gè)獨(dú)立的CSS樣式文件，使用該樣式表的HTML文件在頭部用<link>標(biāo)記鏈接到這個(gè)CSS樣式文件即可。

鏈接到外部樣式表的方法最具伸縮性，只要修改一個(gè)外部樣式表，就能影響大量文檔，在使用時(shí)應(yīng)作為首選方法。這種方式定義的樣式在整個(gè)頁(yè)面范圍內(nèi)有效。2023/1/14144.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

【例2-16】鏈接到外部樣式表示例。將樣式定義存放于文件style.css，文件內(nèi)容為：h1{font-family:"隸書","宋體";color:#ff8800;}.text{font-family:"宋體";font-size:14pt;color:red;}p{background-color:yellow;color:#000000;}在HTML文件中引用樣式表style.css，html文檔內(nèi)容為：<head><linkrel="stylesheet"type="text/css"href="style.css"media="screen"></head><bodytopmargin="4"><h1>這是一個(gè)鏈接外部CSS文件的示例！<h1><spanclass="text">這行文字應(yīng)是紅色的。</span><p>這一段的底色應(yīng)是黃色。</p></body></html>

2023/1/14154.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

（2）引入外部樣式表（簡(jiǎn)稱引入方式）這種方式在HTML文件的頭部<style>、</style>標(biāo)記之間，利用CSS的@import聲明引入外部樣式表。這種方式定義的樣式在整個(gè)頁(yè)面范圍內(nèi)有效。格式為：<style>@importurl("外部樣式文件名");......</style>2023/1/14164.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

【例2-17】引入外部樣式表示例。<styletype="text/css"></style>注釋符的作用是使不支持CSS的瀏覽器忽略樣式表定義。<style>標(biāo)記的屬性type，指明樣式的類別。

2023/1/14174.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

引入外部樣式表和鏈接外部樣式表的區(qū)別：引入外部樣式表在瀏覽器下載HTML文件時(shí)，將樣式文件的全部?jī)?nèi)容復(fù)制到@import關(guān)鍵字所在的位置，以替換該關(guān)鍵字。

鏈接外部樣式表在瀏覽器下載HTML文件時(shí)，并不進(jìn)行替換，而僅在HTML文件體部引用CSS樣式文件的某個(gè)樣式時(shí)，瀏覽器才鏈接樣式文件，讀取需要的內(nèi)容。

2023/1/14184.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

（3）嵌入樣式表利用<style>標(biāo)記將樣式表嵌入HTML文件的頭部。【例2-18】嵌入樣式表示例。<html>

<head><styletype="text/css">h1{font-family:"隸書","宋體";color:#ff8800}.text{font-family:"宋體";font-size:14pt;}</style></head>

<body>.....</body></html>2023/1/14194.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

（4）內(nèi)聯(lián)樣式這種方式是在HTML標(biāo)記中引用樣式定義，方法是將標(biāo)記的style屬性值賦為所定義的樣式規(guī)則。樣式是在標(biāo)記內(nèi)部使用的，稱為“內(nèi)聯(lián)樣式”?！纠?-19】?jī)?nèi)聯(lián)樣式表示例。<h1style="font-family:‘隸書’,‘宋體’;color:#ff8800;">這是CSS示例！</h1><pstyle="color:red;background-color:yellow;">......</p><bodystyle="font-family:‘宋體’;font-size:12pt;background:white;">樣式定義的作用范圍僅限于此標(biāo)記范圍之內(nèi)。

2023/1/14204.3層疊樣式表CSS4.3.1樣式表的定義和引用樣式引用

（4）內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式定義的作用范圍僅限于使用內(nèi)聯(lián)樣式的標(biāo)記范圍之內(nèi)。內(nèi)聯(lián)樣式主要應(yīng)用于樣式僅適用于單個(gè)頁(yè)面元素的情況。由于這種方式將樣式和內(nèi)容混在一起，失去了樣式表的優(yōu)點(diǎn)，不推薦使用。2023/1/14214.3層疊樣式表CSS4.3.1樣式表的定義和引用【例2-20】設(shè)有兩個(gè)樣式表文件s1.css、s2.css和一個(gè)HTML文件example_css.htm。

文件s1.css：h2{font-family:"隸書";color:#ff8800;}p{color:black;background-color:yellow;font-size:12pt;}文件s2.css：h3{font-family:"宋體";color:blue;font-style:italic;}.text{font-family:"宋體";font-size:10pt;color:red;}文件example_css.htm：<html><head><title>CSS綜合應(yīng)用示例</title><linkrel="stylesheet"type="text/css"href="s1.css"><styletype="text/css">a:visited{color:blue;}a:link{font-family:"宋體";font-size:9pt;color:red;}a:hover{font-family:"宋體";font-size:12pt;color:green;}@importurl("s2.css");</style></head><bodytopmargin="4"><h2>這是一個(gè)CSS樣式文件綜合示例！</h2><spanclass="text">這行文字應(yīng)是紅色的。</span><p>這一段的底色應(yīng)是黃色。</p><h3>這行文字由s2.css中的樣式控制，應(yīng)是斜體、藍(lán)色。</h3><ahref="example_css.htm">超鏈接</a><br/><br/><divstyle="font-size:14pt;color:darkred;">CSS樣式使用有四種方式：<br/>鏈接、引入、嵌入和內(nèi)聯(lián)樣式</div></body></html>

2023/1/14224.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

隨著CSS的出現(xiàn)，有幾個(gè)新的HTML標(biāo)記和屬性被增加到HTML語(yǔ)言中，以使樣式表與HTML文件更容易地組合起來(lái)，它們是：類選擇符和class屬性id選擇符和id屬性上下文選擇符偽類span標(biāo)記div標(biāo)記

2023/1/14234.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

類選擇符和class屬性

類選擇符（ClassSelector）有兩種定義格式：①標(biāo)記名.類名{規(guī)則1;規(guī)則2;…}用于為同一種標(biāo)記定義不同的樣式。②.類名

{規(guī)則1;規(guī)則2;…}用于為不同標(biāo)記定義相同的樣式?！纠?-21】<head><styletype="text/css">

p{color:red;}

p.back{color:blue;}</style></head><body><p>本段文字用紅色顯示</p><pclass="back">本段文字的顏色為藍(lán)色</p></body>2023/1/14244.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

id選擇符和id屬性id選擇符（IDSelector）定義一個(gè)元素獨(dú)有的樣式。id選擇符的定義格式為：#id名{規(guī)則1;規(guī)則2;…}。id選擇符在HTML文件中只能應(yīng)用一次，而類選擇符可以多次引用?！纠?-22】<head><styletype="text/css">#colorid1{color:green;}</style></head><body><h2id="colorid1">本行使用了id選擇符定義的樣式</h2><h2>本行使用默認(rèn)樣式</h2></body>2023/1/14254.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

上下文選擇符上下文選擇符（ContextualSelector）定義嵌套標(biāo)記的樣式?！纠?-23】<head><styletype="text/css">p{color:green;}pspan{color:red;}</style></head><body><p>本行使用段落標(biāo)記p的樣式<br><span>本行使用嵌套標(biāo)記定義的樣式</span></p></body>2023/1/14264.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

偽類

偽類是特殊的類，可區(qū)別標(biāo)記的不同狀態(tài)。偽類定義格式為：選擇符:偽類{屬性:值}偽類的一個(gè)最常見的應(yīng)用是指定超鏈接（<a>）以不同的方式顯示，如未訪問的鏈接（a:link）、已訪問的鏈接（a:visited）、活動(dòng)鏈接（a:active）和鼠標(biāo)經(jīng)過(guò)的鏈接（a:hover）。【例2-24】a:visited{color:darkred;font-size:15pt;}a:link{font-family:"宋體";font-size:9pt;color:red;}a:hover{font-family:"宋體";font-size:10pt;color:green;}a:active{font-family:"宋體";font-size:20pt;color:blue;}注意：在使用時(shí)，要注意定義的先后順序，否則定義的樣式可能被覆蓋而無(wú)法起作用。2023/1/14274.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

span標(biāo)記

<span>標(biāo)記的目的是允許給出樣式而不必將樣式附加在一個(gè)HTML的原有標(biāo)記（稱為結(jié)構(gòu)元素）上。它的存在純粹是為了應(yīng)用樣式，所以當(dāng)樣式表失效時(shí)它就沒有任何作用了。<span>標(biāo)記可以帶有class、id、style等與CSS樣式有關(guān)的屬性。

【例2-25】<head><styletype="text/css">span{color:red;}</style></head><body><span>本行使用span標(biāo)記定義的樣式</span></body>2023/1/14284.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

div標(biāo)記

<div>是HTML3.2版就有的標(biāo)記，是一個(gè)塊級(jí)元素。<div>和</div>之間可以包含段落、標(biāo)題、表格等其他塊級(jí)元素。<div>將其中包含的內(nèi)容形成一個(gè)獨(dú)立段落。<div>在HTML4.0增加了class、id、style屬性。<div>與<span>的功能基本相同，區(qū)別在于<div>是塊級(jí)元素，而<span>是行元素；<div>可包含<span>，反之則不行。

2023/1/14294.3層疊樣式表CSS4.3.2相關(guān)標(biāo)記和屬性

樣式的繼承

將包含其他標(biāo)記的標(biāo)記稱為父標(biāo)記，則被包含的標(biāo)記就是子標(biāo)記，子標(biāo)記將繼承父標(biāo)記的樣式。

【例2-26】<html><head><title>樣式繼承</title><styletype="text/css"></style></head><body><h2><u>DIV</u>標(biāo)記的作用</h2><u>DIV</u>標(biāo)記的作用</body></html>2023/1/14304.3層疊樣式表CSS4.3.3樣式的繼承和作用順序

樣式的繼承

相對(duì)值繼承方式，即以百分比繼承。【例2-27】：<head><style>p.class1{font-size:12pt;}p.class2{font-size:200%}p.class3{font-size:100%}</style></head><body>

<pclass="class1">第一段</p><pclass="class2">第二段</p><pclass="class3">第三段</p>

</body>2023/1/14314.3層疊樣式表CSS4.3.3樣式的繼承和作用順序

樣式的作用順序

樣式的作用域：指對(duì)一個(gè)標(biāo)記究竟哪個(gè)樣式起作用。

樣式表的作用優(yōu)先順序遵循以下4條原則：①內(nèi)聯(lián)樣式中所定義的樣式優(yōu)先級(jí)最高。②其他樣式表按其在HTML文件中出現(xiàn)或被引用的順序，越在后出現(xiàn)，優(yōu)先級(jí)越高。③選擇符的作用順序由低到高為：上下文選擇符、類選擇符、id選擇符。④未在任何文件中定義的樣式，將遵循瀏覽器的默認(rèn)樣式。

2023/1/14324.3層疊樣式表CSS4.3.3樣式的繼承和作用順序

樣式的作用順序

【例2-28-1】：<html><head><title>樣式的作用順序</title><styletype="text/css">p{color:red;font-size:22pt;}p.c1{color:green;font-size:12pt;}p{font-size:16pt;text-align:center;}</style></head><body><pstyle="color:#ffaa66">第一段</p><pclass="c1">第二段</p><p>第三段</p></body></html>

2023/1/14334.3層疊樣式表CSS4.3.3樣式的繼承和作用順序

樣式的作用順序

【例2-28-2】：<html><head><title>樣式的作用順序</title><styletype="text/css">span.hei1{color:red;}#ind{color:green;}pspan{color:blue;}</style></head>

2023/1/14344.3層疊樣式表CSS<body><p><span>按照上下文定義的顏色是藍(lán)色</span><br/><spanclass="hei1">類選擇符優(yōu)先級(jí)高于上下文選擇符</span><br/><spanclass="hei1"id="ind">id選擇符優(yōu)先級(jí)高于類選擇符</span></p></body></html>

4.3.3樣式的繼承和作用順序

樣式的作用順序

【例2-28-3】：<html><head><title>樣式的作用順序</title><styletype="text/css">span.hei1{color:red;}#ind{color:green;}pspan{color:blue!important;}</style></head>

2023/1/14354.3層疊樣式表CSS<body><p><span>按照上下文定義的顏色是藍(lán)色</span><br/><spanclass="hei1">類選擇符優(yōu)先級(jí)高于上下文選擇符</span><br/><spanclass="hei1"id="ind">id選擇符優(yōu)先級(jí)高于類選擇符</span></p></body></html>

important屬性用于防止定義的樣式被其它相同樣式覆蓋4.3.4CSS屬性

CSS屬性可分為：字體屬性顏色及背景屬性文本屬性方框?qū)傩苑诸悓傩远ㄎ粚傩?023/1/14364.3層疊樣式表CSS4.3.4CSS屬性

字體屬性

字體屬性包括以下主要內(nèi)容：字體（font-family）：指定在文檔上使用的一個(gè)或多個(gè)字體。當(dāng)有多個(gè)字體時(shí)，瀏覽器優(yōu)先選擇排在前面的字體。字號(hào)（font-size）：設(shè)置字體的大小?？梢允褂媒^對(duì)值，如font-size:13pt；也可以使用相對(duì)值表示相對(duì)于當(dāng)前字體的大小調(diào)整字體大小，如font-size:200%。字體風(fēng)格（font-style）：控制文本的斜體樣式。字體加粗（font-weight）：控制文本的粗體樣式。字體變化（font-variant）：控制字體是否以小型大寫的方式顯示。字體綜合設(shè)置（font）：對(duì)上述屬性同時(shí)進(jìn)行設(shè)置。2023/1/14374.3層疊樣式表CSS4.3.4CSS屬性

【例2-29】CSS字體屬性用法示例。

<head><styletype="text/css">body{font-family:"宋體","隸書";}p{font-size:16pt;}p.weight_1{font-weight:100;}p.weight_9{font-weight:900;}p.font_i{font-style:italic;}span{font-size:14pt;}span.font_n{font-variant:normal;}span.font_v{font-variant:small-caps;}span.font_all{font:bolditalic30px;}</style></head><body><pclass="weight_1">第一段</p><pclass="weight_9">第二段（加粗字體）</p><pclass="font_i">第三段（斜體）</p><spanclass="font_n">ABC是正常顯示，后面的英文字母會(huì)變?yōu)檩^小的大寫字母。比較：ABC</span><spanclass="font_v">abc.</span><br/><br/><spanclass="font_all">這一行是字體綜合設(shè)置：斜體、加粗，還可指定字體大小。</span></body>2023/1/14384.3層疊樣式表CSS4.3.4CSS屬性

顏色和背景屬性

顏色屬性允許設(shè)計(jì)者指定頁(yè)面元素的顏色，背景屬性指定頁(yè)面的背景顏色或背景圖像的屬性。顏色和背景類屬性包括（前景）顏色（color）、背景顏色（background-color）、背景圖像（background-image）、背景重復(fù)（background-repeat）、背景附屬方式（background-attachment）、背景圖像位置（background-position）以及背景屬性（background）。2023/1/14394.3層疊樣式表CSS屬性名可取值含義舉例color英文單詞#RRGGBB#RGB指定頁(yè)面元素的前景色h1{color:red}h2{color:#008800}h3{color:#080}background-color

英文單詞#RRGGBB#RGBtransparent指定頁(yè)面元素的背景色body{background-color:white}h1{background-color:#0000f0}p{background-color:transparent}

background-imag

統(tǒng)一資源定位器URLsnone

指定頁(yè)面元素的背景圖像body{background-image:url(bg.gif)}p{background-image:url(/bg.jpg)}

background-repeat

repeatrepeat-xrepeat-yno-repeat

決定一個(gè)被指定的背景圖像被重復(fù)的方式。默認(rèn)值為repeatbody{background-repeat:no-repeat}p{background-repeat:repeat-x}

background-attachment

scrollfixed指定背景圖像是否跟隨頁(yè)面內(nèi)容滾動(dòng)。默認(rèn)值為scrollbody{background-attachment:fixed}background-position

數(shù)值表示法關(guān)鍵詞表示法

指定背景圖像的位置body{background-position:30%70%}p{background-position:bottomleft}

background背景顏色、背景圖像、背景重復(fù)、背景位置背景屬性綜合設(shè)定body{background:url(bg1.gif)greenrepeat-yfixed30%20pt}

顏色和背景屬性表

2023/1/14404.3.4CSS屬性

顏色和背景屬性

background-position值的表示有兩種方式：數(shù)值表示法和關(guān)鍵詞表示法。數(shù)值表示法用坐標(biāo)值表示位置，坐標(biāo)原點(diǎn)是背景圖像位置屬性所屬元素的左上角。數(shù)值表示法又分為百分比表示和長(zhǎng)度值表示兩種。百分比表示的格式為：X%Y%；長(zhǎng)度值表示的格式為：XptYpt。關(guān)鍵詞表示法使用英文單詞表示位置，橫向關(guān)鍵詞有l(wèi)eft、center、right，縱向關(guān)鍵詞有top、center、bottom。

百分比和長(zhǎng)度值表示法可以混用，但不能和關(guān)鍵詞表示法混用。若數(shù)值表示法只指定了一個(gè)值，則該值作為橫向值，垂直值默認(rèn)為50%。背景圖像位置（background-position）屬性可以確定背景圖像的絕對(duì)位置。該屬性只能應(yīng)用于塊級(jí)元素（包括div、p、ol、dl、ul等）和替換元素（包括img、input、textarea、select、object）。2023/1/14414.3層疊樣式表CSStopleft=lefttop=0%0%top=topcenter=centertop=50%0%topright=righttop=100%0%left=leftcenter=centerleft=0%50%center=centercenter=50%50%right=rightcenter=centerright=100%50%bottomleft=leftbottom=0%100%bottom=bottomcenter=centerbottom=50%100%bottomright=rightbottom=100%100%【例2-30】CSS顏色和背景屬性的用法示例。

<head><style>body{background-image:url(bg1.gif);background-repeat:repeat-y;}p{color:green;background:aquaurl(bg2.gif)no-repeat40%40pt}</style></head><body><p>這是一段文字<br/>本段有一不同于body的背景圖<br/>它從40%40pt處開始顯示<br/>并且不重復(fù)<br/><br/><br/></p><br/><br/>背景屬性也可以用在style屬性中，例如：<br/>

<tablewidth="90%"border="2"cellpadding="50"cellspacing="2"><tr><tdstyle="color:darkred;text-align:right;background:no-repeaturl(bg.jpg)bottomleft"><span>本格背景圖在[0%100%]處</span></td><tdstyle="color:red;background:no-repeaturl(bg3.jpg)topright"><span>本格背景圖在[100%0%]處</span></td></tr></table></body></html>2023/1/14424.3層疊樣式表CSS4.3.4CSS屬性

文本屬性文本屬性設(shè)置文字之間的顯示特性，包括：字符間隔（letter-spacing）、文本修飾（text-decoration）、大小寫轉(zhuǎn)換（text-transform）、文本橫向排列（text-align）、文本縱向排列（vertical-align）、文本縮排（text-indent）、行高（line-height）。

2023/1/14434.3層疊樣式表CSS屬性名可取值含義舉例letter-spacing

長(zhǎng)度值|normal

設(shè)定字符之間的間距

h1{letter-spacing:8pt}p{letter-spacing:14pt}

text-decoration

none|underline|overline|line-through|blink

設(shè)定文本的修飾效果，line-through是刪除線，blink是閃爍效果。默認(rèn)值為none

a:link,a:visited,a:active{text-decoration:none}

text-align

left|right|center|justify（將文字均分展開對(duì)齊）

設(shè)置文本橫向排列對(duì)齊方式

p{text-align:center}h1{text-align:right}

vertical-align

設(shè)定元素縱向?qū)R方式。默認(rèn)值為baseline

img.mid{vertical-align:50%}span.sup{vertical-align:super}span.sub{vertical-align:sub}

text-indent

長(zhǎng)度值|百分比

設(shè)定塊級(jí)元素第一行的縮進(jìn)量

p{text-indent:30pt}h1{text-indent:10%}

line-height

normal|長(zhǎng)度值|數(shù)字|百分比

設(shè)定相鄰兩行的間距。默認(rèn)值normal

p{line-height:200%}p{line-height:30pt}

文本屬性表

2023/1/1444【例2-31】CSS文本屬性的用法示例。<html><head><title>文本屬性用法</title><styletype="text/css">h2.space{letter-spacing:10pt;}p.ind{text-indent:20pt;color:darkred;background-color:#ffaaaa}h3.dec{text-decoration:line-through}p.hei1{line-height:16pt}p.hei2{line-height:32pt}span.super{vertical-align:super;}</style></head>

<body><h2class="space">本行字符間距是10pt</h2><pclass="ind">本段文字起始縮進(jìn)20pt，<br/>然后可以跟正文。</p><h3class="dec">本行文字帶有刪除線。</h3><pclass="hei1">本行與下一行間距為16pt，<br/>本行與上一行間距為16pt。</p><pclass="hei2">本行與下一行間距為32pt，<br/>本行與上一行間距為32pt。</p>本行的X和Y帶有上標(biāo)：X<spanclass="super">3</span>+Y<spanclass="super">3</span></body></html>

2023/1/14454.3層疊樣式表CSS4.3.4CSS屬性

方框?qū)傩苑娇驅(qū)傩杂糜谠O(shè)置元素的邊界、邊框等屬性值，可應(yīng)用這些屬性的元素大多是塊元素。包括body、p、div、td、table、hx（x=1,2,...,6）等。方框?qū)傩园ㄟ吔纾╩argin）、邊界填充（padding）、邊框（border）等的設(shè)置。

2023/1/14464.3層疊樣式表CSS【例2-32】CSS方框?qū)傩杂梅ㄊ纠?lt;html><head><title>方框?qū)傩杂梅ɡ?lt;/title><styletype="text/css">div{background-color:#ddeeff;margin:10pt30pt;border-width:20pt;border-style:groove;border-color:blue;padding:20pt;width:600pt;}</style></head>

<body><div>這是本段的開始文字！本行距段邊框20pt。<br/><br/><imgsrc="bg.jpg">這是一幅郁金香的圖片。

<imgsrc="bg.jpg">這是一幅郁金香的圖片。<br/><br/><imgsrc="bg.jpg">這是一幅郁金香的圖片。

</div></body></html>2023/1/14473.3層疊樣式表CSS【例2-32-1】CSS方框?qū)傩杂梅ㄊ纠?lt;html><head><title>方框?qū)傩杂梅ɡ?lt;/title><styletype="text/css">img{float:left;}.a{clear:both;} </style></head>

<body><imgsrc="bg.jpg"/><imgclass="a"src="bg.jpg"/></body></html>2023/1/14484.3層疊樣式表CSSFloat屬性使元素從正常的位置浮動(dòng)到指定的邊界。如果元素浮動(dòng)到邊界上，那么其他元素會(huì)在元素的另一邊環(huán)繞。clear屬性讓元素離開浮動(dòng)的元素。浮動(dòng)屬性CSS浮動(dòng)屬性允許網(wǎng)頁(yè)制作者將文本浮動(dòng)在一個(gè)元素的周圍。float屬性，將元素的內(nèi)容浮動(dòng)到頁(yè)面的左邊緣或右邊緣。取值為left、right、none，默認(rèn)值為none。clear屬性，指定一個(gè)元素是否允許有元素漂浮在它的旁邊。取值為none、left、right、both，默認(rèn)值none。49<style>span{font-family:楷體_gb2312;font-size:20pt;float:left}.ss{clear:left}</style><span>漂浮屬性</span><p>允許網(wǎng)頁(yè)制作者將文本環(huán)繞在一個(gè)元素的周圍。清除屬性指定一個(gè)元素是否允許有元素漂浮在它的旁邊。</p><span>漂浮屬性</span><pclass="ss">允許網(wǎng)頁(yè)制作者將文本環(huán)繞在一個(gè)元素的周圍。清除屬性指定一個(gè)元素是否允許有元素漂浮在它的旁邊。</p>4.3層疊樣式表CSS4.3.4CSS屬性

列表屬性

列表屬性用于設(shè)置列表標(biāo)記（ol和ul）的顯示特性；包括list-style-type、list-style-image、list-style-position、list-style等屬性。2023/1/14504.3層疊樣式表CSS屬性名可取值含義list-style-type無(wú)序列表值：disc|circle|square有序列表值：decimal|lower-roman|upper-roman|lower-alpha|upper-alpha共用值：none表項(xiàng)的項(xiàng)目符號(hào)。disc—實(shí)心圓點(diǎn)；circle—空心圓；square—實(shí)心方形；decimal—阿拉伯?dāng)?shù)字；lower-roman—小寫羅馬數(shù)字；upper-roman—大寫羅馬數(shù)字；lower-alpha—小寫英文字母；upper-alpha—大寫英文字母；none—不設(shè)定list-style-imageurl（URL）使用圖像作為項(xiàng)目符號(hào)list-style-positionoutside|inside設(shè)置項(xiàng)目符號(hào)是否在文字里，與文字對(duì)齊list-style項(xiàng)目符號(hào)，位置綜合設(shè)置項(xiàng)目屬性列表屬性表

2023/1/1451【例2-33】CSS列表屬性用法示例。<html><head><title>列表屬性用法</title><styletype="text/css">ul.ul1{list-style:squareinside;}ul.ul2{list-style-image:url("check.gif");list-style-position:outside;}ol.ol1{list-style-type:upper-roman;list-style-position:inside;}ol.ol2{list-style:decimaloutside;}</style></head>

<li>電子信息工程99（1）班</li>

<li>電子信息工程99（2）班</li></ol><olclass="ol2">

<li>電子信息工程98（1）班</li>

<li>電子信息工程98（2）班</li></ol></body></html>

2023/1/14524.3層疊樣式表CSS4.3.4CSS屬性

定位屬性CSS提供用于二維和三維空間定位的屬性，它們是top、left、position。利用它們可以將元素定位于相對(duì)其他元素的相對(duì)位置或絕對(duì)位置。（1）top、left、position屬性

人人文庫(kù)> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

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

人機(jī)交互與界面設(shè)計(jì)-第4章

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

人機(jī)交互與界面設(shè)計(jì)-第4章

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔