CSS1 tulajdonságok


Jelölésrendszer

Érték: N | NW | NE
Érték: [ <hossz> | thick | thin ]{1,4}
Érték: [<family-name> , ]* <family-name>
Érték: <url>? <szín> [ / <szín> ]?
Érték: <url> || <szín>

A "<" és a ">" karakterek között lévő szó az a stílus-tulajdonság értékének típusát jelzi.
Ez lehet:  <hossz>, <százalék>, <url>, <szám> and <szín>.
Egyéb speciális típusok:  <font-family> és  <border-style>.
A szóköz, a vessző "," és a per-jellel "/" az értékeket választjuk el egymástól.
Egy vonal "|" : lehetséges értékek elválasztására szolgál
Két vonal " ||" : azokat az értékeket választja el, amelyekből egyet meg kell adni.
Szögletes zárójelek "[ ]" : a tulajdonságok csoportosítására szolgálnak.
Szozás-jel "*" :  szó, vagy csoport ismétlődési lehetőségét jelzi.
Kérdőjel "?" : szó, vagy csoport választható ismétlődését jelzi.

Karakterek tulajdonságai

'font-family' - karaktercsaládok

Értékek: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Kezdőérték: a megjelenítő programtól függ
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

BODY { font-family: gill, helvetica, sans-serif }
<family-name> : karaktertípusok nevei: "Times New Roman", Aial, Helvetica
<generic-family> általános karaktertípusok
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">

'font-style' - karakterstílusok

Értékek: normal | italic | oblique
Kezdőérték: normal
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }

'font-variant' - karakterváltozatok

Értékek: normal | small-caps
Kezdőérték: normal
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

H3 { font-variant: small-caps }
EM { font-style: oblique }

'font-weight' - karakterszélesség

Értékek: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Kezdőérték: normal
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
STRONG { font-weight: bolder }

'font-size' - karakterméret

Értékek: <absolute-size> | <relative-size> | <hossz> | <százalék>
Kezdőérték: medium
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték:az aktuális karaktermérethez képest

<absolute-size>
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
<relative-size>
[ larger | smaller ]
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

'font' - karakter

Értékek: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték:

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

Szín és a háttér tulajdonságai

'color' - szín

Értékek: <color>
Kezdőérték: a megjelenítő programtól függ
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

EM { color: red }              /* natural language */
EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

'background-color' - háttérszín

Értékek: <color> | transparent
Kezdőérték: transparent
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

H1 { background-color: #F00 }

'background-image' - háttérkép

Értékek: <url> | none
Kezdőérték: none
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

BODY { background-image: url(marble.gif) }
P { background-image: none }

'background-repeat' - háttérkép ismétlése

Értékek: repeat | repeat-x | repeat-y | no-repeat
Kezdőérték: repeat
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

BODY { 
  background: red url(pendant.gif);
  background-repeat: repeat-y;
}

'background-attachment' - kapcsolat a háttérrel

Értékek: scroll | fixed
Kezdőérték: scroll
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

BODY { 
  background: red url(pendant.gif);
  background-repeat: repeat-y;
  background-attachment: fixed;
}

'background-position' - háttérkép pozíciója

Értékek: [<százalék> | <hossz>]{1,2} | [top | center | bottom] || [left | center | right]
Kezdőérték: 0% 0%
Alkalmazható:blokk- és sor-elemeknél
Öröklődik: nem
Százálékos érték: az elem méretéhez viszonyítva

BODY { background: url(banner.jpeg) right top }    /* 100%   0% */
BODY { background: url(banner.jpeg) top center }   /*  50%   0% */
BODY { background: url(banner.jpeg) center }       /*  50%  50% */
BODY { background: url(banner.jpeg) bottom }       /*  50% 100% */

BODY { 
  background-image: url(logo.png);
  background-attachment: fixed;
  background-position: 100% 100%;
} 

'background' - háttér

Értékek: 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték:  'background-position' stílus-utasításnál

BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }

Szöveg tulajdonságai

'word-spacing' - szóköz távolság

Értékek: normal | <hossz>
Kezdőérték: normal
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

'letter-spacing' - betűtávolság

Értékek: normal | <hossz>
Kezdőérték: normal
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

BLOCKQUOTE { letter-spacing: 0.1em }
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }

'text-decoration' - szövegdíszítés

Értékek: none | [ underline || overline || line-through || blink ]
Kezdőérték: none
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

A:link, A:visited, A:active { text-decoration: underline }

'vertical-align'- függőleges elrendezés

Értékek: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <százalék>
Kezdőérték: baseline
Alkalmazható: sor-elemeknél
Öröklődik: nem
Százálékos érték: 'line-height' stílusdefiníció esetén

'text-transform' - szövegátalakítás

Értékek: capitalize | uppercase | lowercase | none
Kezdőérték: none
Alkalmazható: minden elemnél
Öröklődik: igen
Százálékos érték: N/A

H1 { text-transform: uppercase }

'text-align' - szövegigazítás

Értékek: left | right | center | justify
Kezdőérték: a megjelenítő programtól függ
Alkalmazható:blokk-elemeknél
Öröklődik: igen
Százálékos érték: N/A

DIV.center { text-align: center }

'text-indent' - első sor beállítása

Értékek: <hossz> | <százalék>
Kezdőérték: 0
Alkalmazható:blokk-elemeknél
Öröklődik: igen
Százálékos érték: a szülő elemhez viszonyítva

P { text-indent: 3em }

'line-height' - sormagasság

Értékek: normal | <szám> | <hossz> | <százalék>
Kezdőérték: normal
Alkalmazható: minden elemnél
Öröklődik: igen

DIV { line-height: 1.2; font-size: 10pt }     /* szám */
DIV { line-height: 1.2em; font-size: 10pt }   /* hossz */
DIV { line-height: 120%; font-size: 10pt }    /* százalék */

Box tulajdonságai

'margin-top' - felső szegélytől a külső távolság

Értékek: <hossz> | <százalék> | auto
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

H1 { margin-top: 2em }

'margin-right'- jobb szegélylől a külső távolság

Értékek: <hossz> | <százalék> | auto
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

H1 { margin-right: 12.3% }

'margin-bottom'  - alsó szegélytőll a külső távolság

Értékek: <hossz> | <százalék> | auto
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

H1 { margin-bottom: 3px }

'margin-left' - bal szegélytől a külső távolság

Értékek: <hossz> | <százalék> | auto
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

H1 { margin-left: 2em }

'margin' - szegélytől a külső távolság

Értékek: [ <hossz> | <százalék> | auto ]{1,4}
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;        /* copied from opposite side (right) */
}

'padding-top' - felső szegélytől a belső  távolság

Értékek: <hossz> | <százalék>
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

BLOCKQUOTE { padding-top: 0.3em }

'padding-right' - jobb szegélytől a belső távolság

Értékek: <hossz> | <százalék>
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem

BLOCKQUOTE { padding-right: 10px }

'padding-bottom'- alsó szegélytől a belső távolság

Értékek: <hossz> | <százalék>
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték:a blokk-elem szélességéhez viszonyítva

BLOCKQUOTE { padding-bottom: 2em }

'padding-left' - bal szegélytől a belső távolság

Értékek: <hossz> | <százalék>
Kezdőérték: 0
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

BLOCKQUOTE { padding-left: 20% }

'padding' - szegélytől a belső távolság

Értékek: [ <hossz> | <százalék> ]{1,4}
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: a blokk-elem szélességéhez viszonyítva

H1 { 
  background: white; 
  padding: 1em 2em;
} 

'border-top-width' - a felső szegély szélessége

Értékek: thin | medium | thick | <hossz>
Kezdőérték: medium
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

H1 { border: solid thick red }
P  { border: solid thick blue }
H1 { border: solid 0.5em }

