Style: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
No edit summary
 
(4 intermediate revisions by one other user not shown)
Line 1: Line 1:
App Studio programs run within a special version of a web browser.  
AppStudio programs run within a special version of a web browser.  
As a result, they can inherit a lot of the properties of the environment they run in.  
As a result, they can inherit a lot of the properties of the environment they run in.  
You can access these properties from within your app, either in code or in the style property in the [[Properties Window]].
You can access these properties from within your app, either in code or in the style property in the [[Properties Window]].
Line 13: Line 13:
It is not a complete list: there are additional items in the full HTML documentation. In addition, some browsers may have additional members not shown here.
It is not a complete list: there are additional items in the full HTML documentation. In addition, some browsers may have additional members not shown here.


To set style properties for a Control, [[Form]] or the Project, edit the style property in the [[Properties Window]] using the CSS style. If you are setting more than one style, separate using semicolons. Example:
To set style properties for a Control, [[Form]] or the Project, edit the style property in the [[Properties Window]] using the CSS style. If you are setting more than one style, separate using semicolons. All styles must be on a single line.
<pre>
<pre>
  border-bottom-color:red; border-top-color:blue;
  border-bottom-color:red; border-top-color:blue;
</pre>
 
To set style properties in your code, use the JavaScript form:
<pre>
  Button1.style.borderBottomColor = "red"
  Button1.style.borderTopColor = "blue"
</pre>
</pre>



Latest revision as of 09:53, 18 December 2014

AppStudio programs run within a special version of a web browser. As a result, they can inherit a lot of the properties of the environment they run in. You can access these properties from within your app, either in code or in the style property in the Properties Window.

Naming Convention

There are two naming conventions for style which are made up of more than one word.

  • CSS: words are all lower case, separated by dashes. Example: border-bottom-style
  • JavaScript: words are combined into one string. First word is all lower case. Each subsequent word starts with a capital letter. Example: borderBottomStyle

It is not a complete list: there are additional items in the full HTML documentation. In addition, some browsers may have additional members not shown here.

To set style properties for a Control, Form or the Project, edit the style property in the Properties Window using the CSS style. If you are setting more than one style, separate using semicolons. All styles must be on a single line.

  border-bottom-color:red; border-top-color:blue;

To set style properties in your code, use the JavaScript form:

  Button1.style.borderBottomColor = "red"
  Button1.style.borderTopColor = "blue"

list of style properties

background Sets or returns all the background properties in one declaration
backgroundAttachment Sets or returns whether a background-image is fixed or scrolls with the page
backgroundColor Sets or returns the background-color of an element
backgroundImage Sets or returns the background-image for an element.
  document.body.style.backgroundImage="url(http://www.nsbasic.com/images/eiffel.gif)"

or if using jQuery Mobile

  $("div[data-role=""page""]").css("background-image", "url(myimage.jpg)")
