Hevenyészett CSS alap
dfdfdf
Külső stíluslap beillesztés: <head><link rel="stylesheet" href="kulso.css" type="text/css"></head>
*.css szerkezete:
kiválasztó { tulajdonság; tulajdonság; }
body { font-family: Arial; }
body { font-style: italic; } normal, italic, oblique.
body { font-weight: bold; } lighter, normal, bold, bolder, illetve 100-tól 900-ig a számok 100-asával (egyre vastagabb betűkészletet választva).
body { font-size: 14px; }body { font: italic bold 14px Arial, Helvetica, sans-serif; } Csoportos megadás
Paragrafusok...
h1 { font-size: 20px; color: #a00000; }
p { font-size: 12px; color: #00a000; }
p { color: black; letter-spacing: 10px; }
p { text-align: center; } left, center, right és justify
p { text-indent: 40px; }
p { text-transform: uppercase; } none, capitalize, uppercase és lowercase: módosítatlan, első betű nagy, összes betű nagy és összes betű kicsi jelentésűek.
p { word-spacing: 10px; } A szavak közötti távolságot vezérelhetjük ennek a paraméternek a segítségével. Lehetőségünk van negatív értékek megadására is.
p { line-height: 20px; } A sormagasságot állíthatjuk vele egy paragrafuson belül. Célszerű a betűink méreténél nagyobb sormagasságot beállítani, különben összecsúsznak a sorok.
Linkek
a { color: #0000FF; text-decoration: underline; }
a:link { text-decoration: none; } none, underline, overline, line-through, blink
a:visited { font-style: italic; }Háttér
body { background-color: white; }
body {
background-image: url(hatter.gif);
background-position: top left;
background-attachment: scroll;
background-repeat: repeat;
}body { background: white url(hatter.gif) no-repeat fixed center center; }
A background-position (elhelyezkedés) értékei lehetnek szövegesek: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, illetve százalékosak (pl. 12% 34%) és pixelben megadottak (pl. 12px 34px).
A background-attachement (a rögzízettséget szabályozza) értéke lehet fixed és scroll.
Background-repeat négy értéket vehet fel: repeat, repeat-x, repeat-y, no-repeat, melyekkel mindkét, csak az egyik, vagy egyik irányban sem történő ismétlődést érhetünk el.
DIV Dobozok megjelenése
A legtöbb HTML elem egy dobozba foglalható, és ezzel kapcsolatosan különböző tulajdonságai állíthatóak.Négy oldala van, a felső, az alsó, a bal oldali és a jobb oldali. Mindegyik oldalnak van margója (margin), kerete (border) és kitöltése (padding). A margó a befoglaló doboz legszéle és a keret közötti távolságot állítja be. A keret a margó és a kitöltés között található. Végül a kitöltés a keret és a tartalom között helyezkedik el. Mindegyik lehet akár 0 pixel szélességű is, ekkor egyszerűen nem jelennek meg. A tartalom és a kitöltés által meghatározott terület hátterének színe állítható, illetve képet is el lehet helyezni rajta. Az elemeknek van magasság (height) és szélesség (width) tulajdonsága is. Ezek a szabvány szerint az adott keret külső részétől az átellenes keret külső részéig értendőek. Erről sajnos a IE valamiért nem tud (kivéve 6-os verziójának kompatibilis módját), és a teljes dobozszélességet, illetve dobozmagasságot érti ezen tulajdonságok alatt.
div.doboz {padding: 0; margin: 0;
}
Keretek
p { border: 2px solid blue; } none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
p {border-left: 1px solid red;
border-top: 3px double blue;
border-right: 3px dotted green;
border-bottom: 3px dashed black;}Körvonalak
p { outline-width: 2px; }
p { outline-style: solid; }
p { outline-color: #000000; }
Az outline-width tulajdonság segítségével a körvonal szélessége adható meg, az outline-style a stílust definiálja, míg az outline-color a körvonal színét állítja be. A stílusnál a kereteknél bemutatott stílusok használhatóak.
p { outline: 2px solid #000000; }Margók
Az egyes elemek a kereten (legyen az akár 0 képpontnyi) kívüli helyfoglalását szabályozhatjuk a margók segítségével.
p { margin: 0px 1px 2px 3px; }
body { margin: 0px; }
Ha csak két értéket adunk meg paraméterként, akkor az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú margókra fog vonatkozni:
body { margin: 10px 0px; }Kitöltés
Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével.
p { padding: 0px 1px 2px 3px; }
p{padding-left: 3px;
padding-top: 0px;
padding-right: 1px;
padding-bottom: 2px;}
Pozicionálás
div { position: static; }
A relatív (relative) érték esetén a statikushoz hasonló helyre kerül az elem, de lehetőségünk van a bal és fenti pozíció megadással eltolnunk. A következő elem elhelyezése úgy lesz számítva, mintha ez az elem a helyén maradt volna.
#fejlec { position: relative; top: -15px; left: 10px; }
Az abszolút (absolute) érték esetén szintén a statikushoz hasonló helyre kerül az elem, szintén lehetőségünk van eltolni, meghatározni az elhelyezkedését, ezen kívül a méreteit is. Itt már a jobb és lenti, illetve a szélesség, magasság megadásokat is használhatjuk, szintén lásd mindjárt. Ez az elem kikerül a megjelenítés folyamából, a következő elem oda kerül, ahova ez került volna.
#lablec { position: absolute; bottom: 10px; right: 10px; }
A fix, rögzített (fixed) érték nagyon hasonló az abszolút pozícionáláshoz. Kiemelhetjük a dokumentumunkból az adott elemet, és rögzíthetjük, de most nem a dokumentumunkon, hanem a megjelenítőn (képernyőn) az adott pozícióban. Ennek eredménye, hogy ha lejjebb görgetjük a dokumentumot, az elemünk ugyanott marad.
#cimke { position: fixed; bottom: 10px; right: 10px; }
Elemhez rendelt belső stíluslap
<h1 style="font-size: 20px; color: #a00000;">Bevezetés</h1>