css: basics and text

 

three types of selector

 

1. directly apply to html element.

    p{ text-align: center; color: red; font-family: times new roman; font-size: 25pt; font-style: bold; }

 

 

 

2. unique selector that occurs at most once in a html file.

 

    #headerStyle{ font: italic bold 12px/20px arial,sans-serif; }

 

3. normal selector that can occurs any times in one html file.

 

      .blockStyle{ position: relative; top: 20pt; left: 25pt;}

 

 

 

 

block element and line element.

Most of html elements are block elements, that means the content contained by a block element is viewed as a block, not a line. The rest are line elements such as '<em></em>'

 

 

 

position

The favorite position method is relative position.

Tips: 'left' and 'top' properties are available if the 'position' property is 'relavtive' or 'absolute'.

 details:

   For absolutely positioned elements, the left property sets the left edge of an element to a unit to the          left/right of the left edge of its containing element.

         For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

For example:

 

          .divStyle{position: relative;top : 25;left: 20;}

 

 

 

text attributes

 

 

common attributes: color, font-family, font-size.

 

line spacing: line-height. The unit of value can be 'pt', 'em' and 'percentage', and 'em' and 'percentage' are recommended.

word spacing: word-spacing. The unit of value is same to line-height.

 

synthesis attribute: font, which is a synthesis of a bundle of attributes about real font.

 

The format of 'font' is 'font-style font-variant font-weight font-size/line-height font-family'.

 

For example: font: italic bold 12px/20px arial,sans-serif;

 

text decoration: text-decoration: underline | overline | linethrough | blink.