📄 ui.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>User interface</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="tables.html"><link rel="next" href="aural.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="tables.html">previous</a> <a href="aural.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">18 User interface</H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="ui.html#cursor-props" class="tocxref">18.1 Cursors: the <span class="propinst-cursor">'cursor'</span> property</a> <li class="tocline2"><a href="ui.html#system-colors" class="tocxref">18.2 User preferences for colors</a> <li class="tocline2"><a href="ui.html#system-fonts" class="tocxref">18.3 User preferences for fonts</a> <li class="tocline2"><a href="ui.html#dynamic-outlines" class="tocxref">18.4 Dynamic outlines: the <span class="index-def" title="outline">'outline'</span> property</a> <ul class="toc"> <li class="tocline3"><a href="ui.html#q5" class="tocxref">18.4.1 Outlines and the focus</a> </ul> <li class="tocline2"><a href="ui.html#q6" class="tocxref">18.5 Magnification</a> </ul></div><H2>18.1 <a name="cursor-props">Cursors:</a> the <a href="ui.html#propdef-cursor" class="noxref"><spanclass="propinst-cursor">'cursor'</span></a> property</H2><div class="propdef"><dl><dt><span class="index-def" title="'cursor'"><a name="propdef-cursor" class="propdef-title"><strong>'cursor'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td>[ [<a href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri"><uri></span></a> ,]* [ auto | crosshair | default | pointer | move | e-resize| ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize| w-resize| text | wait | help ] ] | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>auto<tr valign=baseline><td><em>Applies to:</em> <td>all elements<tr valign=baseline><td><em>Inherited:</em> <td>yes<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>, <a href="media.html#interactive-media-group" class="noxref">interactive</a></table></dl></div><P>This property specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:<dl><dt><strong>auto</strong><dd>The UA determines the cursor to display based on the currentcontext.<dt><strong>crosshair</strong><dd>A simple crosshair (e.g., short line segments resembling a "+" sign).<dt><strong>default</strong><dd>The platform-dependent default cursor. Often rendered as an arrow.<dt><strong>pointer</strong><dd>The cursor is a pointer that indicates a link.<dt><strong>move</strong><dd>Indicates something is to be moved.<dt><strong>e-resize, ne-resize, nw-resize, n-resize, se-resize,sw-resize, s-resize, w-resize</strong><dd>Indicate that some edge is to be moved. For example, the'se-resize' cursor is used when the movement starts from thesouth-east corner of the box.<dt><strong>text</strong><dd>Indicates text that may be selected. Often rendered as an I-bar.<dt><strong>wait</strong><dd>Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.<dt><strong>help</strong><dd>Help is available for the object under the cursor. Often rendered as a question mark or a balloon. <dt><a href="syndata.html#value-def-uri" class="noxref"><span class="value-inst-uri"><strong><uri></strong></span></a><dd>The user agent retrieves the cursor from the resourcedesignated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attemptto handle the second, etc. If the user agent cannot handleany user-defined cursor, it must use the generic cursorat the end of the list.</dl><div class="example"><P style="display:none">Example(s):</P><P><PRE>P { cursor : url("mything.cur"), url("second.csr"), text; }</PRE></div><H2>18.2 <a name="system-colors">User preferences for colors</a></H2><p>In addition to being able to assign pre-defined <ahref="syndata.html#color-units">color values</a> to text, backgrounds,etc., CSS2 allows authors to specify colors in a manner thatintegrates them into the user's graphic environment. Style rules thattake into account user preferences thus offer the followingadvantages: <ol><li>They produce pages that fit the user's defined look and feel.</li><li>They produce pages that may be more accessible as the current usersettings may be related to a disability.</li></ol><p>The set of values defined for system colors is intended to beexhaustive. For systems that do not have a corresponding value, thespecified value should be mapped to the nearest system attribute, orto a default color.</p><p>The following lists additional values for color-related CSSattributes and their general meaning. Any color property (e.g., <a href="colors.html#propdef-color" class="noxref"><spanclass="propinst-color">'color'</span></a> or <a href="colors.html#propdef-background-color" class="noxref"><spanclass="propinst-background-color">'background-color'</span></a>) can takeone of the following names. Although these are case-insensitive, it isrecommended that the mixed capitalization shown below be used, tomake the names more legible.</p><dl><dt><strong>ActiveBorder</strong><dd>Active window border.<dt><strong>ActiveCaption</strong><dd>Active window caption.<dt><strong>AppWorkspace</strong><dd>Background color of multiple document interface.<dt><strong>Background</strong><dd>Desktop background.<dt><strong>ButtonFace</strong><dd>Face color for three-dimensional display elements.<dt><strong>ButtonHighlight</strong><dd>Dark shadow for three-dimensional display elements (for edges facing away from the light source).<dt><strong>ButtonShadow</strong><dd>Shadow color for three-dimensional display elements.<dt><strong>ButtonText</strong><dd>Text on push buttons.<dt><strong>CaptionText</strong><dd>Text in caption, size box, and scrollbar arrow box.<dt><strong>GrayText</strong><dd>Grayed (disabled) text. This color is set to #000 ifthe current display driver does not support a solid gray color.<dt><strong>Highlight</strong><dd>Item(s) selected in a control.<dt><strong>HighlightText</strong><dd>Text of item(s) selected in a control.<dt><strong>InactiveBorder</strong><dd>Inactive window border.<dt><strong>InactiveCaption</strong><dd>Inactive window caption.<dt><strong>InactiveCaptionText</strong><dd>Color of text in an inactive caption.<dt><strong>InfoBackground</strong><dd>Background color for tooltip controls.<dt><strong>InfoText</strong><dd>Text color for tooltip controls.<dt><strong>Menu</strong><dd>Menu background.<dt><strong>MenuText</strong><dd>Text in menus.<dt><strong>Scrollbar</strong><dd>Scroll bar gray area.<dt><strong>ThreeDDarkShadow</strong><dd>Dark shadow for three-dimensional display elements.<dt><strong>ThreeDFace</strong><dd>Face color for three-dimensional display elements.<dt><strong>ThreeDHighlight</strong><dd>Highlight color for three-dimensional display elements.<dt><strong>ThreeDLightShadow</strong><dd>Light color for three-dimensional display elements(for edges facing the light source).<dt><strong>ThreeDShadow</strong><dd>Dark shadow for three-dimensional display elements.<dt><strong>Window</strong><dd>Window background.<dt><strong>WindowFrame</strong><dd>Window frame.<dt><strong>WindowText</strong><dd>Text in windows.</dl><div class="example"><P style="display:none">Example(s):</P><P>For example, to set the foreground and background colors of a paragraphto the same foreground and background colors of the user's window, ⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -