Senin, 30 April 2012

CSS part 3

- Positioning Properties

Property

Valid Values

Example

Applies to

Inherited?

clip

shape | auto

clip:rect(0px 200px 200px 0px)

all elements

N

height

length | auto

height:200px

DIV, SPAN and replaced elements

N

left

length | percentage | auto

left:0px

absolutely and relatively positioned elements

N

overflow

visible | hidden | scroll | auto

overflow:scroll

all elements

N

position

absolute| relative | static

position:absolute

all elements

N

top

length | percentage | auto

top:0px

absolutely and relatively positioned elements

N

visibility

visible | hidden | inherit

visibility:visible

all elements

N

width

length | percentage | auto

width:80%

DIV, SPAN and replaced elements

N

z-index

auto | integer

z-index:-1

absolutely and relatively positioned elements

N

- Printing Properties

Property

Valid Values

Example

Inherited?

page-break-before

auto | always || left | right

page-break-before:always

N

page-break-after

auto | always || left | right

page-break-before:auto

N

- Pseudo Classes

Property

Valid Values

Example

Inherited?

cursor

auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help

{ cursor:hand; }

Y

active, hover, link, visited

n/a

a:hover { color:red; }

Y

first-letter, first-line

any font manipulating declaration

p:first-letter{
float:left;color:blue}

N

CSS part 2

border-top-width

thin | medium | thick | length

border-top-width:thin

N

border-right-width

thin | medium | thick | length

border-right-width:medium

N

border-bottom-width

thin | medium | thick | length

border-bottom-width:thick

N

border-left-width

thin | medium | thick | length

border-left-width:15px

N

border-width

thin | medium | thick | length {1,4}

border-width: 3px 5px 3px 5px

N

border-top-color

color

border-top-color:navajowhite

N

border-right-color

color

border-right-color:whitesmoke

N

border-bottom-color

color

border-bottom-color:black

N

border-left-color

color

border-left-color:#C0C0C0

N

border-color

color {1,4}

border-color: green red white blue; }

N

border-top-style

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

border-top-style:solid

N

border-right-style

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

border-right-style:double

N

border-bottom-style

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

border-bottom-style:groove

N

border-left-style

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

border-left-style:none

N

border-style

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

border-style:ridge; }

N

border-top

border-width | border-style | border-color

border-top: medium outset red

N

border-right

border-width | border-style | border-color

border-right: thick inset maroon

N

border-bottom

border-width | border-style | border-color

border-bottom: 10px ridge gray

N

border-left

border-width | border-style | border-color

border-left: 1px groove red

N

border

border-width | border-style | border-color

border: thin solid blue

N

float

none | left | right

float:none

N

clear

none | left | right | both

clear:left

N

- Classification Properties

Property

Valid Values

Example

Inherited?

display

none | block | inline | list-item

display:none

N

list-style-type

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

list-style-type:upper-alpha

Y

list-style-image

url | none

list-style-image:url(icFile.gif)

Y

list-style-position

inside | outside

list-style-position:inside

Y

list-style

keyword || position || url

list-style: square outside url(icFolder.gif)

Y

CSS part 1

- Font Properties

Property

Valid Values

Example

Inherited?

font-family

[font name or type]

font-family: Verdana, Arial;

Y

font-style

normal | italic

font-style:italic;

Y

font-variant

normal | small-caps

font-variant:small-caps;

Y

font-weight

normal | bold

font-weight:bold;

Y

font-size

[ xx-large | x-large | large | medium | small | x-small | xx-small ] |

[ larger | smaller ] | percentage | length

font-size:12pt;

Y

font

[ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family

font: bold 12pt Arial;

Y

- Color and Background Properties

Property

Valid Values

Example

Inherited?

color

color

color: red

Y

background-color

color | transparent

background-color: yellow

N*

background-image

url | none

background-image: url(house.jpg)

N*

background-repeat

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

background-repeat: no-repeat

N*

background-attachment

scroll | fixed

background-attachment: fixed

N*

background-position

[ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ]

background-position: top center

N*

background

transparent | color || url || repeat || scroll || position

background: silver url(house.jpg) repeat-y

N*

* Starting in CSS2, the properties indicated above are inherited.

- Text Properties

Property

Valid Values

Example

Inherited?

letter-spacing

normal | length

letter-spacing:5pt

Y

text-decoration

none | underline | overline | line-through

text-decoration:underline

N

vertical-align

sub | super |

vertical-align:sub

N

text-transform

capitalize | uppercase | lowercase | none

text-transform:lowercase

N

text-align

left | right | center | justify

text-align:center

N

text-indent

length | percentage

text-indent:25px

N

line-height

normal | number | length | percentage

line-height:15pt

N

- Box Properties

Property

Valid Values

Example

Inherited?

margin-top

length | percentage | auto

margin-top:5px

N

margin-right

length | percentage | auto

margin-right:5px

N

margin-bottom

length | percentage | auto

margin-bottom:1em

N

margin-left

length | percentage | auto

margin-left:5pt

N

margin

length | percentage | auto {1,4}

margin: 10px 5px 10px 5px

N

padding-top

length | percentage

padding-top:10%

N

padding-right

length | percentage

padding-right:15px

N

padding-bottom

length | percentage

padding-bottom:1.2em

N

padding-left

length | percentage

padding-left:10pt; }

N

padding

length | percentage {1,4}

padding: 10px 10px 10px 15px

N