MENU

~~ Welcome to My Blog and Thank You for Your Visit ~~

Tuesday, April 23, 2019

DAFTAR PROPERTI & VALUE PADA CSS


Properti untuk mengatur Teks
Nama PropertiValuesContoh/NotesCSS Level
font-familyfamily-name
generic-family
Arial, Tahoma
serif, sans-serif
CSS1
font-size(pt), (px), (percent)pt is Point, i.e. 12pt.
px is Pixel, i.e. 20px.

CSS1
font-size-adjust(number), none, inheritCSS2
font-stretchnormal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inheritCSS2
font-stylenormal, italic, obliqueCSS1
font-variantnormal, small-capsCSS1
font-weightnormal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smallerNumber can be 100, 200, 300, 400, 500, 600, 700, 800, or 900.CSS1
fontAny of the above values separated by spaces.{font: tahoma 12pt oblique bold}CSS1
letter-spacingnormal, 1em1em, 2em, and so on.CSS1
text-alignleft, right, center, justifyCSS1
text-decorationnone, underline, overline, line-through, blinkCSS1
text-shadownone, color length length length, inheritCSS2
text-transformnone, capitalize, uppercase, lowercaseCSS1
text-indent(length), (percent)Length is in pixels.CSS1
word-spacingnormal, 1em1em, 2em, and so on.CSS1


Color/Background Properties
Nama PropertiValuesContoh/NotesCSS Level
background-attachmentscroll, fixedCSS1
background-color(color), transparentColor is in hex code.CSS1
background-imagenone, (location)CSS1
background-position(percent), (length), top, center, bottom, left, center, rightCSS1
background-repeatrepeat, repeat-x, repeat-y, no-repeatCSS1
backgroundAny of the above background values separated by spaces.{background: URL(back.gif) repeat fixed}CSS1
color(color)Color is in hex code. This refers to the foreground color.CSS1



Box Properties
Nama PropertiValuesContoh/NotesCSS Level
margin-bottom(length), (percent), autoLength is in pixels.CSS1
margin-left(length), (percent), autoLength is in pixels.CSS1
margin-right(length), (percent), autoLength is in pixels.CSS1
margin-top(length), (percent), autoLength is in pixels.CSS1
marginAny of the above margin values in top, right, bottom, left order separated by spaces.{margin: 5px 2px 5px 3px}
When only one value is present, all margins are affected.
CSS1
padding-bottom(length), (percent)Length is in pixels.CSS1
padding-left(length), (percent)Length is in pixels.CSS1
padding-right(length), (percent)Length is in pixels.CSS1
padding-top(length), (percent)Length is in pixels.CSS1
paddingAny of the above padding values in top, right, bottom, left order separated by spaces.{padding: 5em 6em 3em 6em}
When only one value is present, all sides are affected.
CSS1
border-bottom-widthmedium, thin, thick, (length)Length is in pixels.CSS1
border-bottomAny of the border-top-bottom, border-color and border-style values.{border-bottom: thin inset blue}CSS1
border-color(color)Color is in hex code.CSS1
border-left-widthmedium, thin, thick, (length)Length is in pixels.CSS1
border-leftAny of the border-top-left, border-color and border-style values.{border-left: thick inset green}CSS1
border-right-widthmedium, thin, thick, (length)Length is in pixels.CSS1
border-rightAny of the border-right-width, border-color and border-style values.{border-right: thin inset blue}CSS1
border-stylenone, dotted, dashed, solid, double, groove, ridge, inset, outsetCSS1
border-top-widthmedium, thin, thick, (length)Length is in pixels.CSS1
border-topAny of the border-top-width, border-color and border-style values.{border-top: thin inset red}CSS1
borderAny of the border values. Applies to all borders.{border: medium blue}CSS1
heightauto, (length), (percent)Length is in pixels.CSS1
widthauto, (length), (percent)Length is in pixels.CSS1

-----------------------------
Klasifikasi
Nama PropertiValuesContoh/NotesCSS Level
list-style-typedisc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroh, noneCSS2
list-style-imagenone, (url)CSS1
list-style-positionoutside, insideCSS1
list-styleAny of the above list-style values separated by spaces.{list-style: disc inside}CSS1
white-spacenormal, pre, nowrapCSS1


