Home arrow DHTML arrow Page 2 - Learning Style Sheet Properties
DHTML

Learning Style Sheet Properties


In this second part of a series on style sheet properties, you'll learn how to handle code for backgrounds, borders, and more. This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
September 06, 2007
TABLE OF CONTENTS:
  1. · Learning Style Sheet Properties
  2. · Alphabetical Property Reference
  3. · Alphabetical Property Reference through Behavior
  4. · Alphabetical Property Reference: Border

print this article
SEARCH DEVARTICLES

Learning Style Sheet Properties - Alphabetical Property Reference
(Page 2 of 4 )

azimuth
IE n/a NN n/a Moz n/a Saf n/a Op n/a CSS 2

Inherited: Yes

Given a listener at the center of a circular sound space (like in a surround-sound-equipped theater), azimuth sets the horizontal angle of the source of the sound (for example, in a text-to-speech browser). See also the elevation property.

CSS Syntax

azimuth: angle | angleConstant || direction

Value

Up to two values (other than inherit). One represents the angle, clockwise from straight ahead; the second is a 20-degree incremental movement to the left or right. An angle value is any value in the range of –360 to +360 (inclusive) plus the letters “deg”, as in 90deg . The value 0deg is directly in front of the listener. To set the angle to the left of the listener, the value can be either -90deg or 270deg . Optionally, you can choose an angleConstant  value from a large library of descriptions that correspond to fixed points around the circle. If you add the behind modifier, the values shift from in front of the listener to behind the listener.

Value

Equals

Value

Equals

center

0deg

center behind

180deg

center-right

20deg

center-right behind

160deg

right

40deg

right behind

140deg

far-right

60deg

far-right behind

120deg

right-side

90deg

right-side behind

90deg

left-side

270deg

left-side behind

270deg

far-left

300deg

far-left behind

240deg

left

320deg

left behind

220deg

center-left

340deg

center-left behind

200deg

For the direction  value, you can choose from two constants: leftwards | rightwards . These settings shift the sound 20 degrees in the named direction.

Initial Value     center

Example

h1 {azimuth: 45deg}
p.aside {azimuth: center-right behind}

Applies To          All elements.

background 
IE 4 NN n/a Moz all Saf all Op all CSS 1

Inherited: No

This is a shortcut property that lets you set up to five separate (but related) background-style properties in one property statement. Values can be in any order, each one delimited by a space. Although the property is not officially available in Navigator 4, some
combina tions of values may work with it.

CSS Syntax

background: background-attachment || background-color || background-image || background-position || background-repeat

Value

Any combination of the five background-style property values, in any order. Any property not specified is assigned its initial value. See each property for details about the expected values.

Initial Value       None.

Example             body {background: url(watermark.jpg) repeat fixed }

Applies To           All elements .

Object Model Reference

[window.]document.getElementById("elementID ").style.background

background-attachment
IE 4 NN n/a Moz all Saf 1.2 Op all CSS 1

Inherited: No

When an image is applied to the element background (with the background-image property), the background-attachment property sets whether the image scrolls with the document. The image can remain fixed within the viewable area of the element (the viewport), or it may scroll with the element as content scrolls. During scrolling, a fixed attachment looks like a stationary backdrop to rolling credits of a movie.

CSS Syntax

background-attachment: fixed | scroll

Value

The fixed value keeps the image stationary in the element viewport; the scroll value lets the image scroll with the document content.

Initial Value       scroll

Example             body {background-attachment: fixed}

Applies To          All elements.

Object Model Reference

[window.]document.getElementById("elementID ").style.backgroundAttachment

background-color
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

Sets the background color for the element. Although it may appear as though a nested element’s background-color property is inherited, in truth the initial value is transparent, which lets the next-outermost colored element show through whitespace of the current element.

CSS Syntax

background-color: color | transparent

Value

Any valid color specification (see description at beginning of the chapter) or transparent.

Initial Value       transparent

Example              .highlighter {background-color: yellow}

Applies To            All elements.

Object Model Reference

[window.]document.getElementById("elementID ").style.backgroundColor

background-image
IE 4 NN 4 Moz all Saf all Op all CSS 1

Inherited: No

Sets the background image (if any) for the element. If you set a background-color for the element as well, the color appears if the image fails to load; otherwise, the image overlays the color. Transparent pixels of the image allow a background color to show through. See also the background-attachment property.

CSS Syntax

background-image: uri | none

Value

To specify a URL, use the url() wrapper for the property value. You can omit the property or specify none to prevent an image from loading into the element’s background.

Initial Value         non e

Example                h1 {background-image: url(watermark.jpg)}

Applies To             All elements .

Object Model Reference

[window.]document.getElementById("elementID ").style.backgroundImage


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials