CSS - hez használható meghatározások.
Listákhoz
Felsorolásjelek, stílusának típusa: list-style-type
A számozás nélküli listákhoz, csak az első három használható.
- teli kör: disc
- üres kör: circle
- négyzet: square
- arab számok: decimal
- arab számok kezdő nullával: decimal-leading-zero
- nagybetűk: upper-alpha
- kisbetűk: lower-alpha
- nagybetűs római számok: upper-roman
- kisbetűs római számok: lower-roman
- stílus nincs: none
- öröklés: inherit
Listához használandó kép: list-style-image
- nincs: uri, none
- öröklés: inherit
Felsorolásjel helye: list-style-position
- kilógás nélkül: inside
- kilógó: outside
- öröklés: inherit
Táblázatoknál
th és td kijelölőkhöz:
Szöveg függőleges igazításának, pozíció meghatározása: vertical-align:
- fentre: top;
- középre: middle;
- alulra: bottom;
Cellatávolság: border-spacing
Szegély becsukása: border-collapse
Szegély elválasztása: border-separate
A summary és a scope jellemző, valamint a caption és a headers elemek biztosítják, hogy a táblázatok minden internetes eszközön megfelelően jelenjenek meg.
A body elemhez.
Háttérszín: background-color: #...... ;
Háttérkép: background-image Példa: background-image: url(képnév.gif) ;
- ismétlődés: repeat
- ne ismétlődjön: no-repeat
- ismétlődés vízszintesen: repeat-x Példa: background-repeat: repeat-x;
- ismétlődés függőlegesen: repeat-y
Háttérkép pozíció: background-position: ( top, center, bottom, left, right, )
Háttérkép csatolás: background-attachment:
- gördülő: scroll
- fix, rögzített: fixed
Margók: ( top, right, bottom, left,)
A címsorokhoz
Szegélyvastagság: border-width:
Példa, az alsó szegélyre: border-bottom-width: thin ;
border-top-width:
border-right-width:
border-left-width:
- vékony: thin
- közepes: medium
- vastag: thick
- öröklés: inherit
- képpont méretben: px;
Szegélystílusa: border-style:
példa. Alsó szegély egyenes vonal, fekete: border-style-bottom: 2px solid black;
- nincs: none
- rejtett: hidden
- pontozott vonal: dotted
- szaggatott vonal: dashed
- folytonos vonal: solid
- dupla: double
- bemélyített: groove
- kidomborodó: ridge
- süllyesztett: inset
- kiemelkedő: outset
- öröklés: inherit
Szegélyszín: border-color: színkód; (Ha nem adjuk meg, hogy melyik oldal, akkor a teljes keretre vonatkozik)
Ha átlátszót akarunk akkor: transparent meghatározást alkalmazzuk.
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
Szegélyvastagság, szegélystílusa és a szegélyszín, rövidítve is megadható.
Példa: border-bottom: 2px solid black;
Külső és belső margók: margin, és padding: ( top, right, bottom, left,)
Megadható: százalékban, betűméretben, képpontban.
Szövegigazítás: text-align: ( center, right, left, sorkizárás justify, öröklés inherit)
Betűstílus: font-style:
- normál: normal
- dőlt: italic
- ferde: oblique
- öröklés: inherit
Betűváltozat:font-variant:
- kiskapitális: small-caps (Minden betűt nagybetűvel ír, és a kezdőt enyhén kiemeli )
- normál: normal
- öröklés: inherit
Háttérképek és színek
Háttérszín: background-color: #...... ;
Háttérkép: background-image Példa: background-image: url(képnév.gif) ;
- ismétlődés: repeat
- ne ismétlődjön: no-repeat
- ismétlődés vízszintesen: repeat-x Példa: background-repeat: repeat-x;
- ismétlődés függőlegesen: repeat-y
Háttérkép pozíció:background-position: ( top, center, bottom, left, right, )
Példa:
background: url(képnév.gif) repeat-y right;
background: url(képnév.gif) no-repeat left center;
Háttérkép csatolás: background-attachment:
- gördülő: scroll
Helyzet meghatározáshoz, tartalom elrendezéshez.
Helyzetmegadás: position ( Példa: position: absolute; )
- viszonyított: relatív
- abszolút: absolute
- rögzített: fixed
- statikus: statikus
- öröklés: inherit
Úsztatás: float
- balra: left
- jobbra: right
- nincs: none
- öröklés: inherit
Mezőkiürítés: clear ( Példa: clear: both; ----- clear: left; )
- balra: left
- jobbra: right
- mindkét irányba: both
- nincs: none
Láthatóság: visibility
- látható: visible
- rejtett: hidden
- becsukva: collapse
- öröklés: inherit
Betűköz: letter-spacing
- Minden elemhez, megadható
Környezetfüggő kijelölők
A négy leggyakoribb álosztály:
Sorrendet, a rangsor követeli meg:
Hivatkozási osztályok:
a : link (hivatkozás) Minden href jellemzővel ellátott horgony
a : visited (felkeresve) Minden felkeresett horgony
Dinamikus osztályok:
a : hover (fölötte állva) Minden horgony, mely fölött az egér áll
a : active (használatban) Minden horgony az egérgomb lenyomva tartása közben
Példa: Html lapon:
Első:
<style type="text/css">
body { background-color: #f36; }
#content {blackground: #fff;}
a:link {color: #f3f; }
</style>
Második:
<style type="text/css">
body { background-color: #f36; }
#content {blackground: #fff;}
a:link, a:visited {color: #f3f; }
</style>
Ha nem akarjuk, hogy a hivatkozás alá legyen húzva: text-decoration: none
Példa:
a:link, a:visited {color: #f3f; text-decoration: none;}
Ha vastagabb betűt szeretnénk: font-weight: bold;
Használhatunk csoportosított kijelölt:
Egy content div szakaszhoz, a négy állapot lehet azonos formázású.
Például:
#content a:link, #content a:visited, #content a:hover, #content a:active { color: #60c; font-weight: bold; text-decoration: underline; }
Aláhúzások, szövegdiszítés: text-decoration:
- Nincs: text-decoration: none;
- Aláhúzás: text-decoration: underline
- Föléhúzás: text-decoration: overline
- Áthúzás: text-decoration: line-through
- Villogás: text-decoration: blink
- Öröklés: text-decoration: inherit
Display tulajdonságok
Megjelenítés: display
- nincs: none
- egy sorba: inline ( display: inline; ) #navigacios a: { display: inline; }
- függőlegesen: block ( display: block; ) #navigacios a: { display: block; }
- szövegközi tömb: inline-block
- lista elem: list-item
- befutó: run-in
- táblázat: table
- szövegközi táblázat:inline-table
- táblázatsor – csoport: table-row-group
- táblázatsor: table-row
- táblázatoszlop - csoport : table-column-group
- táblázatoszlop: table-column
- táblázatcella: table-cell
- táblázatcím: table-caption
Szövegbehúzás: text-indent Megadható: százalékértékkel, hossz értékkel, vagy öröklés inherit.
Táblázatok kivételével
Minden többszintű elem, legkisebb szélessége: min-width
Minden többszintű elem, legnagyobb szélessége: max-width
Megadható: százalék, hossz értékkel, és öröklés inherit.