'border-right-width' - a jobb szegély szélessége

Értékek: thin | medium | thick | <hossz>
Kezdőérték: medium
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

'border-bottom-width' - az alsó szegély szélessége

Értékek: thin | medium | thick | <hossz>
Kezdőérték: medium
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

'border-left-width' - a bal szegély szélessége

Értékek: thin | medium | thick | <hossz>
Kezdőérték: medium
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

'border-width' - a szegély szélessége

Értékek: [thin | medium | thick | <hossz>]{1,4}
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */

'border-color' - a szegély színe

Értékek: <szín>{1,4}
Kezdőérték: a  'szín' értéke
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

P { 
  color: black; 
  background: white; 
  border: solid;
}

'border-style' - a jobb szegély stílusa

Értékek: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Kezdőérték: none
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

#xy34 { border-style: solid dotted }

'border-top' - felső szegély

Értékek: <border-top-width> || <border-style> || <szín>
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

H1 { border-bottom: thick solid red }
H1 { border-bottom: thick solid }

'border-right' - jobb szegély

Értékek: <border-right-width> || <border-style> || <color>
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

'border-bottom' - alsó szegély

Értékek: <border-bottom-width> || <border-style> || <color>
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

'border-left' - bal szegély

Értékek: <border-left-width> || <border-style> || <color>
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

'border' - szegély

Értékek: <border-width> || <border-style> || <color>
Kezdőérték: nincs definiálva
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}
BLOCKQUOTE {
  border-color: red;
  border-left: double
  color: black;
}

'width' - szélesség

Értékek: <hossz> | <százalék> | auto
Kezdőérték: auto
Alkalmazható:blokk- és sor- elemeknél
Öröklődik: nem
Százálékos érték: az aktuális elem szélességéhez viszonyítva

IMG.icon { width: 100px }

'height' - magasság

Értékek: <hossz> | auto
Kezdőérték: auto
Alkalmazható:blokk- és sor-elemeknél
Öröklődik: nem
Százálékos érték: N/A

IMG.icon { height: 100px }

'float' - úsztatás

Értékek: left | right | none
Kezdőérték: none
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

IMG.icon { 
  float: left;
  margin-left: 0;
}

'clear' - úsztatás törlése

Értékek: none | left | right | both
Kezdőérték: none
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

H1 { clear: left }

Beillesztési tulajdonságok

'display' - megjelenítés

Értékek: block | inline | list-item | none
Kezdőérték: block
Alkalmazható: minden elemnél
Öröklődik: nem
Százálékos érték: N/A

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

'white-space' - szóközök alapértelmezése

Értékek: normal | pre | nowrap
Kezdőérték: normal
Alkalmazható:blokk-elemeknél
Öröklődik: igen
Százálékos érték: N/A

PRE { white-space: pre }
P   { white-space: normal }

'list-style-type' - listaelemek stílusa

Értékek: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Kezdőérték: disc
Alkalmazható: ha a megjelenítés módja (display) listaelem (list-item)
Öröklődik: igen
Százálékos érték: N/A

OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha }   /* a b c d e etc. */
OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

'list-style-image' - listaelemek képei

Értékek: <url> | none
Kezdőérték: none
Alkalmazható: ha a megjelenítés módja (display) listaelem (list-item)
Öröklődik: igen
Százálékos érték: N/A

UL { list-style-image: url(http://png.com/ellipse.png) }

'list-style-position' - listaelemek pozíciója

Értékek: inside | outside
Kezdőérték: outside
Alkalmazható: ha a megjelenítés módja (display) listaelem (list-item)
Öröklődik: igen
Százálékos érték: N/A

'list-style' - lista stílusa

Értékek: [disc | circle | square | decimal | lower-roman | upper-roman | lower-a lpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Kezdőérték: nincs definiálva
Alkalmazható: ha a megjelenítés módja (display) listaelem (list-item)
Öröklődik: igen
Százálékos érték: N/A