Appendix A Css Property Reference

CSS PROPERTY REFERENCE
*4 Basic Types of Property Values

1. COLOURS
2. LENGTHS/SIZES
3. KEYWORDS 4. URLS
*Value Type 1 Colours =>

A.
Keywords Aqua, etc.
B.
RGB Values
1. HEX = color: #ff0033;
2. RGB % = rgb(100%, 0%, 33%)
3. DECIMAL = RGB(255, 0, 33)
*Value Type 2 Lengths/Sizes =>

A.
B.
C.
Pixels
Ems
%
- IE6 = users cant resize Text w/ px

- Inherited = so Text can keep getting Smaller
a. Font-size = based on Texts Inherited Value
b. Width = based on Nearest Parent Tags Size
*Value Type 3 Keywords =>

eg.
Left, Bottom, Inherit
- inherit = can be used on ANY Prop

BUT its not very useful
*Value Type 4 URLs => - unlike in HTML-quotemarks = optional

URL TYPES =
1. Absolute =
url(www.rughbnz.com/images/jk.jpg)
2. Root Relative =
url(/images/jk.jpg)
3. Document Relative = url(../../images/jk.jpg)
(../ = UP 1 LEVEL)
-----------------------------------------------------------------------------------------
TEXT PROPERTIES
1.
COLOR
(I)
2.
FONT
(I)
a. Keyword
b. Hex (#fff)
Shorthand = font-style, font-variant, font-weight, font-size, line-height,

font-family;
=> font: italic small-caps bold 1.25em/150% Arial, Helvetica, Serif;
- When incl. a Line Height, add a / after Font-size = 1.25em/150%
- MUST include = at least: 1.font-size 2.font-family (also these 2 must
be listed last)
*Can apply to <body>
-------------------------------------------------------------------------------------------------------
font1.
family:
(I)
- Separate by ,
- If 2 worded = surround in
2.
size:
(I)
a. Keywords = xx-small medium xx-large

b. px
c. em
d. %
3.
style: (I)
= italic, oblique, normal
4.
variant:
(I)
= small-caps, normal
5.
weight:
(I)
= bold, normal
-----------------------------------------------------------------------------------------
letter-spacing:
(I)
= (+/-)
1. em
line-height:
(I) - Default = 120%
2. px
1. em 2. px 3. %
----------------------------------------------------------------------------------------text1.
-align:
(I) = left, center, right, justify
2.
-decoration:
(I) =underline, overline, line-thru, blink, none
3.
-indent:
(I) = (+/-)
4.
-transform:
(I) = uppercase, lowercase, capitalise, none
(1st Line of <p>)
a. em b. px
----------------------------------------------------------------------------------------*
vertical -align:
(+/-)baseline, sub, super, top,

text-top, middle, bottom, text-bottom, %,
em, px.
- % = calculated on Tags Line-height Value
white-space:
= nowrap, pre, normal
word-spacing:
(I) = (+/-) a. em b. px c. normal
----------------------------------------------------------------------------------------LIST PROPERTIES
list-style:
(I)
a. list-style-type:
=>
= Shorthand for
b. list-style-image:
c. list-style-position:
list-style: disc url(images/jk.jpg) inside
1.
-image:
(I)
= a. url( ) b. none
2.
-position:
(I)
a. inside
(b/g-image: = better)
b. outside ( default)
3.
-type:
(I)
= disc, circle, square, decimal,

decimal-leading-zero, upper-alpha,
lower-alpha, upper-roman,
lower-roman, lower-greek, none
---------------------------------------------------------------------------------------PADDING, BORDERS & MARGINS

*
border:
= solid, dotted, dashed, double, groove, ridge, inset,

outset, none, hidden
= size, type, colour
=> border: 2px solid #FFF;
-top / -right/ -bottom / -left:

-color:
= if just 2 values applied 1st = T&B
2nd = L&R
-top-colour / -right-colour / -bottom-colour / left-colour:

-style:
solid, dotted, dashed, double, groove, ridge, inset,

outset, none, hidden
- can use 1, 2 or 4 Keywords
-top-style / -right-style / -bottom-style / -left-style:
-width:
= ems, px
-top-width / -right-width / -bottom-width / -left-width

outline:
= shorthand for
- outline-colour/style/width:
*same as Border but doesnt add any Width/Height to Tag

-color:
-style:
- also: invert (makes Outline Color inverse of B/G)
-width:
----------------------------------------------------------------------------------------padding: -To add space around: text, images, etc (1 or 4 Values)
-top / -right / -bottom / -left:
----------------------------------------------------------------------------------------margin:
(V) Margins can Collapse (B ignores 1 Value)
-top / -right / -bottom /-left:

----------------------------------------------------------------------------------------background:
= s/hand for all 5 Prop (if you dont list 1

B will put the Default for that Prop)
-color:
-image:
= url(images/jk.jpg)
-repeat:
= repeat, no-repeat, repeat-x, repeat-y
-attachment:
= scroll, fixed
-position:
= (H) left, centre, right (V) top, centre, right
----------------------------------------------------------------------------------------PAGE LAYOUT
*
top / right / bottom / left:

clear:
clip:
= px, em, %
= left, right, both, none

= rect
-Creates a Rectangle Wto reveal part of El

=> clip: rect(5px,110px,30px,10px);
display:
= block, inline, none

a. block =forces a line-break- before/after El
b. inline =forces an El to be on same line
c. none =hides El (can us J/S or :hover to reappear
float:
= left, right, none
height:
= px, em, % (if more text added or user

increases text-size = use overflow: )
= px, em, %
width:
----------------------------------------------------------------------------------------HEIGHT/WIDTH
*min/max-height/width:
= IE6=X-usually used w/ Liquid L/outs
max-height:
= max. height for the Tag
min-height:
= min. height for the Tag
max-width:
= max. width for the Tag
min-width:
= min. width for the Tag
overflow:
= visible, hidden, scroll, auto

-IE6 = makes box bigger
- auto= only adds Scoll if needed
----------------------------------------------------------------------------------------POSITION
position:
= static, fixed, relative, absolute
visibility: = visible, hidden, collapse (to hide Table row/col)

- to toggle a Tag between hidden/visible (J/S or :hover)
z-index:
= (+/-)
----------------------------------------------------------------------------------------TABLES
border-collapse:
= collapse, separate
- only works when applied to <table> Tag
border-spacing:
- border-spacing: 0 10px; (= T/B & L/R)

- IE7 = X so use cell-spacing in <table>
caption-side: = top, bottom places caption above/below Table

(HTML Rules = <caption> must be after <table>
- IE7=X => Use <caption-align: top/bottom>
table-layout:
= auto, fixed
----------------------------------------------------------------------------------------MISC.
content:
= specifies text that appears before/after a Tag
cursor:
= change the look of the mouse pointer
*orphans:
= 1, 2, 3 - Only B = Opera
page-break-before/after:
= auto, always, *avoid, *left, *right
*page-break-inside:
= avoid
= Only Opera
*widows
= 1, 2, 3 only Opera
-----------------------------------------------------------------------------------------

Appendix A Css Property Reference

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Appendix A Css Property Reference

Caricato da

Copyright:

Formati disponibili

CSS PROPERTY REFERENCE

*4 Basic Types of Property Values

*Value Type 1 Colours =>

Keywords Aqua, etc.

*Value Type 2 Lengths/Sizes =>

- IE6 = users cant resize Text w/ px

*Value Type 3 Keywords =>

Left, Bottom, Inherit

- inherit = can be used on ANY Prop

*Value Type 4 URLs => - unlike in HTML-quotemarks = optional

3. Document Relative = url(../../images/jk.jpg)

Shorthand = font-style, font-variant, font-weight, font-size, line-height,

a. Keywords = xx-small medium xx-large

= italic, oblique, normal

(I) - Default = 120%

(I) = left, center, right, justify

(I) =underline, overline, line-thru, blink, none

(I) = uppercase, lowercase, capitalise, none

(1st Line of <p>)

(+/-)baseline, sub, super, top,

= nowrap, pre, normal

(I) = (+/-) a. em b. px c. normal

list-style: disc url(images/jk.jpg) inside

= disc, circle, square, decimal,

---------------------------------------------------------------------------------------PADDING, BORDERS & MARGINS

= solid, dotted, dashed, double, groove, ridge, inset,

=> border: 2px solid #FFF;

-top / -right/ -bottom / -left:

= if just 2 values applied 1st = T&B

-top-colour / -right-colour / -bottom-colour / left-colour:

solid, dotted, dashed, double, groove, ridge, inset,

-top-width / -right-width / -bottom-width / -left-width

*same as Border but doesnt add any Width/Height to Tag

- also: invert (makes Outline Color inverse of B/G)

(V) Margins can Collapse (B ignores 1 Value)

-top / -right / -bottom /-left:

= s/hand for all 5 Prop (if you dont list 1

= repeat, no-repeat, repeat-x, repeat-y

= (H) left, centre, right (V) top, centre, right

top / right / bottom / left:

= left, right, both, none

-Creates a Rectangle Wto reveal part of El

= block, inline, none

= left, right, none

= px, em, % (if more text added or user

= IE6=X-usually used w/ Liquid L/outs

= max. height for the Tag

= min. height for the Tag

= max. width for the Tag

= min. width for the Tag

= visible, hidden, scroll, auto

= static, fixed, relative, absolute

visibility: = visible, hidden, collapse (to hide Table row/col)

- border-spacing: 0 10px; (= T/B & L/R)

caption-side: = top, bottom places caption above/below Table

= specifies text that appears before/after a Tag

= change the look of the mouse pointer

= auto, always, *avoid, *left, *right

Potrebbero piacerti anche

= auto, always, avoid, left, *right