網(wǎng)絡應用程序設計Web應用程序設計

1、CSS網(wǎng)絡應用程序設計Web應用程序設計CSS層疊樣式表CSS樣式表用于設置HTML和XML的顯示樣式，便于實現(xiàn)內(nèi)容與樣式的分離CSS樣式有5種定義與引用方式 內(nèi)聯(lián)式：在HTML標記中用style屬性定義 內(nèi)嵌式：在head元素中用style元素定義 鏈接式：在head元素中用link標記鏈接CSS文件 導入式：在樣式定義中用import指令導入CSS文件（必須在最前） 瀏覽器默認層疊 后定義的覆蓋先定義的 作用范圍小的優(yōu)先 內(nèi)層未定義的繼承外層定義的語法格式： 選擇符屬性:屬性值;屬性:屬性值; /*注釋*/例：樣式定義與引用 瀏覽器標題 /*導入外部樣式表文件*/ import url(b

2、.css); p color:#FF0000; font-size:28px; style屬性 樣式表 選擇器 標記選擇器：標記名（所有標記：*） ID選擇器：#ID屬性值 類選擇器：.class屬性值 屬性選擇器：屬性 關系選擇器：選擇器（連接符）選擇器 偽類選擇器：標記名:命令 偽對象選擇器：標記名:命令，標記名:命令選擇器選擇器選擇器名稱名稱說明說明*所有標記選擇器所有標記或元素T標記選擇器標記名為T的所有標記或元素#valID選擇器ID屬性值為val的所有標記或元素.valClass選擇器Class屬性值為val的所有標記或元素att屬性選擇器屬性符合att描述的所有標記或元素EoF關

3、系選擇器選擇器E和F符合o描述的關系E:F偽類選擇器選擇器E的預定義功能FE:F偽對象選擇器選擇器E的預定義功能F關系選擇器選擇器選擇器名稱名稱說明說明E,F并選擇器E或FEF交選擇器E且FE F 子孫選擇器所有被E包含的FEF子選擇器所有作為E直接包含的FE+F相鄰選擇器緊貼在E之后的FEF兄弟選擇器E之后的所有兄弟F屬性選擇器選擇器選擇器說明說明att選擇具有att屬性的標記或元素att=val選擇具有att屬性且屬性值等于val的標記或元素att=val選擇具有att屬性且屬性值為一用空格分隔的字詞列表，其中一個等于val的標記或元素att=val 選擇具有att屬性且屬性值為以val開

4、頭的字符串的標記或元素att$=val 選擇具有att屬性且屬性值為以val結(jié)尾的字符串的標記或元素att*=val 選擇具有att屬性且屬性值為包含val的字符串的標記或元素att|=val選擇具有att屬性且屬性值為以val開頭并用連接符-分隔的字符串的標記或元素偽類選擇器（1/2）選擇符說明E:link 設置超鏈接a在未被訪問前的樣式。E:visited設置超鏈接a在其鏈接地址已被訪問過時的樣式。E:hover設置元素在其鼠標懸停時的樣式。E:active設置元素在被用戶激活（在鼠標點擊與釋放之間發(fā)生的事件）時的樣式。E:focus設置元素在成為輸入焦點（該元素的onfocus事件發(fā)生）

5、時的樣式。E:lang()匹配使用特殊語言的E元素。E:not()匹配不含有s選擇符的元素E。E:root匹配E元素在文檔的根元素。E:first-child 匹配父元素的第一個子元素E。E:last-child匹配父元素的最后一個子元素E。E:only-child匹配父元素僅有的一個子元素E。E:nth-child(n)匹配父元素的第n個子元素E。E:nth-last-child(n)匹配父元素的倒數(shù)第n個子元素E。偽類選擇器（2/2）選擇符說明E:first-of-type匹配同類型中的第一個同級兄弟元素E。E:last-of-type 匹配同類型中的最后一個同級兄弟元素E。E:only-