backgroundPosition Sets or returns the starting position of a background-image
backgroundRepeat Sets or returns how to repeat (tile) a background-image
border Sets or returns border-width, border-style, and border-color in one declaration
borderBottom Sets or returns all the borderBottom* properties in one declaration
borderBottomColor Sets or returns the color of the bottom border
borderBottomStyle Sets or returns the style of the bottom border
borderBottomWidth Sets or returns the width of the bottom border
borderCollapse Sets or returns whether the table border should be collapsed into a single border, or not
borderColor Sets or returns the color of an element's border (can have up to four values)
borderLeft Sets or returns all the borderLeft* properties in one declaration
borderLeftColor Sets or returns the color of the left border
borderLeftStyle Sets or returns the style of the left border
borderLeftWidth Sets or returns the width of the left border
borderRight Sets or returns all the borderRight* properties in one declaration
borderRightColor Sets or returns the color of the right border
borderRightStyle Sets or returns the style of the right border
borderRightWidth Sets or returns the width of the right border
borderSpacing Sets or returns the space between cells in a table
borderStyle Sets or returns the style of an element's border (can have up to four values)
borderTop Sets or returns all the borderTop* properties in one declaration
borderTopColor Sets or returns the color of the top border
borderTopStyle Sets or returns the style of the top border
borderTopWidth Sets or returns the width of the top border
borderWidth Sets or returns the width of an element's border (can have up to four values)
bottom Sets or returns the bottom position of a positioned element
captionSide Sets or returns the position of the table caption
clear Sets or returns the position of the element relative to floating objects
clip Sets or returns which part of a positioned element is visible
color Sets or returns the color of the text
content Sets or returns the generated content before or after the element
counterIncrement Sets or returns the list of counters and increment values
counterReset Sets or returns the list of counters and their initial values
cssFloat Sets or returns the horizontal alignment of an object
cssText Sets or returns the contents of a style declaration as a string
cursor Sets or returns the type of cursor to display for the mouse pointer
direction Sets or returns the text direction
display Sets or returns an element's display type
emptyCells Sets or returns whether to show the border and background of empty cells, or not
font Sets or returns font-style, font-variant, font-weight, font-size, line-height, and font-family in one declaration
fontFamily Sets or returns the font face for text
fontSize Sets or returns the font size of the text
fontSizeAdjust Sets or returns the font aspect value
fontStyle Sets or returns whether the style of the font is normal, italic or oblique
fontVariant Sets or returns whether the font should be displayed in small capital letters
fontWeight Sets or returns the boldness of the font
height Sets or returns the height of an element
left Sets or returns the left position of a positioned element
letterSpacing Sets or returns the space between characters in a text
lineHeight Sets or returns the distance between lines in a text
listStyle Sets or returns list-style-image, list-style-position, and list-style-type in one declaration
listStyleImage Sets or returns an image as the list-item marker
listStylePosition Sets or returns the position of the list-item marker
listStyleType Sets or returns the list-item marker type
margin Sets or returns the margins of an element (can have up to four values)
marginBottom Sets or returns the bottom margin of an element
marginLeft Sets or returns the left margin of an element
marginRight Sets or returns the right margin of an element
marginTop Sets or returns the top margin of an element
maxHeight Sets or returns the maximum height of an element
maxWidth Sets or returns the maximum width of an element
minHeight Sets or returns the minimum height of an element
minWidth Sets or returns the minimum width of an element
orphans Sets or returns the minimum number of lines for an element that must be visible at the bottom of a page
outline Sets or returns all the outline properties in one declaration
outlineColor Sets or returns the color of the outline around a element
outlineStyle Sets or returns the style of the outline around an element
outlineWidth Sets or returns the width of the outline around an element
overflow Sets or returns what to do with content that renders outside the element box
padding Sets or returns the padding of an element (can have up to four values)
paddingBottom Sets or returns the bottom padding of an element
paddingLeft Sets or returns the left padding of an element
paddingRight Sets or returns the right padding of an element
paddingTop Sets or returns the top padding of an element
pageBreakAfter Sets or returns the page-break behavior after an element
pageBreakBefore Sets or returns the page-break behavior before an element
pageBreakInside Sets or returns the page-break behavior inside an element
position Sets or returns the type of positioning method used for an element (static, relative, absolute or fixed)
quotes Sets or returns the type of quotation marks for embedded quotations
right Sets or returns the right position of a positioned element
tableLayout Sets or returns the way to lay out table cells, rows, and columns
textAlign Sets or returns the horizontal alignment of text
textDecoration Sets or returns the decoration of a text
textIndent Sets or returns the indentation of the first line of text
textShadow Sets or returns the shadow effect of a text
textTransform Sets or returns the case of a text
top Sets or returns the top position of a positioned element
unicodeBidi Sets or returns whether the text should be overridden to support multiple languages in the same document
verticalAlign Sets or returns the vertical alignment of the content in an element
visibility Sets or returns whether an element should be visible
whiteSpace Sets or returns how to handle tabs, line breaks and whitespace in a text
widows Sets or returns the minimum number of lines for an element that must be visible at the top of a page
width Sets or returns the width of an element
wordSpacing Sets or returns the spacing between words in a text
zIndex Sets or returns the stack order of a positioned element. Sometimes called zorder on other platforms.