《HTML5程序設(shè)計(jì)及實(shí)踐》課件第11章 CSS3_第1頁(yè)
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第11章 CSS3_第2頁(yè)
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第11章 CSS3_第3頁(yè)
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第11章 CSS3_第4頁(yè)
《HTML5程序設(shè)計(jì)及實(shí)踐》課件第11章 CSS3_第5頁(yè)
已閱讀5頁(yè)，還剩34頁(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)介

第11章CSS3目錄選擇器背景和邊框文本效果多列布局用戶界面2D/3D轉(zhuǎn)換動(dòng)畫(huà)CSS3其他新特性屬性選擇器E[attr]：只使用屬性名，但沒(méi)有確定任何屬性值；E[attr="value"]：指定屬性名，并指定了該屬性的屬性值；E[attr~="value"]：指定屬性名，并且具有屬性值，此屬性值是一個(gè)詞列表，并且以空格隔開(kāi)，其中詞列表中包含了一個(gè)value詞，而且等號(hào)前面的“?”不能不寫(xiě)；E[attr^="value"]：指定了屬性名，并且有屬性值，屬性值是以value開(kāi)頭的；E[attr$="value"]：指定了屬性名，并且有屬性值，而且屬性值是以value結(jié)束的；E[attr*="value"]：指定了屬性名，并且有屬性值，而且屬值中包含了value；E[attr|="value"]：指定了屬性名，并且屬性值是value或者以“value-”開(kāi)頭的值（比如說(shuō)zh-cn）;/*匹配表格中tr的偶數(shù)行*/tr:nth-child(even){background-color:#9CC;}/*匹配1、4、7、10、13......(步長(zhǎng)為30)的列表項(xiàng)*/li:nth-child(3n+1){ font-weight:bold; background:none;} 結(jié)構(gòu)偽類(lèi)選擇器E:first-child選擇位于其父元素中第一個(gè)位置，且匹配E的子元素。E:last-child選擇位于其父元素中最后一個(gè)位置，且匹配E的子元素。E:nth-child(n)選擇所有在其父元素中第n個(gè)位置的匹配E的子元素。E:nth-last-child(n)選擇所有在其父元素中倒數(shù)第n個(gè)位置的匹配E的子元素。E:nth-of-type(n)選擇所有在其父元素中同類(lèi)型第n個(gè)位置的匹配E的子素。E:nth-last-of-type(n)選擇所有在其父元素中同類(lèi)型倒數(shù)第n個(gè)位置的匹配E的子元素。E:first-of-type選擇在其父元素中匹配E的第一個(gè)同類(lèi)型的子元素。E:last-of-type選擇在其父元素中匹配E的最后一個(gè)同類(lèi)型的子元素。E:only-child選擇其父元素只包含一個(gè)子元素且該子元素匹配E。E:only-of-type選擇其父元素只包含一個(gè)同類(lèi)型子元素，且該子元素匹配E。E:empty選擇匹配E的元素，且該元素不包含子節(jié)點(diǎn)。UI偽類(lèi)選擇器UI偽類(lèi)選擇器，該類(lèi)選擇器的特征是：指定的樣式只有當(dāng)元素處于某種狀態(tài)下才起作用E:hover。E:active。E:focus。E:enabled。E:disabled。E:read-only。E:read-write。E:checked。E:default。E:indeterminate。E:selection。/*匹配只讀元素*/input:read-only{ width:30px;} /*匹配不可用元素*/input:disabled{ background:#dddurl(images/password1.gif)no-repeat2px2px; border:1pxsolid#fff; height:22px; border:1pxsolid#ccc;} 多色邊框<styletype="text/css"> div{ height:100px; width:500px; border:60pxsolid; border-bottom-color:red; border-left-color:blue; border-right-color:yellow; border-top-color:green;

}</style>