6、of-type匹配同類型中的唯一的一個同級兄弟元素E。E:nth-of-type(n)匹配同類型中的第n個同級兄弟元素E。E:nth-last-of-type(n) 匹配同類型中的倒數(shù)第n個同級兄弟元素E。E:empty匹配沒有任何子元素（包括text節(jié)點）的元素E。E:checked匹配用戶界面上處于選中狀態(tài)的元素E。(用于input type為radio與checkbox時)E:enabled匹配用戶界面上處于可用狀態(tài)的元素E。E:disabled匹配用戶界面上處于禁用狀態(tài)的元素E。E:target匹配相關URL指向的E元素。page:first設置頁面容器第一頁使用的樣式。僅用于page

7、規(guī)則page:left設置頁面容器位于裝訂線左邊的所有頁面使用的樣式。僅用于page規(guī)則page:right設置頁面容器位于裝訂線右邊的所有頁面使用的樣式。僅用于page規(guī)則偽對象選擇器選擇符簡介E:first-letter/E:first-letter 設置對象內(nèi)的第一個字符的樣式。E:first-line/E:first-line設置對象內(nèi)的第一行的樣式。E:before/E:before設置在對象前（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用E:after/E:after設置在對象后（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。用來和content屬性一起使用E:selec

8、tion設置對象被選擇時的顏色。例：選擇器 pcolor:#FF0000;/*標記*/ #acolor:#00FF00;/*id*/ .acolor:#0000FF;/*class*/ acolor:#000000;/*屬性*/ pabcolor:#007777;/*多屬性*/ p aacolor:#00FFFF;/*嵌套*/ paacolor:#ffff00;/*直接嵌套*/ p bb,cccolor:#888888;/*多項*/ 標記 id class 屬性 多屬性 直接嵌套嵌套 多項 多項 chromeIE9例：關系選擇器 a,bcolor:#f00;/*并選擇器,#f00等同于#ff0

9、000*/ abcolor:#ff0;/*交選擇器*/ p Ecolor:#0f0;/*子孫選擇器*/ pEcolor:#0ff;/*子選擇器*/ F+pcolor:#00f;/*相鄰選擇器*/ Gpcolor:#f0f;/*兄弟選擇器*/ 并選擇 并選擇 交選擇 子選擇子孫選擇 相鄰選擇非相鄰 兄弟選擇兄弟選擇 chromeIE9例：屬性選擇器 acolor:#000000;/*屬性*/ abcolor:#007777;/*多屬性*/ pa=acolor:#aa0000;/*屬性值，注意無空格，否則變嵌套*/ pa=bccolor:#770000;/*屬性值包含單詞*/ pa|=abcolo

10、r:#00aa00;/*屬性值包含前綴*/ pa=abccolor:#0000aa;/*屬性值開頭*/ pa$=cdcolor:#000077;/*屬性值結(jié)尾*/ pa*=bdcolor:#777700;/*屬性值包含*/ 屬性 多屬性 屬性值 屬性值包含單詞 屬性值包含單詞 屬性值包含前綴(后無字符) 屬性值包含前綴(后接減號) 屬性值開頭 屬性值結(jié)尾 屬性值包含 樣式屬性定位 布局 彈性盒模型 尺寸 外補白內(nèi)補白邊框 背景顏色 字體文本列表表格內(nèi)容用戶界面 多列 轉(zhuǎn)換 過渡 動畫 打印媒體查詢樣式屬性-定位定位屬性簡介position 對象的定位方式（只讀）z-index對象的層疊順序to

11、p對象與其父對象頂部距離right對象與其父對象右邊距離bottom對象與其父對象底邊距離left對象與其父對象左邊距離樣式屬性-布局布局屬性簡介display對象是否及如何顯示float該屬性的值指出了對象是否及如何浮動。請參閱clear屬性clear該屬性的值指出了不允許有浮動對象的邊。請參閱float屬性visibility是否顯示對象。與display屬性不同，此屬性為隱藏的對象保留其占據(jù)的物理空間clip對象的可視區(qū)域。區(qū)域外的部分是透明的overflow 當對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容overflow-x 當對象的內(nèi)容超過其指定寬度時如何管理內(nèi)容overflow-y

