CSS詳細(xì)經(jīng)典速成教程

上傳人：d*** IP屬地：廣東上傳時(shí)間：2023-04-15 格式：PPT 頁(yè)數(shù)：62 大小：2.88MB 積分：30 舉報(bào) 版權(quán)申訴

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

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

文檔簡(jiǎn)介

CSS專題CSS在頁(yè)面風(fēng)格設(shè)計(jì)中的作用CSS語(yǔ)法基礎(chǔ)用DIV+CSS的方式來寫HTML頁(yè)面用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)CSS與XML的綜合運(yùn)用CSSCSS詳細(xì)經(jīng)典速成教程一、CSS簡(jiǎn)介CSSCascadingStyleSheet層疊樣式表樣式格式，對(duì)于網(wǎng)頁(yè)來說，像網(wǎng)頁(yè)顯示的文字的大小、顏色以及圖片位置以及段落、列表等，都是網(wǎng)頁(yè)顯示的樣式。層疊HTML文件引用多個(gè)CSS樣式時(shí)，如果CSS的定義發(fā)生沖突，瀏覽器將依據(jù)層次的先后順序來應(yīng)用樣式，如果不考慮樣式的優(yōu)先級(jí)時(shí)，一般會(huì)遵循“最近優(yōu)選原則”。CSS詳細(xì)經(jīng)典速成教程二、CSS在頁(yè)面風(fēng)格設(shè)計(jì)中的作用網(wǎng)頁(yè)的標(biāo)準(zhǔn)——網(wǎng)頁(yè)主要由3個(gè)部分組成：結(jié)構(gòu)（Structure）表現(xiàn)（Presentation）行為（Behavior）在一個(gè)網(wǎng)頁(yè)中，分若干個(gè)組成部分，包括各級(jí)標(biāo)題、正文段落、各種列表結(jié)構(gòu)等，這就構(gòu)成了一個(gè)網(wǎng)頁(yè)的“結(jié)構(gòu)”。網(wǎng)頁(yè)各組成部分的字號(hào)、字體和顏色等屬性就構(gòu)成了它的“表現(xiàn)”。網(wǎng)頁(yè)與用戶的交互CSS詳細(xì)經(jīng)典速成教程二、CSS在頁(yè)面風(fēng)格設(shè)計(jì)中的作用網(wǎng)頁(yè)標(biāo)準(zhǔn)的涵義：“結(jié)構(gòu)”決定了網(wǎng)頁(yè)“是什么”“表現(xiàn)”決定了網(wǎng)頁(yè)看起來是“什么樣子”“行為”決定了網(wǎng)頁(yè)“做什么”網(wǎng)頁(yè)標(biāo)準(zhǔn)對(duì)應(yīng)的技術(shù)：(X)

HTML——決定網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容CSS——設(shè)定網(wǎng)頁(yè)的表現(xiàn)樣式JavaScript——控制網(wǎng)頁(yè)的行為CSS的核心目的：實(shí)現(xiàn)網(wǎng)頁(yè)結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原來由HTML語(yǔ)言所承擔(dān)的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由CSS來完成。CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)CSS的思想就是首先指定對(duì)什么“對(duì)象”進(jìn)行設(shè)置，然后指定對(duì)該對(duì)象的哪個(gè)方面的“屬性”進(jìn)行設(shè)置，最后給出該設(shè)置的“值”。CSS規(guī)則的構(gòu)造對(duì)象屬性值CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)樣式表規(guī)則的組成：選擇符（selector）決定哪些因素要受到影響聲明（declaration）一個(gè)或多個(gè)屬性值對(duì)組成基本語(yǔ)法：selector{屬性:屬性值[[;屬性:屬性值]…]}語(yǔ)法說明：selector表示希望進(jìn)行格式化的元素；聲明部分包括在選擇器后的大括號(hào)中；用“屬性:屬性值”描述要應(yīng)用的格式化操作；聲明中的多個(gè)屬性值對(duì)之間必須用分號(hào)隔開。CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)選擇器（selector）

