A CSS alapjai – utolsó módosítás: 2024.06.01.CSS csatolása
Elhelyezése a <head>-ben: Megadása: <link rel="stylesheet" href="fajlnev.css"> rel: (relation - viszony), jelzi a böngészőnek, hogy a hivatkozott (css) dokumentum milyen viszonyban van a hivatkozó (html) dokumentummal. A megadott érték (stylesheet) szerint stíluslap viszonyban. href: a HTML dokumentumhoz csatolandó CSS stíluslap fájlneve, elérési útja. Kiterjesztése mindig css.CSS szintaxisa:
szelektor {tulajdonság1: érték1; tulajdonság2: érték2;..;} A szelektorok, a tulajdonságok és az értékek mindig kisbetűvel írandók. A szelektort követően, kapcsos zárójelek között kell megadni a tulajdonság - érték párokat. A tulajdonság és az érték közé kettőspontot kell írni, majd pontosvesszővel kell zárni. A számszerű érték és a mértékegység közé nem kell szóközt írni: Pl.: 12px, 120%. A tizedesjelölő a pont: Pl.: 0.3em.Tulajdonság - érték:
Minden tulajdonsághoz meghatározott értékek tartozhatnak. Egyes tulajdonságok több értéket is felvehetnek, az értékeket szóközzel kell elválasztani. Beépített értékek: Pl.: color: red; align: center; border: solid; Numerikus értékek mértékegységei: px = pixel; em = az adott elem (nagy)betűjének magassága; %-os érték. 1em = 16px = 100%. Az em és a %-os érték skálázható. Szöveges értékek: Pl.: background-image: url('valami.jpg'); Az url nevét aposztrófok, vagy idézőjelek közzé kell írni. Színkód: Pl.: color: #FFFFCC; Kommentek A /* ... */ között adhatunk meg információt a stílusokhoz.Szelektorok (jelölők):
A HTML elemekre vonatkozó egyes blokkok tulajdonságait a kijelölőkkel határozhatjuk meg. Elem név alapján: Megjelölhetjük, hogy mely HTML elemek tulajdonságát szeretnénk beállítani. p - minden p elem; p, div - minden p és div elem; div p - minden div elemen belüli p elem; div > p - minden p elem, ahol a szülő egy div elem; div + p - minden olyan p elem, mely közvetlenül div elem után van; p ~ ul - minden olyan ul elem, mely előtt p elem van.Id (identifier - azonosító) alapján:
A HTML kódban az egyes elemekben elhelyezhetünk egy id attribútumot, melynek értékére a CSS állományban hivatkozhatunk a #-jel segítségével. Pl.: HTML - <table id="fontos"> CSS-ben a hivatkozás rá - #fontos {...} A formázás csak a megadott azonosítójú elemre lesz érvényes. Az id azonosító mindig legyen egyedi elnevezésű.Class (osztály) alapján:
A HTML kódban az egyes elemekben elhelyezhetünk egy class attribútumot, melynek értékére a CSS állományban hivatkozhatunk a . (pont) segítségével. Míg az id azonosító egyedi, addig a class értékét több elemnél is felhasználhatjuk. Pl.: HTML - <table class="szines"> <h3 class="szines">. CSS-ben a hivatkozás rá: .szines {...}. A formázás minden olyan elemre érvényes lesz, melynek osztálya "szines".Vegyes meghatározás alapján:
Példa1.: CSS: td .szines {...}; HTML kód: <table class="szines">: Azokra a cellaelemekre vonatkozik, mely elemeken belül szerepel a class="szines". Mivel a table a hierarchiában a td felett áll, ezért az itt megadott osztály a td-re is vonatkozik. Példa2.: CSS: #fontos .szines {...}; HTML kód: <table id="fotos"> <tr> <td class="szines">: Azokra az elemekre vonatkozik, melyek a "szines" osztályhoz tartoznak és olyan elemen belül helyezkednek el a hierarchiában, melynek az azonosítója "fontos".Hivatkozások pszeudo (ál) osztályának kijelölése:
A CSS-ben léteznek ún. látszólagos vagy pszeudo-osztályok és -elemek is, amelyek nem jelennek meg a dokumentum forrásában, sem a dokumentumfán. Segítségükkel speciális információk alapján hajthatunk végre formázásokat.Hivatkozások álosztályai
A felhasználói tevékenység dinamikus kezelésére több látszólagos osztály is a rendelkezésünkre áll. Például: a:link {...}: normál link; a:visited {...}: meglátogatott link; a:hover {...}: a hivatkozás felett áll az egér; a:active {...}: aktivált hivatkozás, nyomva tartott egérgomb; Az hivatkozás (a) elemhez több egymást nem kizáró link, és álosztályú kijelölés is tartozhat: Pl.: a:visited a:hover {...}: ha a meglátogatott linkre ismét ráállunk.Attribútum szerinti meghatározás alapján
Például.: a[target] {...}: az a elem target attribútuma; a[target=_blank] {...}: az a elem target=_blank attribútuma; [title~=auto] {...}: minden olyan tilte attribútum, mely tartalmazza az auto kifejezést; [title|=pc] {...}: minden olyan title attribútum, mely pc-vel kezdőik; a[href^="https"] {...}: minden olyan hivatkozás, melynek href attribútuma https-sel kezdődik; a[href$=".pdf"] {...}: minden olyan hivatkozás, melynek href attribútuma .pdf-re végződik; a[href*="webmesterke"] {...}: minden olyan hivatkozás, melynek href attribútuma tartalmazza a webmesterke kifejezést.Formázás öröklése
Ha egy elem az elrendezés struktúrájában őt megelőző másik elembe ágyazódik, akkor a megelőző elem a hierarchiában felette áll, és - ha arra nincs megadva külön stílus - örökíti (inherit) a stílusát a hierarchiában alatta álló elemre.CSS színek:
Hexadecimális: A 6 karakterből álló színkódok elé a #-jelet kell írni. Az első két karakter a piros, a második kettő a zöld, az utolsó kettő a kék alapszín intenzitását határozza meg. Az HEX kódot lehet rövidíteni, ha a piros, a zöld és a kék hexadecimális párok azonosak. Pl.: #FF0000 helyett #F00. Decimális: A színek megadása tízes számrendszerbeli értékekkel (0-255). Pl.: rgb (255,0,0). Százalékos: A vörös, a zöld és a kék keverési arányát határozzák meg. A százalékos értékek azt jelentik, hogy az adott alapszín 100%-ához képest mennyit keverünk hozzá. Pl.: rgb(100%,0%,0%) Színnevek: 16 alapszín van, ami angol névvel megadható (red, blue, black...), de további 140 szín van (AliceBlue, Coral, Gold,...), melyet a W3C jóváhagyott, ezek a kiterjesztett színnevek.Háttér formázása:
Háttérszín: background-color. Pl.: background-color: "red"; Háttérkép: background-image. Pl.: background-image: url('hatterkep.jpg'). Háttérkép ismétlődése: background-repeat. repeat: minden irányban ismétlődik (alapértelmezett); repeat-x: vízszintesen ismétlődik; repeat-y: függőlegesen ismétlődik; no-repeat: nem ismétlődik; Pl.: background-repeat: repeat-x; Háttér együttes beállítás sorrendje: background: background-color background-image background-repeat background-attachment background-position.Szöveg formázása:
Szöveg színe: color. Pl.: color: red; color: #ff00cc; vízszintes igazítás: text-align: left - balra igazított. right - jobbra igazított. center - középre igazított. justify - sorkizárt. Pl.: text-align: center; függőleges igazítás: vertical-align: text-top - szöveg tetejéhez. text-bottom - szöveg aljához. middle - szöveg közepére. Pl.: vertical-align: middle; szöveg dekoráció: text-decoration: underline - aláhúzott. none - nincs kiemelés. Pl.: text-decoration: underline; szöveg átalakítása: text-transform: uppercase - NAGYBETŰS. lowercase - kisbetűs. capitalize - Nagy Kezdőbetűs. Pl.: text-transform: uppercase; karaktertávolság: letter-spacing: pozitív szám esetén - ritkított szöveg. negatív szám esetén - sűrített szöveg. Pl.: letter-spacing: 0.3em; szövegbehúzás: text-indent: pozitív szám esetén - első sor behúzás. negatív szám esetén - függő behúzás. Pl.: text-indent: 10px; szótávolság: word-spacing: pozitív szám esetén - ritkított szótávolság. negatív szám esetén - sűrített szótávolság. Pl.: word-spacing: 1em; szöveg árnyékolása: text-shadow: megadása: h-shadow v-shadow blur-radius color. h-shadow - vízszíntes eltolás. v-shadow - függőleges eltolás. blur-radius - elhomályosítás. color - árnyék színe. pl: text-shadow: 1px 2px 3px red;Karakterek formázása:
betűcsalád: font-family: serif - talpas. sans-serif - talpatlan. monospace - azonos szélességű. cursive - dőlt. Pl.: font-family: verdana, sans-serif; Megjegyzés: Ha egy konkrét betűtípust nevezünk meg, szükséges utána a betűcsaládot is megadni, mert amennyiben nem érhető el a megnevezett betűtípus, akkor az alapértelmezett betűcsalád karaktereivel helyettesíti a böngésző. betűstílus: font-style: italic - dőlt. Pl.: font-style: italic; betűméret: font-size: Pl.: font-size: 32px; font-size: 1.2em; betűvastagság: font-weight: bold - kövér. Pl.: font-weight: bold. betűváltozat: font-variant: font-variant: small-caps.Listajelek formázása:
listaelem típus: list-style-type: disc - kitöltött kör. circ - kitöltetlen kör. square - négyzet. Pl.: list-style-type: circ. listakép: list-style-image: Pl.: list-style-image: url(''); Az url értékhez a kép nevét, kiterjesztését és elérési útját add meg.Táblázatok formázása:
határok összevonása: border-collapse: collapse - összevonás. szélesség: width: Pl.: width: 50%. magasság: height: Pl.: height: 120px; szöveg vízszintes igazítása - text-align: left - balra igazított. right - jobbra igazított. center - középre igazított. Alapértelmezésben a th elemek középre, a td elemek balra igazítottak. szöveg függőleges igazítása: vertical-align: top - felülre igazított. center - középre igazított. bottom - alulra igazított. Alapértelmezésben függőlegesen középre igazítottak a cellák. A <table>, <th>, <td> elemekhez szegély is beállítható. (Lentebb ismertetve!).Doboz modell:
A dokumentum minden eleme egy dobozban helyezkedik el. Minden doboznak van tartalma (content), ez maga az elem. Az elemek köré szegély (border) rajzolható, mely vizuális tulajdonságokkal rendelkezik (szín, vastagság, vonaltípus...). A tartalom és a szegély közötti távolság a kitöltés (padding). A kitöltésre a tartalom háttértulajdonságai jellemzőek, csak a méretét állíthatjuk. A szegélyen kívül helyezkedik el a margó (margin), mely segítségével szabályozni lehet a szomszédos elemektől való távolságot. A margók mindig átlátszóak. A doboz teljes méretét a tartalom, a kitöltés, a szegély és a margó méreteinek összege adja meg. A kitöltés, a szegély és a margó vastagsága lehet nulla, ekkor a dobozméret a tartalom méretével lesz azonos. Block, Inline: A CSS soron belüli (inline) és blokkszintű (block) elemeket különböztet meg. Block: Vizuális formázása blokk formájában történik. (Pl.: bekezdés). Inline: A soron belüli elemek nem hoznak létre új blokkot, tartalmuk a soron belül kerül megjelenítésre. (Pl.: hivatkozás, kép). A blokkszintű elemek szélességét a width tulajdonság, magasságát a height tulajdonság határozza meg. Az elemek számára minimális és maximális szélességet és magasságot is megadhatunk. min-height - minimális magasság. max-height - maximális magasság. min-width - minimális szélesség. max-width - maximális szélesség.Margó beállítása:
A margók esetében csak a méret beállítására van lehetőség. Negatív értékeket is megadhatunk. A margó négy értéket vehet fel. Csak egy érték megadása esetén mind a négy margó azonos; Két érték megadása esetén az első érték a felső és az alsó margóra vonatkozik, a második érték pedig a bal és jobb margóra; Három érték megadása esetén az első a felső margóra, a második a bal és jobb margóra, a harmadik az alsó margóra vonatkozik; Négy érték megadása esetén mind a négy margóra külön-külön érték adható meg, a sorrend: felső, jobb, alsó, bal. A margók tulajdonságait megadhatjuk egy-egy oldalra külön is. Ilyenkor a tulajdonságba be kell illeszteni az oldalmeghatározást is: top, rigth, bottom, left. Példa 1: margin: 0 auto; A felső és alsó margó 0, a bal és jobb margó beállítása automatikusan történik meg, ilyenkor az elem vízszintesen az oldal közepére kerül. Példa 2.: margin: 10px, 20px: A felső és alsó margó 10px, a bal és jobb margó 20px széles lesz. Példa 3: margin-left: 10%: A bal margó szélessége az oldal szélességnek 10%-a lesz.Szegélyek beállításai:
szegély szélessége - border-width: Pl.: border-width: 2px; szegély stílus: border-style: solid - szimpla vonal. dotted - pontozott vonal. dashed - szaggatott vonal. Pl.: border-style: dotted; szegély színe: border-color: Pl.: border-color: red. szegély összevont meghatározása: border: border-width border-style border-color. Pl.: border: 2px solid red - 2px vastag szimpla piros vonal. A szegély beállítás négy értéket vehet fel. Csak egy érték megadása esetén mind a négy szegély azonos; Két érték megadása esetén az első érték a felső és az alsó szegélyre vonatkozik, a második érték pedig a bal és jobb szegélyre; Három érték megadása esetén az első a felső szegélyre, a második a bal és jobb szegélyre, a harmadik az alsó szegélyre vonatkozik; Négy érték megadása esetén mind a négy szegélyre külön-külön érték adható meg, a sorrend: felső (top), jobb (right), alsó (bottom), bal (left).Vissza a feladatsorszámok kiválasztásáhozKitöltés (bélés) beállítása:
A kitöltés színét a tartalom háttértulajdonságai határozzák meg, így beállítani itt is csak a méreteket tudjuk. A margin tulajdonsággal ellentétben itt negatív értékeket nem adhatunk meg. A kitöltés négy értéket vehet fel. Csak egy érték megadása esetén mind a négy kitöltés azonos; Két érték megadása esetén az első érték a felső és az alsó kitöltésre vonatkozik, a második érték pedig a bal és jobb kitöltésre; Három érték megadása esetén az első a felső kitöltésre, a második a bal és jobb kitöltésre, a harmadik az alsó kitöltésre vonatkozik; Négy érték megadása esetén mind a négy kitöltésre külön-külön érték adható meg, a sorrend: felső, jobb, alsó, bal. Példa 1.: padding: 10px, 20px: A felső és alsó bélés 10px, a bal és jobb bélés 20px széles lesz. Példa 2.: padding-top: 10%: A felső bélés szélessége az oldal szélességnek 10%-a lesz.