új rekord új cella keret vastagsága cellpading a szöveg távolságát állítja be a kerettől. A cellspacing a cellák közötti távolságot állítja be. 6. Tábla készítése Tábla neve jegyek jegyek tehetem a táblába is, ekkor a táblán belül ez lesz az első sor. | cella fejléce |
|---|
függőlegesen igazít. 1. fent felül | 2. lent alul | 3. középen alaphelyzet alaphelyzet | 7. tábla készítése Cellák egyesítése: 1. vízszintesen: összevonás | ( a következő 2 cella 2. függőlegesen: összevonás | Tábla szélessége: a lap szélességében helyezi el a táblát Cella szélessége első | második | a 250 pontot osztja a cellák szélességében. 8. speciális karakter 9. képek beszúrása  a lovak .jpg height= magasság width= szélesség. alt-tal alternatív szöveget adunk a képhez. A képet követő szöveg igazítása 1. fent  2. középen 1
3. lent 10 színek: tábla színe: sárga Űrlapok: Form-mal kezdődik neve: 1. Szöveg bevitele: Input type =”text” size=”25” maxlength=”40” name=”név” value=”tibi”> 2. Jelszó bevitele: Input type =”password” size=”10” name=”jelszó”> 3. Többsoros beviteli mező: Egyet választhat: 1. kijelölő: alapértelmezetten ez lesz kijelölve 2. rádiógomb alapértelmezett kijelöl 3. Legördülő listából választhat: <select multiple name=”mivel” size=”3”> < Options selected> alapértelmezett kiválaszt nyomógomb: 1. stylus-lap CSS alapok - Stíluslapok működése A CSS az angol Cascading Style Sheets kifejezés rövidítése, jelentése rangsorolt stíluslapok. A stíluslapot egy szöveges fájlban kell megírni, amit .css kiterjesztéssel kell elmenteni. Karakterkódolás beállítása A stíluslapfájl legelső sorába ajánlott a karakterkódolásra vonatkozó információt írni. Itt is az UTF-8 kódolást ajánlom, mint a HTML esetében. Ekkor így kell kezdődnie a stíluslapnak: @charset "utf-8"; Kijelölők Kijelölők, tulajdonságok, értékek (selector) 1. karakter kijelölő: Ezután az egész stíluslap nem más, mint kijelölők (selector) és meghatározásblokkok (declaration) felsorolása. A meghatározás két részből áll: tulajdonságból (property) és értékből (value). @charset "utf-8"; Pl: h1 { color: red; } kijelölő (selector) a h1; a tulajdonság (property) color: értéke (value) red. CSS kommentek HTML megjegyzést vagy kommentet a jelek közé írhatunk. CSS-megjegyzést vagy kommentet a /* és a */ jelek közé. Egy megjegyzés több sort is átfoghat. 2. Osztálykijelölők (class -tal hivatkozunk a styluslapon) Ha nem akarunk egységes megjelenést, akkor a class attribútummal minden címkére külön szabályozhatjuk, hogy melyik stílus vonatkozzon rá, és melyik ne. A class attribútumot szinte bármelyik címkébe beleírhatjuk, így:
2
h1 címsor h2 címsor Ekkor a stíluslapban így tudjuk különválasztani a h1 kétféle megjelenését: kijelölővel az egész dokumentumra vonatkozik. h1, h2 { background: lime; } A center nevű osztály besorolású elemre vonatkozik: h1.center, h2.center { background: maroon; } 3. Azonosítókijelölők (id #) Azonos nevű class attribútumból akármennyi lehet, de id attribútumból csak egyfajta érték fordulhat elő egy HTML dokumentumon belül. Az id attribútum arra való, hogy egyértelműen azonosítson egy címkét, ezért két id ugyanolyan értékkel nem fordulhat elő egy oldalon belül. Az id-nek Javascriptben több jelentősége van, ott ennek segítségével tudunk egy elemre hivatkozni. Valójában az id attribútum ugyanarra kell, mint a class attribútum: ezekkel jelölhetünk meg egy-egy címkét. Így kell megadni a HTML kódban: Piros színű címsor Kék színű címsor A stíluslapban pedig így tudunk bizonyos nevű id-ra stílust alkalmazni: h1#piros { color: red; } bemeneti(input formázása): input[type='reset']{ font-weight: bold; width: 150px; } Szöveg igazítása: letter-spacing: betűk közötti távolság megadása, text-decoration: vonalakat helyezhetünk el a szöveg alatt, felett, vagy a szöveg belsejében,( Lehetséges értékek: none (díszítetlen), underline (aláhúzott), overline (felülhúzott), line-through (áthúzott), blink (villogó).) text-align: a szöveg igazítását határozhatjuk meg vele, vertical-align: feljebb, vagy lejjebb tolhatjuk az elemeket a vele egy sorban elhelyezett elemekhez képes, middle (középre), top (felülre), bottom (alulra). text-transform: kis és nagybetűk használatát szabályozza, line-height: az aktuális sor teteje és a következő sor teteje közötti távolságot állíthatjuk be segítségével. Háttérszíneket és háttérképeket: color: egy elem szövegének színét határozhatjuk meg vele, background-color: egy elem háttérszínét határozza meg, background-image: az elem hátteréül használt háttérkép kiválasztására szolgál, 3
background: gyors megoldást kínál az előbb felsorolt háttérbeállítások meghatározására. Betűtípusok font-style: a betűkészlet stílusát határozza meg, font-family: a szöveg betűtípusát határozhatjuk meg segítségével, font-variant: a normál érték a kisbetűket a hagyományos módon, a small – caps érték pedig kiskapitális formájában jeleníti meg, font-size: a betűkészlet pontmérete, font-weight: a szöveg vastagságát határozhatjuk meg. Lehetséges értékek: normal, bold (félkövér), bolder (kövér), light (vékonyabb), lighter (egészen vékony), illetve számmal: 100, 200. 300, 400, 500, 600, 700, 800, 900 (egyre vastagabbak lesznek, a normálnak a 400-as érték felel meg). pl: body { font-weight: lighter; } Szöveg díszítés. Lehetséges értékek: none (díszítetlen), underline (aláhúzott), overline (felülhúzott), line-through (áthúzott), blink (villogó). Kis és nagybetű váltások. Lehetséges értékek: none (módosítatlan), capitalize (első betű nagy), uppercase (összes betű nagy), lowercase (összes betű kicsi). Általános elrendezés: margin: ugyanazt azt értéket rendeli mind a négy margószélességhez, width: egy elem szélességét határozza meg, height: egy elem magasságát határozza meg, float: egy elem szöveggel történő körbefuttatására szolgál, clear: ezzel a tulajdonsággal fejezhetjük be az elemek szövegekkel történő körbefuttatását Hasonló módon a deklarációk is csoportosíthatók: pl: H1 {font-family: helvetica; font-size: 12pt; font-style: normal; } Font Size: betűméret megadása, mely lehet abszolút vagy relatív. Abszolút betűméret lehetséges értékei: xx-small, x-small, small, medium, large, x-large, xx-large. A relatív méretek: larger (nagyobb), smaller (kisebb), illetve az előjeles értékkel megadható mértékegységek: em (a betű magasságértéke), ex (a kisbetű, x magasságértéke), px (betűmagasság megadása pixelben). Lehetséges az értékek előjeles megadása százalékos formában is, a % jel kiírásával. ul { font-size: 20px; } ol { font-size: 4em; }
4
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. Lehetséges értékek: { padding: 0px 1px 2px 3px; } 0px felül, 1px jobbra, 2px alul, 3px bal oldalt a kitöltés. { padding: 5px; } mindenhol egységes. { padding: 10px 5px; } 10px függőlegesen, 5px vízszintesen. Keretek
Keret szín: { border-color: red; } Lehetséges értékek: szín név, hexadecimális szín kód, rgb kód. Keret szélesség: { border-width: 5px; } keret stílus:Lehetséges értékek: none (nincs), hidden (rejtett), dotted (pontozott), dashed (szaggatott), solid (vonal), double (dupla), Lehetőségünk van a keretek mind a négy oldalon külön-külön történő beállítására is. { border-left: 5px double red; } { border-top: 8px dotted rgb(0,0,255); } { border-right: 5px double green; } 5
{ border-bottom: 8px dashed #800080; } A paraméterek összevonhatóak: { border: 5px double blue; }
6
| |