邊框背景<styletype="text/css">div{ width:500px; height:100px; border-width:20px; border-image:url(images/border1.jpg)20;} </style> 參數(shù)說(shuō)明如下：none:默認(rèn)值，表示邊框無(wú)背景圖。<image>:使用絕對(duì)或相對(duì)URL地址指定邊框的背景圖片。<number>:設(shè)置邊框?qū)挾然蜻吙虮尘皥D片大小，單位像素。<percentage>:設(shè)置邊框背景圖像大小，單位百分比Border-image:none|<image>[<number>|<percentage>]圓角邊框<styletype="text/css"> div{ width:500px; height:100px; border:15pxsolid#C96;

border-radius:30px;}</style>參數(shù)說(shuō)明如下：

none:默認(rèn)值，表示元素沒(méi)有圓角。

<length>:長(zhǎng)度值，不可為負(fù)數(shù)。border-radius:none|<length>[/<length>]為元素添加陰影效果，使用box-shadow屬性。該屬性值包含6個(gè)參數(shù)：陰影類(lèi)型、X軸位移、Y軸位移、陰影大小、陰影擴(kuò)展和陰影顏色box-shadow:5px5px20px#06C設(shè)置向右偏移5px，向下偏移5px，陰影大小20px，陰影顏色#06C；-5px-5px20px#CCCC99設(shè)置向左偏移5px，向上偏移5px，陰影大小20px，陰影顏色#CCCC99陰影效果<styletype="text/css"> img{

box-shadow: 5px5px20px#06C, -5px-5px20px#CCCC99;} </style>background-origin屬性定義background-position屬性的參考位置。默認(rèn)情況下，background-position屬性總是根據(jù)元素左上角為坐標(biāo)原點(diǎn)進(jìn)行定位背景圖像，使用background-origin屬性可以改變這種定位方式。border-box：從邊框開(kāi)始顯示背景padding-box:從邊框與內(nèi)容之間的空白區(qū)域開(kāi)始顯示背景contect-box：從內(nèi)容區(qū)域開(kāi)始顯示背景背景位置background-origin:padding-box|border-box|content-box;CSS3中可以在一個(gè)元素中同時(shí)顯示多個(gè)背景圖像，這使得背景圖像的調(diào)整變得更加方便。多背景圖片<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title><styletype="text/css"> div{ width:630px; height:480px; background:url(images/bg1.jpg)topleftno-repeat, url(images/bg2.png)bottomleftrepeat-x; }</style></head><body> <div></div></body></html>RGBA色彩模式是RGB色彩模式的擴(kuò)展，在紅、綠、藍(lán)三原色的基礎(chǔ)上增加了透明度參數(shù)其中，<opacity>表示透明度，取值在0~1之間，0表示全透明，1表示不透明。透明背景色rgba:(r,g,b,<opacity>);<styletype="text/css"> #div1{ width:400px; height:400px; background:url(images/bg1.jpg);} #div1div{ width:260px; height:300px; margin-left:15%; float:left; margin-top:9%; /*設(shè)置不透明度*/ background:rgba(255,255,255,0.6);}</style>在CSS3中，可以使用text-shadow屬性給文字添加陰影效果。設(shè)置陰影的效果為：向右、向下分別偏移3px，陰影顏色為#333文本陰影<styletype="text/css"> p{ font:bold60px"TimesNewRoman",Times,serif; color:#999; text-align:center; /*設(shè)置陰影效果*/ text-shadow:3px3px#333; } </style>給文字同時(shí)設(shè)置了兩次陰影效果，第一次向左、向上偏移1px并設(shè)置顏色為white，第二次向右、向下偏移1px并設(shè)置顏色為#333文字突起效果<styletype="text/css"> p{ font:60pxArial,Helvetica,sans-serif; color:#D1D1D1; text-align:center; background:#CCC; text-shadow:-1px-1pxwhite,1px1px#333; }</style>陰影效果顛倒，則會(huì)有凹下效果:第一次向左、向上偏移1px并設(shè)置顏色為#333，第二次向右、向下偏移1px并設(shè)置顏色為white文字凹下效果<styletype="text/css"> p{ font:60pxArial,Helvetica,sans-serif; color:#D1D1D1; text-align:center; background:#CCC; text-shadow:-1px-1px#333,1px1pxwhite; }</style>文字樣式<styletype="text/css"> div{ margin:0auto; width:400px; font:18px楷體; background:#CCC; /*首行縮進(jìn)*/ text-indent:2em; /*文字換行設(shè)置*/ word-break:break-all; /*文字對(duì)齊方式*/ text-align:justify; } </style>文字溢出<styletype="text/css"> dd{ width:200px; font-size:12px; font-family:"PalatinoLinotype","BookAntiqua",Palatino,serif; padding-top:5px; margin-left:0px; /*不允許換行*/ white-space:nowrap; /*超出部分隱藏*/ overflow:hidden; /*設(shè)置省略標(biāo)記*/ text-overflow:ellipsis;

}</style>columns屬性可以進(jìn)行多列布局：column-width：定義每列的寬度。 column-count：定義列數(shù)。column-gap屬性用于定義兩欄之間的間距。column-rule屬性擁有設(shè)置欄之間的邊框樣式<length>:定義邊框?qū)挾取?lt;style>:定義邊框樣式。<color>:定義邊框顏色。 <transparent>:定義邊框透明度。column-span屬性可以設(shè)置跨列顯示多列布局columns:<column-width>||<column-count>;column-gap:length|normal;column-rule:<length>|<style>|<color>|<transparent>;column-span:1|all;示例多列布局<styletype="text/css"> body{ /*設(shè)置欄寬度及欄數(shù)*/ -webkit-columns:300px3; columns:300px3; /*列間距*/ -webkit-column-gap:3em; /*定義分割線樣式*/ -webkit-column-rule:2pxdashedgray;

line-height:2em; font-family:楷體; } h1{ text-align:center; /*橫跨所有列*/ -webkit-column-span:all; } </style>CSS3之前，符合標(biāo)準(zhǔn)的瀏覽器中元素width或height屬性只包括content部分，而IE5瀏覽器中元素的width和height屬性則包括border+padding+content三部分。CSS3利用盒模式進(jìn)行了完善，通過(guò)設(shè)置box-sizing屬性，可以設(shè)置不同的盒模型模式content-box：元素的屬性width/height代表content的寬和高。border-box：元素的屬性width/heigh代表border+padding+content的寬和高。inherit：繼承父元素box-sizing屬性的值。盒模型方式box-sizing:content-box|border-box|inherit;盒模型方式<styletype="text/css"> div{ width:300px; height:400px; background:#996; padding:40px; /*border-box使得元素的寬和高不變，只是內(nèi)容位置發(fā)生變化*/ -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}</style>CSS3中新增了resize屬性，他運(yùn)行通過(guò)拖動(dòng)的方式改變?cè)氐拇笮?，而在之前如果要?shí)現(xiàn)這種效果，通常需要使用javascript腳本。參數(shù)說(shuō)明如下：none:不支持尺寸調(diào)整。both:運(yùn)行用戶調(diào)整寬度和高度。horizontal:運(yùn)行用戶調(diào)整寬度。vertical:運(yùn)行用戶調(diào)整高度。inherit:默認(rèn)繼承。調(diào)節(jié)元素尺寸resize:none|both|horizontal|vertical|inherit;調(diào)節(jié)元素尺寸<styletype="text/css"> div{ width:200px; height:100px; border:1pxsolid#09F; background:url(images/121.jpg)no-repeatcenter; /*必須同時(shí)定義overflow和resize，否則resize無(wú)效*/ resize:both; overflow:auto; }</style>content屬性可以替換文本內(nèi)容以及替換文本屬性，在CSS3之前，一般采用JavaScript腳本來(lái)實(shí)現(xiàn)這種任務(wù)。該語(yǔ)法參數(shù)解釋如下：

normal:默認(rèn)值。

string：插入文本。

attr()：插入屬性。url()：插入一個(gè)外部資源，如圖像、音視頻等。

counter()：計(jì)數(shù)器，用于插入排序標(biāo)識(shí)。

none：無(wú)內(nèi)容?？刂骑@示內(nèi)容content:normal|string|attr()|uri()|counter()|none;控制顯示內(nèi)容<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title><styletype="text/css"> div{ content:url(images/002.jpg); } </style></head><body><div>無(wú)邊落木蕭蕭下,不盡長(zhǎng)江滾滾來(lái)。</div></body></html>在CSS3中，可以利用initial屬性值取消對(duì)元素的樣式指定恢復(fù)默認(rèn)樣式<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title><styletype="text/css"> div{ font-family:華文行楷; font-weight:bold; font-size:25px; color:green; } div#div2{ font-weight:initial; color:initial; font-size:initial; }</style></head><body> <divid="div1">曾經(jīng)滄海難為水，除卻巫山不是云。</div><divid="div2">我自橫刀向天笑，去留肝膽兩昆侖。</div><divid="div3">人生自古誰(shuí)無(wú)死，留取丹心照汗青。</div></html>利用transform屬性可以實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)等幾種效果。translate()：移動(dòng)元素，基于X和Y坐標(biāo)重新定位元素。scale()：縮放元素，取值包括正數(shù)、負(fù)數(shù)、小數(shù)。rotate()：旋轉(zhuǎn)元素，取值為一個(gè)度數(shù)。skew()：傾斜元素，取值為一個(gè)度數(shù)。matrix()：定義矩陣變換，基于X和Y坐標(biāo)重新定位元素。2D轉(zhuǎn)換transform:none|<transform-function>;rotate()函數(shù)可以實(shí)現(xiàn)元素的旋轉(zhuǎn)。scale()函數(shù)可以縮放元素大小，該參數(shù)包括兩個(gè)參數(shù)值，分別用了定義寬和高縮放比例其中<number>參數(shù)值可以是正數(shù)、負(fù)數(shù)和小數(shù)。正數(shù)值將放大元素，負(fù)數(shù)值不會(huì)縮小元素，而會(huì)翻轉(zhuǎn)元素，小數(shù)可以縮小元素。如果第二個(gè)參數(shù)省略，則第二個(gè)參數(shù)等于第一個(gè)參數(shù)值。2D轉(zhuǎn)換rotate(<angle>);scale(<number>[,<number>]);2D轉(zhuǎn)換<styletype="text/css"> div{ width:300px; height:200px; margin:0auto; background:url(images/002.jpg)no-repeat; background-size:cover; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:-100px; /*定義動(dòng)畫(huà)變換持續(xù)0.5秒加速*/ -webkit-transition-duration:.5s; -webkit-transition-timing-function:ease-in; } div:hover{ /*鼠標(biāo)移上旋轉(zhuǎn)120度并拉伸2倍*/ -webkit-transform:rotate(120deg)scale(2); } </style>translate()函數(shù)可以重新定位元素的坐標(biāo)，該函數(shù)包括兩個(gè)參數(shù)值，分別用來(lái)表示X軸和Y軸。其中如果省略了第二個(gè)參數(shù)，則第二個(gè)參數(shù)默認(rèn)值為0。skew()函數(shù)實(shí)現(xiàn)元素的傾斜，包含兩個(gè)參數(shù)，分別用來(lái)定義X軸和Y軸的坐標(biāo)傾斜角度。其中如果省略了第二個(gè)參數(shù)，則第二個(gè)參數(shù)默認(rèn)值為0。2D轉(zhuǎn)換translate(<translation-value>[,<translation-value>])<styletype="text/css"> /*偶數(shù)元素移上下移20像素*/ ul#topli:nth-child(even):hover{ -webkit-transform:translate(0,20px); } /*第一個(gè)元素在X軸傾斜20度*/ ul#topli:nth-child(1){ -webkit-transform:skewX(20deg); } ul#topli:last-child{ -webkit-transform:skewY(30deg); }</style>skew(<angle>[,<angle>])matrix()是矩陣函數(shù)，他把所有2D轉(zhuǎn)換方法組合在一起。matrix()函數(shù)包括6個(gè)參數(shù)(a、b、c、d、e和f)，使用matrix()可以靈活的實(shí)現(xiàn)元素縮放、旋轉(zhuǎn)、傾斜以及偏移。div2比例1:1，大小不變，偏移40像素后傾斜30度2D轉(zhuǎn)換matrix(a,b,c,d,e,f)<style> div#div2 { z-index:2; background-color:#9CC;//使用matrix()函數(shù)

transform:matrix(1,0.5,-0.5,1,40,40); } </style>transtion屬性呈現(xiàn)的是一種過(guò)渡，一種動(dòng)畫(huà)轉(zhuǎn)換過(guò)程，例如漸現(xiàn)、漸弱、動(dòng)畫(huà)快慢等效果。transition-property：用來(lái)定義轉(zhuǎn)換動(dòng)畫(huà)的CSS屬性。