CSS的對(duì)象是很重要的，它指定了對(duì)哪些網(wǎng)頁(yè)元素進(jìn)行設(shè)置，因此，它有一個(gè)專門的名稱——選擇器（selector）類型：普通選擇器復(fù)合選擇器標(biāo)簽CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)普通選擇器——標(biāo)簽選擇器標(biāo)簽<styletype="text/css">p{font-size:16px;color:red;}</style>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)普通選擇器——類別選擇器<styletype="text/css">.biaoti{font-size:16px;color:red;}</style><body><p>普通文字</p><pclass=biaoti>賦于標(biāo)記符類所產(chǎn)生的格式</p><spanclass=biaoti>類選擇器所定義的格式</span></body>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)普通選擇器——ID選擇器<styletype="text/css">#biaoti{font-size:16px;color:red;}</style><body><p>普通文字</p><pid=biaoti>賦于標(biāo)記符id所產(chǎn)生的格式</p><spanid=biaoti>ID選擇器所定義的格式</span></body>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)復(fù)合選擇器——交集選擇器p{/*標(biāo)記選擇器*/ color:blue;}p.Special{/*標(biāo)記.類別選擇器*/ color:red;}.special{/*類別選擇器*/color:green;}</style></head><body><p>普通段落文本（藍(lán)色）</p><h3>普通標(biāo)題文本（黑色）</h3><pclass="special">指定了.special類別的段落文本（紅色）</p><h3class="special">指定了.special類別的標(biāo)題文本（綠色）</h3></body></html>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)復(fù)合選擇器——并集選擇器<html><head><title>并集選擇器</title><styletype="text/css">/*并集選擇器*//*集體聲明*/h1,h2,h3,h4,h5,p{ color:purple; font-size:15px; }h2.special,.special,#one{ text-decoration:underline;}</style></head><body><h1>示例文字h1</h1><h2class="special">示例文字h2</h2><h3>示例文字h3</h3><h4>示例文字h4</h4><h5>示例文字h5</h5><p>示例文字p1</p><pclass="special">示例文字p2</p><pid="one">示例文字p3</p></body></html>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)復(fù)合選擇器——后代選擇器<html><head><title>后代選擇器</title><styletype="text/css">/*嵌套聲明*/pspan{ color:red; }span{color:blue;}</style></head><body><p>嵌套使<span>用CSS（紅色）</span>標(biāo)記的方法</p>

嵌套之外的<span>標(biāo)記（藍(lán)色）</span>不生效</body></html>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)繼承繼承是CSS的一個(gè)主要特征，許多CSS屬性不但影響選擇符所定義的元素，而且會(huì)被這些元素的后代繼承。例如一個(gè)body定義了的顏色值也會(huì)應(yīng)用到段落的文本中。<html><head><title>CSS的繼承性</title><styletype="text/css"></style></head><body><p>CSS的<strong>繼承性</strong></p></body></html>

CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)樣式表的定義與使用直接定義標(biāo)記的style屬性定義內(nèi)部樣式表嵌入外部樣式表鏈接外部樣式表<styletext="text/css"></style><styletype="text/css">@importurl("style.css")；</style><linkrel="stylesheet"type="text/css"href="style.css"><p

style=“font-size:14px”>一段話</p>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——示例<html><head><title>ID和類的定義</title><styletype="text/css"></style></head><body><divid="divdemo"> <p>此段文字以默認(rèn)方式顯示</p><pclass="p1">此段文字以16像素大小，紅色字體顯示</p><pclass="p2">此段文字以26像素大小，玫紅色字體顯示

</div></body></html>CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——字體color——字體顏色font-size——字號(hào)

font-family——字體font-style——字體樣式normal|italic|oblique(歪斜體)font-weight——字體加粗normal|bold|bolder|lighter|100|200|300font-variant——字體變體font-variant:normal|small-caps(小型的大寫字母)text-decoration——文字效果屬性none|underline|blink|overline|line-throughfont——綜合字體屬性font-stylefont-weightfont-variantfont-size/line-heightfont-familyCSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——字體排版text-indent——首行縮進(jìn)屬性normal|長(zhǎng)度單位letter-spacing——字符間距屬性normal|長(zhǎng)度單位line-height——行距屬性normal|比例|長(zhǎng)度單位|百分比text-align——水平對(duì)齊屬性left|right|center|justifytext-transform——轉(zhuǎn)換英文大小寫uppercase|lowercase|capitalize|noneCSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——背景顏色background-color：關(guān)鍵字|RGB值|transparentCSS則有四種定義顏色的方法：十六進(jìn)制數(shù)RGB函數(shù)（整數(shù)）RGB函數(shù)（百分比）顏色名稱CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——背景顏色<html><head><title>背景顏色的屬性</title><styletype="text/css"></style></head><body><pclass="p1">此行文字以紅色背景顯示n</p><pclass="p2">此行文字以黃色背景顯示</p></body></html>

CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——背景顏色CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——背景圖片background-image：插入背景圖片background-attachment:插入背景附件background-repeat:設(shè)置重復(fù)背景圖片background-position:設(shè)置背景圖片位置CSS詳細(xì)經(jīng)典速成教程background-image插入背景圖片background-image設(shè)置背景圖片基本語(yǔ)法：background-image:url|none語(yǔ)法說明：url表示要插入背景圖片的路徑，路徑可以是絕對(duì)路徑也可以是相對(duì)路徑，none表示不加載圖片。CSS詳細(xì)經(jīng)典速成教程background-attachment插入背景附件background-attachment背景附件屬性是用來設(shè)置背景圖片是否隨著滾動(dòng)條的移動(dòng)而一起移動(dòng)?；菊Z(yǔ)法：background-attachment：scroll|fixed語(yǔ)法說明：scroll表示背景圖片是隨著滾動(dòng)條的移動(dòng)而移動(dòng)，是瀏覽器的默認(rèn)值；fixed表示背景圖片固定在頁(yè)面上不動(dòng)，不隨著滾動(dòng)條的移動(dòng)而移動(dòng)。CSS詳細(xì)經(jīng)典速成教程background-repeat設(shè)置重復(fù)背景圖片background-img屬性設(shè)置網(wǎng)頁(yè)的背景圖片重復(fù)顯示方式?；菊Z(yǔ)法：background-repeat：repeat|repeat-x|repeat-y|no-repeat語(yǔ)法說明：repeat表示背景圖片在水平和垂直方向平鋪，是默認(rèn)值；repeat-x表示背景圖片在水平方向平鋪；repeat-y表示背景圖片在垂直方向平鋪；no-repeat表示背景圖片不平鋪。CSS詳細(xì)經(jīng)典速成教程background-position設(shè)置背景圖片位置當(dāng)在網(wǎng)頁(yè)中插入背景圖片時(shí)，每一次插入的位置，都是位于網(wǎng)頁(yè)的左上角，所以通過background-position屬性來改變圖片的插入位置?；菊Z(yǔ)法：background-position：百分比|長(zhǎng)度|關(guān)鍵字語(yǔ)法說明：利用百分比和長(zhǎng)度來設(shè)置圖片位置時(shí)，都要指定兩個(gè)值，并且這兩個(gè)值都要用空格隔開。一個(gè)代表水平位置，一個(gè)代表垂直位置。水平位置的參考點(diǎn)是網(wǎng)頁(yè)頁(yè)面的左邊，垂直位置的參考點(diǎn)是網(wǎng)頁(yè)頁(yè)面的上邊。關(guān)鍵字在水平方向的主要有l(wèi)eft、center、right，關(guān)鍵字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——盒子的概念與使用盒子模塊設(shè)置邊界設(shè)置元素邊框設(shè)置元素內(nèi)邊界CSS詳細(xì)經(jīng)典速成教程盒子模塊在CSS中，將樣式調(diào)用在每一個(gè)元素上，都以一個(gè)假想的矩形格式模型看待.一般使用矩形模塊的時(shí)候，搭配margin屬性、border屬性以及padding屬性，可以更好的控制元素的樣式。CSS詳細(xì)經(jīng)典速成教程設(shè)置邊界margin的四個(gè)屬性主要是控制元素邊界與文件其他內(nèi)容的空白距離，四個(gè)邊界一般按順時(shí)針方向上（margin-top）、右（margin-right）、下（margin-bottom）、左（margin-left）屬性。四個(gè)邊界的設(shè)置語(yǔ)法一樣?；菊Z(yǔ)法：margin-(top、right、bottom、left):長(zhǎng)度單位|百分比單位|autoCSS詳細(xì)經(jīng)典速成教程設(shè)置元素邊框border-style邊框樣式屬性border-width邊框?qū)挾葘傩詁order-color邊框色彩屬性border屬性的綜合設(shè)置CSS詳細(xì)經(jīng)典速成教程border-style邊框樣式屬性利用邊框樣式屬性不僅可以設(shè)置單位邊框樣式屬性，還可以對(duì)單位邊框進(jìn)行設(shè)置，而且也可以利用復(fù)合邊框樣式屬性來統(tǒng)一設(shè)置四條邊框的樣式?；菊Z(yǔ)法：border-style:樣式值border-top-style:樣式值border-bottom-style:樣式值border-left-style:樣式值border-right-style:樣式值CSS詳細(xì)經(jīng)典速成教程border-style邊框樣式屬性語(yǔ)法說明：border-style是一個(gè)復(fù)合屬性，復(fù)合屬性的值有四種設(shè)置方法，其他4個(gè)都是單個(gè)邊框的樣式屬性，只能取一個(gè)值。樣式值屬性的具體說明見表10-8。設(shè)置一個(gè)值：四條邊框?qū)挾染褂靡粋€(gè)值。設(shè)置兩個(gè)值：上邊框和下邊框?qū)挾日{(diào)用第一個(gè)值，左邊框和右邊框?qū)挾日{(diào)用第二個(gè)值。設(shè)置三個(gè)值：上邊框?qū)挾日{(diào)用第一個(gè)值，右邊框與左邊框?qū)挾日{(diào)用第二個(gè)值，下邊框調(diào)用第三個(gè)值。設(shè)置四個(gè)值：四條邊框?qū)挾鹊恼{(diào)用順序?yàn)樯?、右、下、左。CSS詳細(xì)經(jīng)典速成教程border-width邊框?qū)挾葘傩詁order-width屬性，是控制元素邊框的寬度的一個(gè)綜合屬性，和border-style一樣也有四種單獨(dú)的設(shè)置方法，分別來定義四條邊框的寬度，設(shè)置方法和邊框樣式一樣?；菊Z(yǔ)法：CSS詳細(xì)經(jīng)典速成教程border-width邊框?qū)挾葘傩哉Z(yǔ)法說明：thin、medium、thick分別表示細(xì)、中等、粗，length表示長(zhǎng)度單位CSS詳細(xì)經(jīng)典速成教程border-color邊框色彩屬性border-color屬性是用來控制邊框顯示的顏色，和邊框?qū)挾?、邊框樣式的設(shè)置方法一樣，也可以分別來設(shè)置每個(gè)邊框的顏色.基本語(yǔ)法：border-color:顏色關(guān)鍵字|RGB值border-top-color:顏色關(guān)鍵字|RGB值border-bottom-color:顏色關(guān)鍵字|RGB值border-left-color:顏色關(guān)鍵字|RGB值border-right-color:顏色關(guān)鍵字|RGB值CSS詳細(xì)經(jīng)典速成教程border屬性的綜合設(shè)置在CSS中，border屬性用來同時(shí)設(shè)置邊框的樣式、寬度和顏色，也可以另外對(duì)每個(gè)邊界屬性單獨(dú)進(jìn)行設(shè)置基本語(yǔ)法：border:邊框?qū)挾葇邊框樣式|邊框顏色

