css3詳解3課件chapter12用戶界面

CSS3用戶界面CSS3appearanceappearance屬性設(shè)置或檢索外觀按照本地默認(rèn)樣式。語法appearance：none|button|button-bevel...;兼容性所有主流瀏覽器都不支持appearance屬性。FireFox2+（-moz-）、Chrome4+（-webkit-）、Safari6+（-webkit-）Opera15+（-webkit-）、AndroidBrowser2.1+（-webkit-）CSS3appearance屬性值（110個）none|button|button-arrow-down|button-arrow-next|button-arrow-previous|button-arrow-up|button-bevel|button-focus|caps-lock-indicator|caret|checkbox|checkbox-container|checkbox-label|checkmenuitem|default-button|dualbutton|groupbox|listbox|listitem|media-fullscreen-button|media-mute-button|media-play-button|media-seek-back-button|media-seek-forward-button|media-slider|media-sliderthumb|menuarrow|menubar|menucheckbox|menuimage|menuitem|menuitemtext|menulist|menulist-button|menulist-text|menulist-textfield|menupopup|menuradio|menuseparator|meterbar|meterchunk|progressbar|progressbar-vertical|progresschunk|progresschunk-vertical|push-button|radio|radio-container|radio-label|radiomenuitem|resizer|resizerpanel|scale-horizontal|scalethumbend|scalethumb-horizontal|scalethumbstart|scalethumbtick|scalethumb-vertical|scale-vertical|scrollbarbutton-up|scrollbarbutton-right|scrollbarbutton-down|scrollbarbutton-left|scrollbargripper-horizontal|scrollbargripper-vertical|scrollbarthumb-horizontal|scrollbarthumb-vertical|scrollbartrack-horizontal|scrollbartrack-vertical|searchfield|searchfield-cancel-button|searchfield-decoration|searchfield-results-button|searchfield-results-decoration|separator|sheet|slider-horizontal|sliderthumb-horizontal|sliderthumb-vertical|slider-vertical|spinner|spinner-downbutton|spinner-textfield|spinner-upbutton|splitter|square-button|statusbar|statusbarpanel|tab|tabpanel|tabpanels|tab-scroll-arrow-back|tab-scroll-arrow-forward|textarea|textfield|textfield-multiline|toolbar|toolbarbutton|toolbarbutton-dropdown|toolbargripper|toolbox|tooltip|treeheader|treeheadercell|treeheadersortarrow|treeitem|treeline|treetwisty|treetwistyopen|treeviewCSS3text-overflowtext-overflow屬性當(dāng)塊容器<‘overflow’>為非visible時，定義內(nèi)聯(lián)內(nèi)容溢出其塊容器是否截斷。語法text-overflow：clip|ellipsis參數(shù)說明clip：當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分裁切掉；ellipsis：當(dāng)內(nèi)聯(lián)內(nèi)容溢出塊容器時，將溢出部分替換為（...）。舉個栗子CSS3outlineoutline屬性復(fù)合屬性。設(shè)置或檢索對象外的線條輪廓。畫在border外面，不占據(jù)布局空間，不影響元素尺寸；outlines可能是非矩形；語法outline：<'outline-width'>||<'outline-style'>||<'outline-color'>參數(shù)說明指定輪廓邊框的寬度、樣式和顏色。舉個栗子CSS3outline-widthoutline-width屬性設(shè)置或檢索對象外的線條輪廓的寬度。語法outline-width：<length>|thin|medium|thick參數(shù)說明<length>：用長度值來定義輪廓的厚度，不允許負(fù)值；medium：定義默認(rèn)寬度的輪廓；thin：定義比默認(rèn)寬度細(xì)的輪廓；thick：定義比默認(rèn)寬度粗的輪廓。舉個栗子CSS3outline-coloroutline-color屬性設(shè)置或檢索對象外的線條輪廓的顏色。語法outline-color：<color>|invert參數(shù)說明<color>：指定顏色；invert：使用背景色的反色（僅IE和Opera有效）。舉個栗子CSS3outline-styleoutline-style屬性設(shè)置或檢索對象外的線條輪廓的樣式。語法outline-style：none|dotted|dashed|solid|double|groove|ridge|inset|outset參數(shù)說明none：無輪廓。與任何指定的<'outline-width'>值無關(guān)；dotted：點狀輪廓；dashed：虛線輪廓；solid：實線輪廓；double：雙線輪廓，兩條單線與其間隔的和等于指定的<'outline-width'>值；groove：3D凹槽輪廓；ridge：3D凸槽輪廓；inset：3D凹邊輪廓；outset：3D凸邊輪廓。CSS3outline-offsetoutline-offset屬性設(shè)置或檢索對象外的線條輪廓偏移容器的值。語法outline-offset：<length>參數(shù)說明<length>：用長度值來定義輪廓偏移，允許負(fù)值。舉個栗子CSS3nav-indexnav-index屬性設(shè)置或檢索對象的導(dǎo)航順序。語法nav-index：auto|<number>參數(shù)說明auto：元素的導(dǎo)航焦點順序由客戶端自動分配；<number>：用浮點數(shù)來定義元素的導(dǎo)航焦點順序，若某元素的該值等于1則意味著該元素最先被導(dǎo)航，當(dāng)若干個元素的nav-index值相同時，則按照文檔的先后順序進(jìn)行導(dǎo)航。CSS3nav-upnav-up屬性設(shè)置或檢索對象的導(dǎo)航方向。語法nav-up：auto|<id>[current|root|<target-name>]?參數(shù)說明auto：默認(rèn)順序；<id>：被導(dǎo)航元素的id；<target-name>：框架目標(biāo)頁面間的元素焦點導(dǎo)航。該屬性有被w3c標(biāo)準(zhǔn)移除的風(fēng)險CSS3nav-rightnav-right屬性設(shè)置或檢索對象的導(dǎo)航方向。語法nav-right：auto|<id>[current|root|<target-name>]?參數(shù)說明auto：默認(rèn)順序；<id>：被導(dǎo)航元素的id；<target-name>：框架目標(biāo)頁面間的元素焦點導(dǎo)航。該屬性有被w3c標(biāo)準(zhǔn)移除的風(fēng)險CSS3nav-downnav-down屬性設(shè)置或檢索對象的導(dǎo)航方向。語法nav-down：auto|<id>[current|root|<target-name>]?參數(shù)說明auto：默認(rèn)順序；<id>：被導(dǎo)航元素的id；<target-name>：框架目標(biāo)頁面間的元素焦點導(dǎo)航。該屬性有被w3c標(biāo)準(zhǔn)移除的風(fēng)險CSS3nav-leftnav-left屬性設(shè)置或檢索對象的導(dǎo)航方向。語法nav-left：auto|<id>[current|root|<target-name>]?參數(shù)說明auto：默認(rèn)順序；<id>：被導(dǎo)航元素的id；<target-name>：框架目標(biāo)頁面間的元素焦點導(dǎo)航。該屬性有被w3c標(biāo)準(zhǔn)移除的風(fēng)險CSS3cursorcursor屬性設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。語法cursor：[<url>[<x><y>]?,]*[auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing]舉個栗子CSS3zoomzoom屬性設(shè)置或檢索對象的縮放比例。語法zoom：normal|<number>|<percentage>參數(shù)說明normal：使用對象的實際尺寸；<number>：用浮點數(shù)來定義縮放比例，不允許負(fù)值；<percentage>：用百分比來定義縮放比例，不允許負(fù)值。舉個栗子CSS3box-sizingbox-sizing屬性設(shè)置或檢索對象的盒模型組成模式。語法box-sizing：content-box|border-box參數(shù)說明content-box：padding和border不被包含在定義的width和height之內(nèi)；border-box：padding和border被包含在定義的width和height之內(nèi)。舉個栗子CSS3resizeresize屬性設(shè)置或檢索對象的區(qū)域是否允許用戶縮放，調(diào)節(jié)元素尺寸大小。語法resize：none|both|horizontal|vertical參數(shù)說明none：不允許用戶調(diào)整元素大小；both：用戶可以調(diào)節(jié)元素的寬度和高度；horizontal：用戶可以調(diào)節(jié)元素的寬度；vertical：用戶可以調(diào)節(jié)元素的高度。舉個栗子CSS3ime-modeime-mode屬性設(shè)置或檢索是否允許用戶激活輸入中文，韓文，日文等的輸入法（IME）狀態(tài)。語法ime-mode：auto|normal|active|inactive|disabled參數(shù)說明auto：不影響IME(inputmethodeditor)的狀態(tài)；normal：正常的IME狀態(tài)；active：指定所有使用ime輸入的字符，即激活本地語言輸入法，用戶仍可以撤銷激活ime；inactiv