Рамки, отступы, цвета

Стили - рамки, отступы, цвета...

background-attachment :

scroll | fixed

background-attachment : fixed

background-color :

<color> | transparent

background-color : yellow

background-image :

<url> | none

background-image : url("../graph/back.gif")

background-position :

[<length> | <precentage> {1,2}]|[top | center | bottom & left | center | right]

background-position : 10px 20px

background-repeat :

repeat | repeat-x | repeat-y | no-repeat

background-repeat : repeat-y

background :

<background-color> & <background-image> & <background-repeat> & <background-attachment> & <background-position>

background : #00FA64 url("back0.jpg") no-repeat

border-bottom :

<border-bottom-width> & <border-style> & <color>

border-bottom-width :

thin | medium | thick | <length>

border-color :

<color>{1,4}

Пример:

border-color : olive lime navy magenta

border-left :

<border-left-width> & <border-style> & <color>

border-left-width :

thin | medium | thick | <length>

border-right :

<border-right-width> & <border-style> & <color>

border-right-width :

thin | medium | thick | <length>

border-style :

none | dotted | dashed | solid | double | groove | ridge | inset | outset

Пример: (толщина всех рамок - 3 точки)

border-style : none

border-style : dotted

border-style : dashed

border-style : solid

border-style : double

border-style : groove

border-style : ridge

border-style : inset

border-style : outset

border-top :

<border-top-width> & <border-style> & <color>

border-top-width :

thin | medium | thick | <length>

border-width :

[thin | medium | thick | <length>]{1,4}

Пример:

border-width : thin

border-width : medium

border-width : thick

border-width : 1; border-style : double

border-width : 2; border-style : solid

border-width : 5; border-style : double

border-width : 7; border-style : solid

border :

<border-width> & <border-style> & <color>

i { border : 2 solid green }

Пример:

border-top: 1 solid red;
border-left : thick double green;
border-bottom : medium ridge blue;
border-right-width : 0

clear :

none | left | right | both

h2 { clear : both }

color :

<color>

Пример:

color : green

color : #0000FF

display :

block | inline | list-item | none

p { display: block }
em { display: inline }
li { display: list-item }
img { display: none }

float :

left | right | none

Пример:

floathand

Эта строка стоит следующей командой после
<h3 style="float : right">float<img src="img/hand.gif">hand</h3>

font-family :

<name> | <generic> [, <name> | <generic>]
generic : serif | sans-serif | cursive | fantasy | monospace

Пример:

font-family : serif { АБВГД абвгд ABC abc (Times)}

font-family : sans-serif { АБВГД абвгд ABC abc (Helvetica)}

font-family : cursive { АБВГД абвгд ABC abc (Zapf-Chancery)}

font-family : fantasy { АБВГД абвгд ABC abc (Western)}

font-family : monospace { АБВГД абвгд ABC abc (Courier)}

font-size :

<absolute-size> | <relative-size> | <length> | <precentage>

<absolute-size>

- xx-small | x-small | small | medium | large | x-large | xx-large

<relative-size>

- larger | smaller

<length>

- number pt | px | em

<precentage>

- number %

Пример:

font-size : xx-small

font-size : x-small

font-size : small

font-size : medium

font-size : large

font-size : x-large

font-size : xx-large

font-style :

normal | italic | oblique

Пример:

font-style : normal

font-style : italic

font-style : oblique

font-variant :

normal | small-caps

Пример:

font-variant=normal

font-variant=small-caps

font-weight :

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Пример:

font-weight=normal

font-weight=bold

font-weight=bolder

font-weight=lighter

font-weight=100

font-weight=200

font-weight=300

font-weight=400

font-weight=500

font-weight=600

font-weight=700

font-weight=800

font-weight=900

font :

[ <font-style> & <font-variant> & <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

h5 { font : Arial, Tahoma normal lighter }

height :

<length> | auto

img.small { height: 30px }

letter-spacing :

normal | <length>

Пример:

letter-spacing : 0

letter-spacing : 2pt

letter-spacing : 0.5em

line-height :

normal | <number> | <length> | <percentage>

list-style-image :

<url> | none

Пример:

• list-style-image : url('img/romb.gif')

list-style-position :

inside | outside

Пример:

• list-style-position : outside [---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----]
• list-style-position : inside [---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----]

list-style-type :

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none

Пример:

• list-style-type : disc
• list-style-type : circle
• list-style-type : square
• list-style-type : decimal
• list-style-type : lower-roman
• list-style-type : upper-roman
• list-style-type : lower-alpha
• list-style-type : upper-alpha
• list-style-type : none

list-style :

<keyword> & <position> & <url>

list-style : disc inside
list-style : upper-alpha

margin-bottom :

<length> | <percentage> | auto

margin-left :

<length> | <percentage> | auto

margin-right :

<length> | <percentage> | auto

margin-top :

<length> | <percentage> | auto

margin :

[ <length> | <percentage> | auto ]{1,4}

padding-bottom :

<length> | <percentage>

padding-left :

<length> | <percentage>

padding-right :

<length> | <percentage>

padding-top :

<length> | <percentage>

padding :

[ <length> | <percentage> ]{1,4}

text-align :

left | right | center | justify

Пример:

text-align : left

text-align : center

text-align : right

text-align : justify -- [---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----]

text-decoration :

none | [ underline & overline & line-through & blink ]

Пример:

text-decoration : none

text-decoration : underline

text-decoration : overline

text-decoration : line-through

text-decoration : blink

text-decoration : underline overline line-through

text-indent :

<length> | <percentage>

Пример:

text-indent : 3em [---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----]

text-indent : 50% [---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----]

text-transform :

capitalize | uppercase | lowercase | none

Пример:

text-transform : capitalize [ABC abc]

text-transform : uppercase [ABC abc]

text-transform : lovercase [ABC abc]

text-transform : none [ABC abc]

vertical-align :

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>

width :

<length> | <percentage> | auto

img.big { width : 200px }

white-space :

normal | pre | nowrap

pre { white-space: pre }
p { white-space: normal }

word-spacing :

normal | <length>

Пример:

word-spacing : 10px [---- ---- ----]

word-spacing : 30pt [---- ---- ----]

word-spacing : 3em [---- ---- ----]