border-top:上邊框?qū)挾葇上邊框樣式|上邊框顏色

border-bottom:下邊框?qū)挾葇下邊框樣式|下邊框顏色border-left:左邊框?qū)挾葇左邊框樣式|左邊框顏色border-right:右邊框?qū)挾葇右邊框樣式|右邊框顏色語(yǔ)法說明：每一個(gè)屬性都是一個(gè)復(fù)合屬性，都可以同時(shí)設(shè)置邊框的樣式、寬度和顏色，每個(gè)屬性的值中間用空格隔開，在這5個(gè)屬性中，只有border可以同時(shí)設(shè)置四條邊框的屬性，其他的只能設(shè)置單邊框的屬性。CSS詳細(xì)經(jīng)典速成教程設(shè)置元素內(nèi)邊界元素內(nèi)邊界主要是指邊框和內(nèi)部元素之間的空白距離，利用padding屬性設(shè)置元素內(nèi)的邊界時(shí)，也包括5個(gè)屬性，同樣也有四種設(shè)置方法。基本語(yǔ)法：padding:長(zhǎng)度|百分比padding-top:長(zhǎng)度|百分比padding-bottom:長(zhǎng)度|百分比padding-left:長(zhǎng)度|百分比padding-right:長(zhǎng)度|百分比語(yǔ)法說明：長(zhǎng)度包括長(zhǎng)度值和長(zhǎng)度單位，百分比是相對(duì)于上級(jí)元素寬度的百分比，不允許用負(fù)數(shù)，padding作為復(fù)合屬性的四種取值方法請(qǐng)參考邊框樣式的取值方法。CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——列表列表list-style-type列表樣式list-style-image圖像列表list-style-position列表符號(hào)的縮進(jìn)CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——列表list-style-type屬性，可用于設(shè)置列表的符號(hào)或編號(hào)，此屬性通常搭配<ol>或<ul>標(biāo)記使用?；菊Z(yǔ)法：list-style-type:屬性值CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——列表利用css還可以把列表的符號(hào)設(shè)置成喜歡的圖片基本語(yǔ)法：list-style-image:url|none語(yǔ)法說明：url是指定要載入的圖片路徑，在使用上與插入圖片<img>的用法差不多；none表示不使用圖片式的列表符號(hào)。CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——列表list-style-position列表符號(hào)縮進(jìn)屬性，主要是設(shè)置每個(gè)列表項(xiàng)目的符號(hào)或圖片，是否向外凸出。基本語(yǔ)法：list-style-position:inside|outside語(yǔ)法說明：inside表示列表符號(hào)不向外凸出，也可以理解成列表項(xiàng)上的第二行文字與列表符號(hào)對(duì)齊；outside表示列表符號(hào)向外凸出，也是默認(rèn)值。CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——設(shè)置網(wǎng)頁(yè)鏈接屬性設(shè)置偽類選擇器得到不同的超鏈接屬性CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——設(shè)置滾動(dòng)條屬性利用CSS制作滾動(dòng)條的顏色效果CSS詳細(xì)經(jīng)典速成教程三、CSS語(yǔ)法基礎(chǔ)——設(shè)置光標(biāo)屬性設(shè)置變化的光標(biāo)圖形——cursor:屬性值CSS詳細(xì)經(jīng)典速成教程四、用DIV+CSS的方式來寫HTML頁(yè)面一列居中樣式margin-right:auto;margin-left:auto;width:px;兩列并列樣式定義固定寬度、左對(duì)齊浮動(dòng)兩列并列居中樣式用一個(gè)大容器容納兩個(gè)列，即以上兩種技術(shù)的綜合三列并列樣式定義固定寬度、左對(duì)齊浮動(dòng)工字型布局結(jié)合三列并列樣式，版權(quán)區(qū)設(shè)定清除浮動(dòng)clear:both;CSS詳細(xì)經(jīng)典速成教程div標(biāo)記的使用在寫HTML文件時(shí)，要定義區(qū)域間不同樣式時(shí)，可以使用<div>標(biāo)記達(dá)到這個(gè)效果，除此以外，通過設(shè)置<div>的z-index屬性還可以設(shè)置層次的效果?；菊Z(yǔ)法：<divstyle="position:absolute;left:29px;top:12px;width:200px;height:100px;background-color:#33CC99;float:none;clear:none；z-index:1></div>CSS詳細(xì)經(jīng)典速成教程div標(biāo)記的使用語(yǔ)法說明：用style來表示層的樣式，因?yàn)槿绻麤]有定義層的樣式的話，在瀏覽網(wǎng)頁(yè)的時(shí)候是看不到效果的。其中：position屬性主要是來定義層的定位方式；left和top是用來定位層的位置，與它并列的還有right和bottom，這四個(gè)屬性主要是用來設(shè)置層的位置，分別表示對(duì)象與其他對(duì)象的左部、頂部、右部和底部的相對(duì)位置；width和height用來定義層的寬度和高度；float是層的浮動(dòng)屬性，用來設(shè)置層的浮動(dòng)位置，當(dāng)然這個(gè)屬性不僅可以用在圖像和表格上，還可以用到其他任何元素上；clear是層的清除屬性，表示是否充許在某個(gè)元素的周圍有浮動(dòng)元素，它和浮動(dòng)屬性是一對(duì)相對(duì)立的屬性，浮動(dòng)屬性用來設(shè)置某個(gè)元素的浮動(dòng)位置，而清除屬性則要去掉某個(gè)位置的浮動(dòng)元素；z-index主要是設(shè)置區(qū)域的上下層關(guān)系，利用此屬性設(shè)置可以讓區(qū)域更多層次的效果，相當(dāng)于三維空間的z坐標(biāo)，z-index越大，區(qū)域在堆中的位置就越高。CSS詳細(xì)經(jīng)典速成教程<span>標(biāo)記的使用<div>標(biāo)記主要用來定義網(wǎng)頁(yè)上的區(qū)域，通常用于比較大范圍的設(shè)置，而<span>標(biāo)記被用來組合文檔中的行內(nèi)元素。基本語(yǔ)法：<spanid="指定樣式名稱">…</span>或者<spanclass="指定樣式名稱">…</span>語(yǔ)法說明：如果不對(duì)span應(yīng)用樣式，那么span元素中的文本與其他文本不會(huì)有任何視覺上的差異，只有對(duì)它應(yīng)用樣式時(shí)，它才會(huì)產(chǎn)生視覺上的變化。CSS詳細(xì)經(jīng)典速成教程<div>與<span>的區(qū)別基本上<div>與<span>標(biāo)記在網(wǎng)頁(yè)上的使用，都可以用來產(chǎn)生區(qū)域范圍，以定義不同的文字段落，且區(qū)域間彼此是獨(dú)立的。不過，兩者在使用上還是有一些差異。區(qū)域內(nèi)是否換行：<div>標(biāo)記區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文會(huì)自動(dòng)換行，而<span>標(biāo)記區(qū)域內(nèi)的對(duì)象與區(qū)域外的對(duì)象不會(huì)自動(dòng)換行。標(biāo)記相互包含：<div>與<span>標(biāo)記可以同時(shí)在網(wǎng)頁(yè)上使用，一般在使用上建議用<div>標(biāo)記包含<span>標(biāo)記；但<span>最好不包含<div>標(biāo)記，否則會(huì)造成<span>標(biāo)記的區(qū)域不完整，而形成斷行的現(xiàn)象。CSS詳細(xì)經(jīng)典速成教程小實(shí)例頁(yè)面布局設(shè)計(jì)始終是網(wǎng)頁(yè)設(shè)計(jì)中的一個(gè)核心問題，它包括技術(shù)和美學(xué)兩個(gè)方面的問題，兩者結(jié)合的非常緊密。頁(yè)面布局的主要工具是<frame>、<table>、<div>和Flash文件。對(duì)于框架<frame>，一般而言應(yīng)盡量避免使用；表格<table>作為可以在上面布置元素的二維網(wǎng)格，它的優(yōu)點(diǎn)在于在所有瀏覽器中幾乎都可以無差錯(cuò)的運(yùn)行，而只有微不足道的差異，而且，對(duì)于像切割圖像這樣的問題可以非常容易的用表格實(shí)現(xiàn)；但是過度使用表格所帶來的頁(yè)面無序，會(huì)給后期的維護(hù)帶來極大的困難；<div>技術(shù)雖然難以全部代替<table>，但是它的位置、尺寸、背景、邊框等都可以很好的設(shè)計(jì)，更重要的是它所依賴的內(nèi)容和樣式分離的思想使得頁(yè)面代碼更為簡(jiǎn)潔，樣式的更改更為方便。CSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)為圖像設(shè)置邊框border:樣式顏色寬度;樣式：dotted(點(diǎn)線)、dashed（虛線）、solid（實(shí)線）、double（雙線）groove：根據(jù)border-color的值繪制3D凹槽ridge：根據(jù)border-color的值繪制3D凸槽inset：根據(jù)border-color的值繪制3D凹邊outset：根據(jù)border-color的值繪制3D凸邊為圖像設(shè)置背景background:url();為圖形設(shè)置陰影background:whiteurl(漸變背景.gif)repeat-xbottomleft;filter：Shadow(Color=?,Direction=?).y1{ position:absolute; padding:12px; filter:Shadow(Color=#000000,Direction=135);}CSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)濾鏡靜態(tài)濾鏡alpha、blur、Motionblur、shadow、dropshadow、wave、glow、gray、flipv、fliph、invert、xray、emboss、engrave、mask動(dòng)態(tài)濾鏡必須與javascript配合才能發(fā)揮作用對(duì)象.濾鏡數(shù)組名[i].apply();對(duì)象.濾鏡數(shù)組名[i].play();對(duì)象.濾鏡數(shù)組名[i].stop();filter:BlendTrans(duration=秒數(shù))filter:RevealTrans(Transition=變化方式duration=秒數(shù))filter:lightCSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)通道（alpha）——設(shè)置透明度filter:alpha(Opacity=？,FinishOpacity=？,Style=？,StartX=？,StartY=？,FinishX=？,FinishY=？)Opacity：透明等級(jí)，0——100，0表示完全透明，100表示不透明；FinishOpacity：結(jié)束時(shí)的透明度，取值同上；Style：透明區(qū)域的形狀特征0：統(tǒng)一形狀1：線性2：放射性漸變3：矩形漸變當(dāng)Style為2或3時(shí)，startX等參數(shù)沒有意義，都是以圖片中心開始向四周結(jié)束CSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)模糊（blur）——設(shè)置模糊度filter:progid:DXImageTransform.Microsoft.blur(pixelradius=?,makeshadow=?)pixelradius：設(shè)置模糊效果的作用深度；makeshadow：設(shè)置是否制作成陰影；makeshadowopacity:設(shè)置使用makeshadow制作成的陰影的透明度.blur1{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}.blur2{filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=true,makeshadowopacity=10;);}CSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)運(yùn)動(dòng)模糊（Motionblur）——設(shè)置運(yùn)動(dòng)模糊度filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=？,direction=？,add=？);stregth：設(shè)置模糊效果的作用深度，代表有多少像素受到模糊影響；direction：模糊方向，0度表示垂直向上，；add:true|false,是否疊加原圖；.motionblur1{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=false); }.motionblur2{filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=30,direction=120,add=true); }CSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)陰影shadow——在指定方向上建立物體的連續(xù)投影filter:shadow(color=？,direction=？);dropshadow——下落陰影filter:dropshadow(color=？,offx=？,offy=？,positive=？) .shadow{

