Computing/CSS

From OpenWetWare
Revision as of 12:11, 24 December 2006 by Ilya (talk | contribs) (→‎Miscellaneous)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigationJump to search

Guides

Reference

Recipes

Design

Miscellaneous

Notes

You should not use the two proprietary DOMs, Netscape's document.layers or Microsoft's document.all - use the Document.getElementById DOM instead. 

<link rel="stylesheet" type="text/css"
  href="styles/layout.css" media='screen' />
<style type="text/css">
  @import "styles/markup.css";
</style>

In this example, the layout.css file is linked with a media type of screen. This is intentional. The information there is only important for display on a screen, it doesn’t have any benefit for printed media type, or any other (aural, tv, braille, etc.) for that matter. The markup.css file, which is the “skin” of the page, is imported, and thus hidden from noncompliant web devices because some of its features could be harmful or interpreted incorrectly.

Nothing is inherently wrong with divs, as long as you keep in mind that divs don't mean anything, and that a meaningful tag is always preferable when one is available.

To illustrate this, let's look at some common page-design tasks. Suppose that you want your page's title (which you'll type in text) and an image to appear at the top of your page. Many people would tell you to use a div with an id of 'head' to wrap everything, but there's a better way: simply use an h1 tag and give it a background and background-image. By using a meaningful tag for your page header, you've cut out excess HTML code, and the result is more elegant.

Let's say, however, that you want more than just text and an image in your header. Suppose, for example,that you want to do something like Slashdot, using text, an image, and more images representing the last several categories that have been updated. There is no one tag that can encompass all of this, and so here we have a case where a div is appropriate. Give it a meaningful ID -'header' is a common choice- and put your header elements inside it.

Here are the precise rules that govern the behavior of floats:

  1. The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
  2. If the current box is left-floating, and there are any left floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
  3. The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.
  4. A floating box's outer top may not be higher than the top of its containing block.
  5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.
  6. The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
  7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.
  8. A floating box must be placed as high as possible.
  9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

Visual formatting model details

CSS definitions

  • Introduction
A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.
  • Selector
The selector "selects" the elements on an HTML page that are affected by the rule set. The selector consists of everything up to (but not including) the first left curly bracket. For example:
  • Declaration block
The declaration block is a container that consists of anything between (and including) the curly brackets. Whitespace inside a declaration block is ignored - so it can be used to lay out rules in any way you want. For example:
  • Declaration
The declaration tells a browser how to draw any element on a page that is selected. A declaration consists of a property and a value, separated by a colon ":". Although it is not essential to add a semicolon after a single declaration, it is recommended that you finish the last declaration in a block with a semicolon. For example:
  • Property
The property is the aspect of that element that you are choosing to style. There can only be one property within each declaration. For example:
  • Value
The value is the exact style you wish to set for the property. For example:
  • Document structure:
    • Ancestor
    • Descendant
    • Parent
    • Child
    • Sibling

Type selectors

The most common and easy to understand selectors are type selectors. Type selectors will select any HTML element on a page that matches the selector, regardless of their position in the document tree. For example: classes, ID, pseudo classes

Inheritance

f you specify a color for the <body>, this color will be inherited by all other elements on the page, unless they have their own specific styles.

The font-size property is not directly inherited like other properties. Rather than the entire declaration being inherited, only the calculated value is inherited. This is not obvious when you set an absolute value like 14px, but becomes very obvious when you use relative values such as 80% or .8em. Relative values are calculated before being passed on to the child element only. For example, if you set a relative font-size on a <div> element, this will only be passed down to the children, not all descendants. So, the <em> and <p> elements directly under the <div> will inherit the calculated size, but the descendants, such as the <strong> element, will not.

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Computing/CSS&oldid=92385"