Стили - рамки, отступы, цвета...
- 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
border-left : thick double green;
border-bottom : medium ridge blue;
border-right-width : 0
Пример:
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
Пример:
float
hand
Эта строка стоит следующей командой после
<h3 style="float :
right">float<img src="img/hand.gif">hand</h3>
hand<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>