-----------------------------

Visual Effects
Nama  PropertiValuesContoh/NotesCSS Level
clipauto, (shape)Currently, the only valid shape is "rect(top,right,bottom,left)".CSS2
cursorauto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, helpCSS1
outline-widthmedium, thin, thick, (length), inheritCSS2
outline-stylenone, dotted, dashed, solid, double, groove, ridge, inset, outsetCSS2
outline-color(color), invert, inheritCSS2
outlineAny of the above outline values separated by spaces.{outline: dotted thick}CSS2
overflowvisible, hidden, scroll, autoCSS2
visibilityinherit, visible, hiddenCSS2

------------------------------------------

Generated content, automatic numbering, dan  lists
Nama PropertiValuesContoh/NotesCSS Level
content(string), (uri), (counter), attr(X), open-quote, close-quote, no-open-quote, no-close-quote, inheritUsed with the :before, :after pseudo-elements.CSS2
counter-reset(identifier) (integer), none , inheritUsed with the counter() and counters() functions of the content property.CSS2
counter-increment(identifier) (integer), none , inheritUsed with the counter() and counters() functions of the content property.CSS2
marker-offset(length), auto, inheritCSS2
quotes(string)(string) or more, inheritCSS2

-----------------------------------------------------

Visual Formatting
Nama PropertiValuesContoh/NotesCSS Level
bottomauto, inherit, (length), (percent)Length is in pixels.CSS2
clearnone, left, right, both, inheritCSS1
directionltr, rtl, inheritltr - Left-to-Right
rtl - Right-to-Left
CSS2
displayinline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inheritCSS2
floatnone, left, right, inheritCSS1
heightauto, inherit, (length), (percent)Length is in pixels.CSS2
line-heightnormal, (length), (percent)Length is in pixels.CSS1
leftauto, inherit, (length), (percent)Length is in pixels.CSS2
max-heightnone, inherit, (length), (percent)Length is in pixels.CSS2
max-widthnone, inherit, (length), (percent)Length is in pixels.CSS2
min-heightinherit, (length), (percent)Length is in pixels.CSS2
min-widthinherit, (length), (percent)Length is in pixels.CSS2
positionstatic, absolute, relative, fixed, inheritCSS2
rightauto, inherit, (length), (percent)Length is in pixels.CSS2
topauto, inherit, (length), (percent)Length is in pixels.CSS2
unicode-bidinormal, embed, bidi-override, inheritLength is in pixels.CSS2
vertical-alignbaseline, sub, super, top, text-top, middle, bottom, text-bottom, (percent)CSS1
widthauto, (length), (percent)Length is in pixels.CSS2
z-indexauto, inherit, (integer)CSS2

------------------------------------------

Tabel
Nama PropertiValuesContoh/NotesCSS Level
border-collapsecollapse, separate, inheritCSS2
border-spacing(length)(length), inheritCSS2
caption-sidetop, bottom, left, right, inheritCSS2
empty-cellsshow, hide, inheritCSS2
speak-headeronce, always, inheritCSS2
table-layoutauto, fixed, inheritCSS2

-------------------------------------------------

Aural
Nama PropertiValuesContoh/NotesCSS Level
volumenumber, percentage, silent, x-soft, soft, medium, loud, x-loud, inheritCSS2
speaknormal, none, spell-out, inheritCSS2
pause-beforetime, percentage, inheritCSS2
pause-aftertime, percentage, inheritCSS2
pausetime, percentage, inheritCSS2
cue-beforeuri, none, inheritCSS2
cue-afteruri, none, inheritCSS2
cueAny of the above cue properties.CSS2
play-duringuri, mix, repeat, auto, none, inheritCSS2
azimuthangle, left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, rightwards, inheritCSS2
elevationangle, below, level, above, higher, lower, inheritCSS2
speech-ratenumber, x-slow, slow, medium, fast, x-fast, faster, slower, inheritCSS2
voice-familyspecific-voice|generic-voiceCSS2
pitchfrequency, x-low, low, medium, high, x-high, inheritCSS2
pitch-rangenumber, inheritCSS2
stressnumber, inheritCSS2
richnessnumber, inheritCSS2
speak-punctuationcode, none, inheritCSS2
speak-numeraldigits, continuous, inheritCSS2