GameStar 2005 May

home *** CD-ROM | disk | FTP | other *** search

/ GameStar 2005 May / Gamestar_73_2005-05_dvd.iso / Programy / amaya / amaya-WinXP-9.1.exe / doc / WX / StyleSheets.html < prev next >

Wrap

Extensible Markup Language | 2005-02-23 | 20.8 KB | 480 lines

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="GENERATOR" content="amaya 9.1, see http://www.w3.org/Amaya/" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Style Sheets</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body xml:lang="en" lang="en"> <div> <img alt="Amaya" src="../../resources/icons/22x22/logo.png" class="logo" /> <a href="Xml.html" accesskey="p"><img alt="previous" src="../../resources/icons/misc/left.png" /></a> <a href="Manual.html" accesskey="t"><img alt="top" src="../../resources/icons/misc/up.png" /></a> <a href="Searching.html" accesskey="n"><img alt="next" src="../../resources/icons/misc/right.png" /></a> </div> <div class="toc"> <ul> <li><a href="#Cascading">Cascading Style Sheets (CSS)</a> <ul> <li><a href="#About">About Linking External and User Style Sheets</a> <ul> <li><a href="#Handling">Handling External CSS Style Sheets</a></li> <li><a href="#Creating3">Creating and Updating some CSS properties</a></li> </ul> </li> <li><a href="#Showing">Showing Applied Style</a></li> <li><a href="#Associatin">Associating a Class to an Element</a></li> <li><a href="#Creating">Creating and Updating a Style Attribute</a> <ul> <li><a href="#Colors">Colors</a></li> <li><a href="#Characters">Characters</a></li> <li><a href="#Format">Format</a></li> <li><a href="#Background">Background image</a></li> <li><a href="#Creating1">Creating a Generic Style for an Element or Class</a></li> </ul> </li> <li><a href="#About1">About Applying Style Using HTML Elements</a> <ul> <li><a href="#Creating2">Creating HTML Style Elements</a></li> <li><a href="#Informatio">Information Types</a></li> <li><a href="#Character">Character Elements</a></li> <li><a href="#Removing">Removing Style Elements</a></li> </ul> </li> </ul> </li> </ul> </div> <div id="page_body"> <h2 id="Cascading">Cascading Style Sheets (CSS)</h2> The Style menu enables you to change the appearance of your documents using Cascading Style Sheets (CSS) <h3 id="About">About Linking External and User Style Sheets</h3> A document can link to several external style sheets that are downloaded with the document and applied to it. An external style sheet can apply to multiple documents. When the same style sheet applies to several displayed documents, Amaya loads only one instance of the style sheet. Any user can define a specific style sheet that applies to all documents loaded on their system. This style sheet is called the user's style sheet. It is stored in the user's local environment, in the <code><a href="Configure.html#AmayaHome">AmayaHome</a></code> directory as the local file <code>amaya.css</code>. For example, if you prefer to display documents in Helvetica on your screen and print them in small size, you can create a user's style sheet with following CSS rules: <code>@media print { body {font-size: 10pt} } @media screen { body {font-family: Helvetica} }</code> <h4 id="Handling">Handling External CSS Style Sheets</h4> The Style menu provides a set of commands which enable you to control external and user's CSS style sheets. <ul> <li>Select Link to link a new CSS style sheet to the current document. Amaya displays a pointing hand cursor. This command shows a dialog box. <ul> <li>If the target CSS style sheet is displayed in another Amaya window and you want to select it by click, click the Click button then click anywhere within that window to create the link.</li> <li>If the target CSS style sheet is displayed in another tab and you want to select it by click, click the Click button then change the current tab and click anywhere within the target CSS style sheet to create the link.</li> <li>If the target CSS style sheet is a local file you can use the Browse button to select it.</li> <li>Else type the URI (like http://www.w3.org/file.css) of the target CSS style sheet and then Confirm to create the link.</li> </ul> </li> <li>Select Open to open a CSS style sheet applied to the current document. </li> <li>Select Disable to remove the effect of an enabled CSS style sheet from the current document. This command does not affect the CSS link in the document. </li> <li>Select Enable to reapply the effects of a disabled CSS style sheet to the current document. This command does not affect the CSS link in the document. </li> <li>Select Remove to remove an external CSS style sheet. This command is similar to the Disable command, but it also removes the element link that attaches the external CSS style sheet.</li> </ul> The Open, Disable and Enable commands can be applied to the user's preference style sheet, but the Link and Remove commands apply to only external CSS style sheets. <h4 id="Creating3">Creating and Updating some CSS properties</h4> <ul> <li><a href="#Colors">Colors</a></li> <li><a href="#Characters">Characters</a></li> <li><a href="#Format">Format</a></li> </ul> Following <a href="#Colors">Colors</a>, <a href="#Characters">Characters</a>, and <a href="#Format">Format</a> tools enable you to directly generate CSS properties into a style sheet file. When the style property is applied and the selection is within a style sheet, Amaya inserts the CSS property at the current position. <h3 id="Showing">Showing Applied Style</h3> If there are a lot of style sheets attached to a document, it's difficult to understand why an element is displayed with that color or these margins, etc. To help the user, Amaya provides a Show applied style command that displays into an external window CSS style properties applied to the first current selected element. The user can then display the CSS source that generates each property by double (or simple) click on the property. As long as the window is open, Amaya updates the window content when the selection changes. Hitting <code>F2</code>, the user can so see CSS properties applied to enclosing elements. <h3 id="Associatin">Associating a Class to an Element</h3> All classes available for the document are listed in the Apply Class tool. To apply a class to an element: <ol> <li>Choose the right entry within the Apply Class tool.</li> <li>If you want to select the class applied to another element, you have to select this element, then click the <img alt="Refresh" src="../../resources/icons/16x16/refresh.png" /> button. The Apply Class list is refreshed and the current applied class is selected.</li> <li>Select a piece of text or an element. To select an element, you have to click within the element, then use the <code>F2</code> key until the bottom line of the window displays its type in first position. You can also use the Structure view to select it.</li> <li>Click the <img alt="ok" src="../../resources/icons/16x16/ok.png" /> button to apply the class to the current selection. If a piece of text is selected, Amaya will generate a span element to enclose the current text and the class attribute will be attached to this new span element.</li> </ol> To associate a class with an element, you can also use the Attributes tool. This <a href="Attributes.html">Attributes</a> tool also enables you to delete a class attribute from an element or to change it (the class attribute is handled like any other attribute). To remove the class of an element: <ul> <li>You can edit the class attribute in the Attributes tool. When the element is selected, you click on the [X] of the entry to remove the class attribute, or you click on the entry and edit its value then confirm with the apply (<img alt="ok" src="../../resources/icons/16x16/ok.png" />) button. </li> <li>You can also remove or edit the class attribute in the structure view. To remove the class attribute, you click in the value, <code>F2</code> lets you select the whole value, then hit the <code>Delete</code> key twice. </li> </ul> <h3 id="Creating">Creating and Updating a Style Attribute</h3> Amaya provides tools that let you associate a style attribute with the currently selected elements: <h4 id="Colors">Colors</h4> The Colors tool lets you choose the foreground and background colors from a palette. When the Colors tool is open: <ul> <li>A button <img alt="default" src="../../resources/icons/16x16/default.png" /> (default value) or a colored rectangle shows the foreground color.</li> <li>A button <img alt="default" src="../../resources/icons/16x16/default.png" /> (default value) or a colored rectangle shows the background color.</li> <li>A button <img alt="switch" src="../../resources/icons/misc/switch_colors.png" /> allows one to switch foreground and background colors.</li> <li>A button <img alt="Default_color" src="../../resources/icons/misc/black_white.png" /> allows one to restore default colors (default values).</li> <li>A button <img alt="Refresh" src="../../resources/icons/16x16/refresh.png" /> allows one to initialize the foreground and background colors form the current selection.</li> <li>A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply the foreground and background colors to the current selection.</li> </ul> To select a new foreground or background color, one must click the associated button. A palette allows then to freely select a color. The default option enables you to remove the corresponding style information for the selected elements. Selected colors are not immediately applied to the current selection. The apply button must be clicked. Note: It's important to selected enough contrasted foreground and background colors. <h4 id="Characters">Characters</h4> The Characters tool lets you choose the font family, the character style, the body size, and the underline style. <ul> <li>A Font family selector provides limited list of fonts. A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply only this value to the current selection.</li> <li>An Underline selector provides the list of possible underline values. A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply only this value to the current selection.</li> <li>A Body size selector provides limited list of font sizes expressed in points. A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply only this value to the current selection.</li> <li>A Character style selector provides limited list of character styles. A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply only this value to the current selection.</li> <li>A Boldness selector provides a limited list of possible boldness values. A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply only this value to the current selection.</li> <li>A button <img alt="Refresh" src="../../resources/icons/16x16/refresh.png" /> allows one to initialize values form the current selection.</li> <li>A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply all selected values to the current selection.</li> </ul> The default option enables you to remove the corresponding style information for the selected elements. Selected values are not immediately applied to the current selection. The apply button must be clicked. <h4 id="Format">Format</h4> The Format tool enables you to set alignment, indentation, justification, and line spacing. <ul> <li>An alignmentáselector: click left (<img alt="left" src="../../resources/icons/16x16/format_left.png" />), right ( <img alt="right" src="../../resources/icons/16x16/format_right.png" />), center ( <img alt="center" src="../../resources/icons/16x16/format_center.png" />), or justify ( <img alt="justify" src="../../resources/icons/16x16/format_justify.png" />), or <img alt="default" src="../../resources/icons/16x16/default.png" /> for the default value.</li> <li>An Indent selector that enables you to type a point value. Click the <img alt="default" src="../../resources/icons/16x16/default.png" /> button for the default value.</li> <li>A Line spacing selector that enables you to type o point value. Click the <img alt="default" src="../../resources/icons/16x16/default.png" /> button for the default value.</li> <li>A button <img alt="Refresh" src="../../resources/icons/16x16/refresh.png" /> allows one to initialize values form the current selection.</li> <li>A button <img alt="ok" src="../../resources/icons/16x16/ok.png" /> allows one to apply values to the current selection.</li> </ul> The default option enables you to remove the corresponding style information for the selected elements. Selected values are not immediately applied to the current selection. The apply button must be clicked. <h4 id="Background">Background image</h4> This entry in the Style menu enables you to choose a background image and its repeat mode. To add a background image: <ol> <li>Select an element. To select an element, you have to click within the element, then use the <code>F2</code> key until the bottom line of the window displays its type in first position. You can also use the Structure view to select it.</li> <li>Click the Background image entry in the Style menu to open the dialogue box which enables you to: <ul> <li>Enter the Image URI or browse. </li> <li>Select the repeat mode: repeat (<img alt="repeat" src="../../resources/icons/16x16/BG_repeat.png" />), x-repeat ( <img alt="x-repeat" src="../../resources/icons/16x16/BG_repeat_x.png" />), y-repeat (<img alt="y-repeat" src="../../resources/icons/16x16/BG_repeat_y.png" />), or no-repeat (<img alt="no-repeat" src="../../resources/icons/16x16/BG_norepeat.png" />).</li> </ul> </li> </ol> To remove a background image: <ul> <li>Edit the style attribute in the Attributes tool. When the element is selected, you click on the [X] before the entry to remove the style attribute, or you click on the entry and edit its value then confirm with the apply (<img alt="ok" src="../../resources/icons/16x16/ok.png" />) button. </li> <li>Or Remove or edit the style Attribute in the structure view. You select directly the style attribute content and remove the background-image rule. To remove the style attribute you click within the value, <code>F2</code> to select the whole value, then hit the <code>Delete</code> key twice. </li> </ul> <h4 style="" id="Creating1">Creating a Generic Style for an Element or Class</h4> When a style attribute is associated with an element, you can use that element as a model for creating or modifying a style rule by using the Create Rule command. To create a generic style for an element or class: <ol> <li>Select the element you wish to use as the template. By default the selection is set to the character string, and you have to press the <code>F2</code> key to select the enclosing element. Note: You must select only one element and this element must have a style attribute. </li> <li>Choose Create Rule from the Style menu. Amaya opens a dialog displaying a list of CSS selectors. This list contains all classes that are defined for the current document (including those defined in linked CSS style sheets), as well as the element type to which the style is associated. </li> <li>Choose a selector in this list or enter a new class name and click Confirm. The style of the selected element is then associated with the chosen selector and the style attribute is removed from the selected element. Its content is moved to the <code>style</code> element, in the document <code>HEAD</code>, and all elements matching the selector are displayed with the new style. </li> </ol> When a new class is created with the command Create Rule, this class is automatically added to the list of the Apply Class tool. <h3 id="About1">About Applying Style Using HTML Elements</h3> HTML provides some character-level elements so you can associate style with character strings. Two options on the XHTML menu enable you to handle these HTML elements: <ul> <li>Information type</li> <li>Character element</li> </ul> <h4 id="Creating2">Creating HTML Style Elements</h4> Two submenus on the XHTML menu enable you to add HTML elements to your CSS style sheet: Information Type and Character Elements. <h4 id="Informatio">Information Types</h4> The Information Type submenu lists HTML elements that define abstract styles. To apply an information type: <ol> <li>Select a character string in your page.</li> <li>Choose an option from the Information Types submenu. The selected character string displays in the chosen style. </li> </ol> Three of these styles are also available in the XHTML tool: emphasis (<img src="../../resources/icons/22x22/XHTML_I.png" alt="Emphasis button" />), strong (<img src="../../resources/icons/22x22/XHTML_B.png" alt="Strong button" />) and <code>code</code> (<img src="../../resources/icons/22x22/XHTML_T.png" alt="Code button" />). <h4 id="Character">Character Elements</h4> The Character Elements submenu of the XHTML menu provides another set of style elements. To apply a character element: <ol> <li>Select a character string in your page.</li> <li>Choose an option from the Character Elements submenu. The selected character string displays the chosen style. </li> </ol> <h4 id="Removing">Removing Style Elements</h4> áAll commands of the submenus Information Types and Character Elements are removed when you apply them twice. To remove a style element: <ol> <li>Select the element you want to remove. By default the selection is set to the character string, and you have to press the <code>F2</code> key to select the enclosing element.</li> <li>Reapply the command from the Information Type or Character Elements submenu of the XHTML menu.</li> </ol> </div> </body> </html>