transiton-duration：用來(lái)定義轉(zhuǎn)換動(dòng)畫(huà)的時(shí)間長(zhǎng)度。

transtion-delay：用來(lái)定義轉(zhuǎn)換動(dòng)畫(huà)的延遲時(shí)間。

transtion-timing-function：用來(lái)定義過(guò)渡動(dòng)畫(huà)的效果。平滑過(guò)渡ulliimg{ width:50px; height:50px; border:1pxsolid#9CC; border-radius:25px; /*動(dòng)畫(huà)過(guò)渡0.2秒并呈線性過(guò)渡*/ transition:0.2slinear;}

ulliimg:hover{ margin-left:7px; margin-right:7px; transform-origin:centerbottom; transform:scale(1.5);}在CSS3中還可以使用animations功能實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)效果。animations屬性與transition屬性很相似。animation-name：用來(lái)定義動(dòng)畫(huà)的名稱(chēng)。

animation-duration：定義動(dòng)畫(huà)的播放時(shí)間。

animation-timing-function：定義動(dòng)畫(huà)的播放方式。

animation-delay：定義動(dòng)畫(huà)的延遲時(shí)間。

amimation-iteration-count：定義動(dòng)畫(huà)的播放次數(shù)。動(dòng)畫(huà)效果動(dòng)畫(huà)效果<styletype="text/css"> div{ width:385px; height:133px; margin:0auto; background:url(images/002.jpg)centerno-repeat; -webkit-transition-style:preserve-3d; /*設(shè)計(jì)沿y軸旋轉(zhuǎn)、20秒線性過(guò)渡、無(wú)限次循環(huán)*/ -webkit-animation-name:y-spin; -webkit-animation-duration:20s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } /*調(diào)用動(dòng)畫(huà)*/ @-webkit-keyframesy-spin{ 0%{ -webkit-transform:rotateY(0deg); } 50%{ -webkit-transform:rotateY(180deg); } 100%{ -webkit-transform:rotateY(360deg); } } </style>CSS漸變的只有基于Webkit和Gecko引擎的瀏覽器，而且不同引擎實(shí)現(xiàn)漸變的語(yǔ)法也不同，。Webkit引擎支持的漸變語(yǔ)法如下。其參數(shù)說(shuō)明如下：

<type>：定義漸變類(lèi)型。包括線性漸變（liner）和徑向漸變（radial）。

<point>：定義漸變起始點(diǎn)和結(jié)束點(diǎn)坐標(biāo)。該參數(shù)支持?jǐn)?shù)值、百分百和關(guān)鍵字。關(guān)鍵字包括top、bottom、left、right。

<radius>：用來(lái)設(shè)置徑向漸變的長(zhǎng)度。

<step>：定義漸變色和步長(zhǎng)。包括3個(gè)類(lèi)型值，即開(kāi)始的顏色，使用from(colorvalue)函數(shù)定義；結(jié)束的顏色

溫馨提示

  • 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ù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 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ì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論