filter:shadow(color=#CCCCFF,direction=135); /*陰影效果*/}.drop{

filter:dropshadow(color=#CCCCFF,offx=5,offy=5,positive=true); /*下落陰影*/}CSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)波形filter:wave(add=?,freq=?,lightstrength=?,phase=?,strength=？)Add:1——顯示原來對(duì)象，0——不顯示原來對(duì)象Freq:波形的頻率，參數(shù)值1—100，完整波紋的個(gè)數(shù)Lightstrength：波紋增光效果，參數(shù)值1—100Phase:正弦波開始的偏移量，數(shù)值0—100，開始時(shí)偏移量占波長(zhǎng)的百分比Strength:振幅的大小.three{filter:flipvalpha(opacity=80)wave(add=0,freq=15,lightstrength=30,phase=0,strength=4); /*同時(shí)使用三個(gè)濾鏡*/ /*豎直翻轉(zhuǎn)、透明、波浪效果*/}CSS詳細(xì)經(jīng)典速成教程五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)發(fā)光filter:glow(color=？,strength=？); 灰度filter:gray;翻轉(zhuǎn)filter:fliph; /*水平翻轉(zhuǎn)*/filter:flipv; /*豎直翻轉(zhuǎn)*/filter:flipvfliph; /*水平、豎直同時(shí)翻轉(zhuǎn)*/反色filter:invert; /*底片效果*/X光filter:xray; /*X光效果*/浮雕紋理filter:progid:DXImageTransform.microsoft.emboss(bias=？);凹陷浮雕效果filter:progid:DXImageTransform.microsoft.engrave(bias=？);凸出浮雕效果bias:取值范圍-1——1遮罩filter:mask(color=？); /*遮罩效果*/CSS詳細(xì)經(jīng)典速成教程圖片淡入淡出filter:BlendTrans(duration=秒數(shù))五、用CSS設(shè)置圖像樣式扮靚網(wǎng)頁(yè)<scriptlanguage="javascript">functionimg1(x

人人文庫(kù)> 全部分類> 教育資料 > 課件下載

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝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ì)自己和他人造成任何形式的傷害或損失。

CSS詳細(xì)經(jīng)典速成教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

CSS詳細(xì)經(jīng)典速成教程

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