| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| |
| --> |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> |
| <head> |
| <title>CSS Styles Window</title> |
| <link rel="stylesheet" href="ide.css" title="Oracle BLAFDoc" type="text/css"/> |
| </head> |
| |
| <body> |
| <p><a id="css_visual_CssStylesTC" name="css_visual_CssStylesTC"></a></p> |
| <div id="NBCSH882"><!-- infolevel="all" infotype="General" --><a id="sthref86" name="sthref86"></a> |
| <h1>CSS Styles Window</h1> |
| <a name="BEGIN" id="BEGIN"></a> |
| <p>The CSS Styles window enables you to edit the declarations of rules for HTML elements and selectors in a CSS file. |
| <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"> |
| <param name="content" value="http://www.oracle.com/pls/topic/lookup?ctx=nb8200&id=NBDAG2269"> |
| <param name="text" value="<html><u>How?</u></html>"> |
| <param name="textFontSize" value="medium"> |
| <param name="textColor" value="blue"> |
| </object> |
| </p> |
| <p>The upper pane of the CSS Styles window displays a list of the rules that are defined in the CSS file and the properties of elements that are selected when you use Inspect mode in the browser.</p> |
| <p>The lower pane of the CSS Styles window displays a list of the properties and values that are specified in the declarations of a rule.</p> |
| <p>The CSS Styles window contains the following elements.</p> |
| |
| <table summary="User interface elements and descriptions" dir="ltr" border="1" width="100%" frame="hsides" rules="groups" cellpadding="3" cellspacing="0"> |
| <col width="24%" /> |
| <col width="*" /> |
| <thead> |
| <tr align="left" valign="top"> |
| <th align="left" valign="bottom" id="r1c1-t5">Element</th> |
| <th align="left" valign="bottom" id="r1c2-t5">Description</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr align="left" valign="top"> |
| <td align="left" id="r2c1-t5" headers="r1c1-t5"> |
| <p>Selection</p> |
| </td> |
| <td align="left" headers="r2c1-t5 r1c2-t5">Click this tab to view the properties of the selected element. |
| <p>The features in this tab are only available when you run an HTML5 project in a browser with NetBeans integration enabled and the Inspect function is enabled.</p> |
| </td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r3c1-t5" headers="r1c1-t5"> |
| <p> Properties</p> |
| </td> |
| <td align="left" headers="r3c1-t5 r1c2-t5">This table displays a list of properties of the selected element..</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r4c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/elementstates.png" alt="Style Element States icon" title="Style Element States icon" /> Style Element States</p> |
| </td> |
| <td align="left" headers="r4c1-t5 r1c2-t5">Click to toggle display of checkboxes for element states.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r5c1-t5" headers="r1c1-t5"> |
| <p> Applied Styles</p> |
| </td> |
| <td align="left" headers="r5c1-t5 r1c2-t5">This table displays a list of styles that are applied to the selected element.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r6c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/cssnewrule.png" alt="Edit CSS Rules icon" title="Edit CSS Rules icon" /> Edit CSS Rules</p> |
| </td> |
| <td align="left" headers="r6c1-t5 r1c2-t5">Click to open the Edit CSS Rules dialog box.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r7c1-t5" headers="r1c1-t5"> |
| <p>Document</p> |
| </td> |
| <td align="left" headers="r7c1-t5 r1c2-t5">Click this tab to view the style sheets and CSS rules associated with the current file. Double-click a style sheet to open the stylesheet in the editor. Double-click a rule name to move the insert cursor to the line in the style sheet that contains the rule definition.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r8c1-t5" headers="r1c1-t5"> |
| <p> Filter Text Field</p> |
| </td> |
| <td align="left" headers="r8c1-t5 r1c2-t5">Type a string to filter the list of CSS rules and limit the list of displayed rules to the rules that contain the string.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r9c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/cssnewrule.png" alt="Edit CSS Rules icon" title="Edit CSS Rules icon" /> Edit CSS Rules</p> |
| </td> |
| <td align="left" headers="r9c1-t5 r1c2-t5">Click to open the Edit CSS Rules dialog box.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r10c1-t5" headers="r1c1-t5"> |
| <p>Properties Toolbar</p> |
| </td> |
| <td align="left" headers="r10c1-t5 r1c2-t5">Use the icons in the toolbar to modify how the list of properties is displayed and to add new properties to the selected rule. |
| <p>The name of the selected CSS rule is displayed in the toolbar.</p> |
| </td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r11c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/find.gif" alt="Search icon" title="Search icon" /> Filter Items</p> |
| </td> |
| <td align="left" headers="r11c1-t5 r1c2-t5">Click to toggle the text field to filter the list of properties.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r12c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/cssviewbyupdated.png" alt="Show Set Properties Only icon" title="Show Set Properties Only icon" /> Show Set Properties Only</p> |
| </td> |
| <td align="left" headers="r12c1-t5 r1c2-t5">Click to display only the properties that have a specific value.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r13c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/cssviewbycategory.png" alt="Show Categorized Properties icon" title="Show Categorized Properties icon" /> Show Categorized Properties</p> |
| </td> |
| <td align="left" headers="r13c1-t5 r1c2-t5">Click to display all properties organized by category.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r14c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/sortalpha.png" alt="Show All Properties" title="Show All Properties" /> Show All Properties</p> |
| </td> |
| <td align="left" headers="r14c1-t5 r1c2-t5">Click to display all properties, listed alphabetically.</td> |
| </tr> |
| <tr align="left" valign="top"> |
| <td align="left" id="r15c1-t5" headers="r1c1-t5"> |
| <p> <img width="16" height="16" src="img/cssnewproperty.png" alt="Add CSS Property icon" title="Add CSS Property icon" /> Add CSS Property</p> |
| </td> |
| <td align="left" headers="r15c1-t5 r1c2-t5">Click to open a dialog box that enables you to add properties to the selected rule that is displayed in the lower pane of the window.</td> |
| </tr> |
| </tbody> |
| </table> |
| <br /> |
| <!-- --> |
| <p>To delete a rule, click the CSS rule in the toolbar and choose Delete Rule in the popup menu. To delete a property, right-click the property in the list and choose Remove Property in the popup menu.</p> |
| <a id="NBCSH897" name="NBCSH897"></a> |
| <hr><p><b>Related Topics</b></p> |
| <p><i>Developing Applications with NetBeans IDE</i>, |
| <object classid="java:org.netbeans.modules.javahelp.BrowserDisplayer"> |
| <param name="content" value="http://www.oracle.com/pls/topic/lookup?ctx=nb8200&id=NBDAG2266"> |
| <param name="text" value="<html><u>"Creating Cascading Style Sheets"</u></html>"> |
| <param name="textFontSize" value="medium"> |
| <param name="textColor" value="blue"> |
| </object> |
| </p> |
| |
| <!-- --> |
| <!-- Start Footer --> |
| |
| |
| <table summary="" cellspacing="0" cellpadding="0" width="100%"> |
| <tr> |
| <td align="left" width="86%"><a href="legal_notice.htm"> |
| Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements; and to You under the Apache License, Version 2.0.</a> |
| </td> |
| </tr> |
| </table> |
| <!-- --> |
| </body> |
| </html> |