12、 當對象的內(nèi)容超過其指定高度時如何管理內(nèi)容樣式屬性-彈性盒模型彈性盒模型屬性簡介box-orient彈性盒模型對象的子元素的排列方式。box-pack彈性盒模型對象的子元素的對齊方式。請參閱box-align兄弟屬性box-align彈性盒模型對象的子元素的對齊方式。請參閱box-pack兄弟屬性box-flex彈性盒模型對象的子元素如何分配其剩余空間。box-flex-group彈性盒模型對象的子元素的所屬組。box-ordinal-group 彈性盒模型對象的子元素的顯示順序。box-direction彈性盒模型對象的子元素的排列順序是否反轉(zhuǎn)。box-lines彈性盒模型對象的子元素是否可

13、以換行顯示。樣式屬性-尺寸尺寸屬性簡介width對象的寬度min-width對象的最小寬度max-width對象的最大寬度height對象的高度min-height對象的最小高度max-height 對象的最大高度樣式屬性-外補白外補白屬性簡介margin 對象四邊的外延邊距margin-top對象頂邊的外延邊距margin-right對象右邊的外延邊距margin-bottom 對象底邊的外延邊距margin-left對象左邊的外延邊距樣式屬性-內(nèi)補白內(nèi)補白屬性簡介padding 對象四邊的內(nèi)部邊距padding-top對象頂邊的內(nèi)部邊距padding-right對象右邊的內(nèi)部邊距paddi

14、ng-bottom對象底邊的內(nèi)部邊距padding-left對象左邊的內(nèi)部邊距樣式屬性-邊框邊框?qū)傩院喗閎order 復合屬性。設置對象邊框的特性border-width對象邊框?qū)挾萣order-style對象邊框樣式border-color對象邊框顏色border-top復合屬性。設置對象頂邊的特性border-top-width對象頂邊寬度border-top-style對象頂邊樣式border-top-color對象頂邊顏色border-right復合屬性。設置對象右邊的特性border-right-width對象右邊寬度border-right-style對象右邊樣式border-ri

15、ght-color對象右邊顏色border-bottom復合屬性。設置對象底邊的特性border-bottom-width 對象底邊寬度屬性簡介border-bottom-style對象底邊樣式border-bottom-color對象底邊顏色border-left復合屬性。置對象左邊的特性border-left-width對象左邊寬度border-left-style對象左邊樣式border-left-color對象左邊顏色border-image對象的邊框使用圖像來填充border-radius對象使用圓角邊框border-top-left-radius對象左上角圓角邊框border-to

16、p-right-radius 對象右上角圓角邊框border-bottom-right-radius對象右下角圓角邊框border-bottom-left-radius對象左下角圓角邊框box-shadow對象陰影box-reflect對象的倒影樣式屬性-色彩色彩屬性簡介color對象的顏色。請參閱顏色值opacity對象的不透明度。樣式屬性值-色彩值色彩值屬性簡介Color Name 用顏色名稱來指定顏色。包括基本顏色關鍵字、系統(tǒng)顏色、SVG顏色關鍵字等HEX十六進制記法。語法如：#rrggbb或#rgbRGBrgb記法。語法如：rgb(255,0,0)RGBArgba記法HSLhsl記法H

17、SLAhsla記法transparent全透明16個基本顏色關鍵字個基本顏色關鍵字ColorColor NameHEXRGBblack#0000000,0,0silver#C0C0C0192,192,192gray#808080128,128,128white#FFFFFF255,255,255maroon#800000128,0,0red#FF0000255,0,0purple#800080128,0,128fuchsia#FF00FF255,0,255green#0080000,128,0lime#00FF000,255,0olive#808000128,128,0yellow#FFFF0

18、0255,255,0navy#0000800,0,128blue#0000FF0,0,255teal#0080800,128,128aqua#00FFFF0,255,255樣式屬性-字體字體屬性簡介font 復合屬性。對象中的文本特性font-style對象中的字體樣式font-variant 對象中的文本是否為小型的大寫字母font-weight 對象中的文本字體的粗細font-size對象中的字體尺寸font-family 用于對象中文本的字體名稱序列font-stretch 對象中的文字是否橫向拉伸變形樣式屬性-文本文本屬性簡介text-indent對象中的文本的縮進text-overf

19、low是否使用一個省略標記（.）標示對象內(nèi)文本的溢出text-align對象中文本的對齊方式text-transform對象中的文本的大小寫text-decoration復合屬性。對象中的文本的裝飾，如下劃線、閃爍等text-decoration-line對象中的文本裝飾線條的位置。text-decoration-color對象中的文本裝飾線條的顏色。text-decoration-style對象中的文本裝飾線條的形狀。text-shadow對象中文本的文字是否有陰影及模糊效果text-fill-color對象中的文字填充顏色text-stroke復合屬性。對象中的文字的描邊屬性簡介text-

20、stroke-width 對象中的文字的描邊厚度text-stroke-color 對象中的文字的描邊顏色letter-spacing對象中的文字之間的間隔word-spacing對象中的單詞之間插入的空格數(shù)。vertical-align對象內(nèi)容的垂直對其方式word-wrap當當前行超過指定容器的邊界時是否斷開轉(zhuǎn)行white-space對象內(nèi)空格的處理方式direction文本流的方向unicode-bidi用于同一個頁面里存在從不同方向讀進的文本顯示。與direction屬性一起使用line-height對象的行高。即字體最底端與字體內(nèi)部頂端之間的距離tab-size對象中的制表符的長度樣

21、式屬性-列表列表屬性簡介list-style 復合屬性。設置列表項目相關內(nèi)容list-style-image作為對象的列表項標記的圖像list-style-position作為對象的列表項標記如何根據(jù)文本排列l(wèi)ist-style-type對象的列表項所使用的預設標記樣式屬性-表格表格屬性簡介table-layout 表格的布局算法border-collapse表格的行和單元格的邊是合并在一起還是按照標準的HTML樣式分開border-spacing當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距caption-side表格的caption對象是在表格的那一邊empty-cells當表格的

22、單元格無內(nèi)容時，是否顯示該單元格的邊框樣式屬性-內(nèi)容內(nèi)容屬性簡介content 用來和:after及:before偽元素一起使用，在對象前或后顯示內(nèi)容counter-increment設定當一個selector發(fā)生時計數(shù)器增加的值counter-reset將指定selector的計數(shù)器復位quotes對象內(nèi)使用的嵌套標記樣式屬性-多列多列屬性簡介outline 復合屬性。對象外的線條輪廓outline-width對象外的線條輪廓的寬度outline-style對象外的線條輪廓的樣式outline-color對象外的線條輪廓的顏色outline-offset對象外的線條輪廓偏移位置的數(shù)值nav-

23、index對象的導航順序。nav-up對象的導航方向。nav-right對象的導航方向。屬性簡介nav-down 對象的導航方向。nav-left對象的導航方向。cursor在對象上移動的鼠標指針采用何種系統(tǒng)預定義的光標形狀。zoom對象的縮放比例。box-sizing 對象的盒模型組成模式。resize對象的區(qū)域是否允許用戶縮放，調(diào)節(jié)元素尺寸大小。ime-mode是否允許用戶激活輸入中文，韓文，日文等的輸入法（IME）狀態(tài)。樣式屬性-用戶界面用戶界面屬性簡介columns 對象的列數(shù)和每列的寬度。復合屬性column-width 對象每列的寬度column-count 對象的列數(shù)column

24、-gap 對象的列與列之間的間隙column-rule 對象的列與列之間的邊框。復合屬性column-rule-width 對象的列與列之間的邊框厚度屬性簡介column-rule-style 對象的列與列之間的邊框樣式column-rule-color 對象的列與列之間的邊框顏色column-span 對象元素是否橫跨所有列column-fill 對象所有列的高度是否統(tǒng)一column-break-before 對象之前是否斷行column-break-after 對象之前是否斷行column-break-inside 對象內(nèi)部是否斷行樣式屬性-2D變換變換屬性簡介transform 對象的變

25、換transform-origin 對象中的變換所參照的原點樣式屬性-過渡過渡屬性簡介transition 復合屬性。對象變換時的過渡效果transition-property對象中的參與過渡的屬性transition-duration對象過渡的持續(xù)時間transition-timing-function對象中過渡的類型transition-delay對象延遲過渡的時間樣式屬性-動畫動畫屬性簡介animation 復合屬性。置對象所應用的動畫特效animation-name對象所應用的動畫名稱animation-duration對象動畫的持續(xù)時間animation-timing-functio

26、n對象動畫的過渡類型animation-delay對象動畫延遲的時間animation-iteration-count對象動畫的循環(huán)次數(shù)animation-direction對象動畫在循環(huán)中是否反向運動animation-play-state對象動畫的狀態(tài)animation-fill-mode對象動畫時間之外的狀態(tài)樣式屬性-打印打印屬性簡介page 顯示對象容器時使用的頁面類型page-break-before 對象之前出現(xiàn)的頁分割符page-break-after對象之后出現(xiàn)的頁分割符page-break-inside對象容器內(nèi)部出現(xiàn)的頁分割符樣式屬性-媒體特性媒體特性屬性簡介width定義

27、輸出設備中的頁面可見區(qū)域?qū)挾萮eight定義輸出設備中的頁面可見區(qū)域高度device-width定義輸出設備的屏幕可見寬度device-height定義輸出設備的屏幕可見高度orientation定義height是否大于或等于width。值portrait代表是，landscape代表否aspect-ratio定義width與height的比率device-aspect-ratio定義device-width與device-height的比率。如常見的顯示器比率：4/3, 16/9, 16/10屬性簡介color定義每一組輸出設備的彩色原件個數(shù)。如果不是彩色設備，則值等于0color-inde

28、x定義在輸出設備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表，則值等于0monochrome定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數(shù)。如果不是單色設備，則值等于0resolution定義設備的分辨率。如：96dpi, 300dpi, 118dpcmscan定義電視類設備的掃描工序grid用來查詢輸出設備是否使用柵格或點陣。只有1和0才是有效值，1代表是，0代表否CSS應用實例（需Chrome）h1font-size:16px;poverflow:hidden;height:1px;margin:302px 0 0;background:#ddd;divwidth:100px;hei

29、ght:100px;padding:10px;border-radius:61px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);

30、background:linear-gradient(top,#fff,#F6D66E);-moz-transform:translate(280px,300px);-webkit-transform:translate(280px,300px);-o-transform:translate(280px,300px);-ms-transform:translate(280px,300px);transform:translate(280px,300px);-moz-animation:animations 6s linear;-webkit-animation:animations 6s li

31、near;-o-animation:animations 1.5s linear-ms-animation:animations 1.5s linear;animation:animations 1.5s linear;div:hover-moz-animation-play-state:paused;-webkit-animation-play-state:paused;-o-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;-webkit-keyframes ani

32、mations0%-webkit-transform:translate(0,0);10%-webkit-transform:translate(0,300px);20%-webkit-transform:translate(60px,60px);30%-webkit-transform:translate(60px,300px);40%-webkit-transform:translate(120px,120px);50%-webkit-transform:translate(120px,300px);60%-webkit-transform:translate(180px,180px);7

33、0%-webkit-transform:translate(180px,300px);80%-webkit-transform:translate(240px,240px);90%-webkit-transform:translate(240px,300px);100%-webkit-transform:translate(280px,300px);-moz-keyframes animations0%-moz-transform:translate(0,0);10%-moz-transform:translate(0,300px);20%-moz-transform:translate(60

34、px,60px);30%-moz-transform:translate(60px,300px);40%-moz-transform:translate(120px,120px);50%-moz-transform:translate(120px,300px);60%-moz-transform:translate(180px,180px);70%-moz-transform:translate(180px,300px);80%-moz-transform:translate(240px,240px);90%-moz-transform:translate(240px,300px);100%-

35、moz-transform:translate(280px,300px);-o-keyframes animations0%-o-transform:translate(0,0);10%-o-transform:translate(0,300px);20%-o-transform:translate(60px,60px);30%-o-transform:translate(60px,300px);40%-o-transform:translate(120px,120px);50%-o-transform:translate(120px,300px);60%-o-transform:transl

36、ate(180px,180px);70%-o-transform:translate(180px,300px);80%-o-transform:translate(240px,240px);90%-o-transform:translate(240px,300px);100%-o-transform:translate(280px,300px);-ms-keyframes animations0%-ms-transform:translate(0,0);10%-ms-transform:translate(0,300px);20%-ms-transform:translate(60px,60px);30%-ms-transform:translate(60px,300px);40%-ms-transform:translate(120px,120px);50%-ms-transform:translate(120px,300px);60%-ms-transform:translate(180px,180px);70%-ms-transfo