A <DIV> tag és formázás CSS-sel
<DIV> A <DIV> tag alkalmas arra, hogy egy HTML oldalt különböző részekre felosszon (különbözően formázható részek) Opciói: class="szöveg" – az adott <DIV> elnevezése, a formázásnál fontos style="stíluskód" – az adott <DIV> formázási paraméterei CSS-kóddal, kevesebb beállításnál használatos
CSS A CSS (Cascading Style Sheets) segítségével a HTML oldalunk tetszőlegesen formázható a CSS-kód lehet külön fájlban, ekkor a HTML fájl mellett lesz egy CSS fájlunk is, és a HTML-ben hivatkoznunk kell erre a CSS fájlra a <HEAD> </HEAD> közé írandó kód: <link rel="stylesheet" type="text/css" href="filenev.css" > a CSS-kódot az adott HTML fájlba is írhatjuk, a <HEAD></HEAD> közé <STYLE type="text/css"> és </STYLE> tag-ek közé kerül
CSS (folyt.) A formázás megadása két fő részre osztható először meg kell adni annak a HTML tag-nek a nevét, amit formázni szeretnénk ezután { } közé lehet írni a formázáshoz szükséges paramétereket, amiknek a formája: tulajdonság:érték; Pl.: h1 {color=#0000FF; font-size: 12px;}
CSS (folyt.) Megjegyzést rakhatunk /* és */ jelek közé Ha <DIV> esetén szeretnénk sok formázási utasítást használni, akkor először kell egy osztálynevet adni az adott <DIV>-nek a class opcióval. ezután a CSS-kódnál nem a div tag-re állítunk be formázást, hanem a class-ban megadott névre. Ekkor a név azonban .-tal kezdődik
CSS (folyt.) <HEAD> <STYLE type="text/css"> .elso{ background-color:rgb(0,0,255); font-size:20px; } </STYLE> <BODY> <DIV class="elso"> Szöveg </DIV> .
<DIV> formázási lehetőségei Elhelyezés: position:absolute/relative; - a <DIV> típusának beállítása abolute – az elhelyezkedést pontosan adjuk meg relative – az oldalon eredetileg elfoglalt pozícióhoz képest adjuk meg a beállításokat top:30px; right:40px; - pozíció: oldal tetejétől 30px távolságra, jobb szélétől 40px távolságra top:30px; left:10px; - pozíció: oldal tetejétől 30px távolságra, bal szélétől 10px távolságra width:200px; - szélesség A következőkben tárgyalt formázási lehetőségek nagy része is értelemszerűen használható a <DIV> formázására.
Alapvető formázási lehetőségek CSS használatával Háttér – body parancsra beállítható background-color:blue; - háttérszín, megadható névvel és kóddal is background-image:url('filenev.jpg'); - háttérkép beállítása background-repeat:ismétlés; - a háttérképet alapértelmezetten vízszintesen és függőlegesen is ismétli az alapbeállítás, de ez átállítható repeat-x – vízszintesen ismétel csak repeat-y – függőlegesen ismétel csak no-repeat – nem ismétli a háttérképet
Háttér formázás (folyt.) background-attachment:fixed; - a háttérkép mindig ugyanott marad, nem görgethető az oldal tartalmával együtt background-position:vízszintes függőleges; - a háttérkép vízszintes és függőleges pozícióját adja meg, értékei: vízszintes: left/center/right függőleges: top/middle/bottom
A kód egyszerűsítése Mindezek a beállítások megadhatóak egyben is (rövidítve), szóközzel elválasztva a leírt sorrendben megadva Pl.: body{background:#FFFFFF url('kep-jpg') no-repeat right top;}
Bekezdésformázások A különböző bekezdésformázó tag-ek is formázhatóak külön-külön (pl.: h1, h2,… p, a). Beállítható: color:szín; - bekezdés karaktereinek színe, megadható hexadecimális vagy RGB-kóddal, de színnévvel is (bodynál is használható) text-align:center/right/justify – szöveg vízszintes igazítása
Bekezdésformázások (folyt.) text-decoration:érték; - szöveg díszítésére, értékei: overline – szöveg fölé vonal line-through – szöveg áthúzása underline – szöveg aláhúzása blink – villogó szöveg none – ne legyen semmilyen dekoráció (link aláhúzás megszüntetésére) text-indent:20px; - a bekezdés első sorának behúzása
Bekezdésformázások (folyt.) text-transform:érték; - szöveg átalakítása, értékei: uppercase – csak nagybetűk lowercase – csak kisbetűk capitalize – minden szó első betűje nagybetű Margók: margin-top:20px; – felső margó margin-bottom:20px; – alsó margó margin-right:20px; – jobb oldali margó margin-left:20px; – bal oldali margó
Font formázások font-family:betűtípus megadása, de célszerű nem csak a pontos nevet megadni, így 3 értéket adnak meg: font pontos neve font családja általános család, értéke lehet: serif: talpas betűtípus sans-serif: talpatlan betűtípus monospace: minden karaktere azonos szélességű Pl.: p{font-family:"Times New Roman", Times, serif;}
Font formázások (folyt.) font-style:italic; - dőlt betű beállítására font-size:20px; - betűméret beállítása (a betűméret megadható em mértékegység-gel is, ami a pixel érték osztva 16-tal) font-variant:small-caps; - kiskapitális szöveg font-weight:normal/bold/bolder/lighter; - karakterek vastagsága (bold = félkövér)
Linkek formázása 4-féle különböző hivatkozást formázhatunk külön-külön: a:link – normál, még nem látogatott link a:visited – már látogatott link a:hover – amikor az egeret áthúzzuk a link felett a:active – épp aktív (rákattintás és betöltés közti idő)
Linkek formázása (folyt.) A különböző linkek mindegyikére beállíthatjuk a következőket: color:szín; text-decoration:érték; background-color=szín; - csak a link szövegének háttérszíne
Listák formázása list-style-type:típus; - az adott lista típusa, értéke lehet: felsorolásnál (ul): square (négyzet), circle (karika) számozásnál (ol): upper-roman (római számok), lower-alpha (kisbetűk) list-style-image: url('kep.gif'); - csak felsorolásnál (ul) kép is beállítható felsorolásjelnek
Táblák formázása width:100% - <table>, <th>, <td> tag-ekre height:50px – <table>, <tr> tag-ekre text-align:left/center/right - <td>-re beállítható a szöveg vízszintes igazítása vertical-align:top/middle/bottom - <td>-re beállítható függőleges igazítás color:szín; background-color:szín; bármely táblázattal kapcsolatos tag-re
Táblák formázása (folyt.) padding:25px; – cellamargó (cella szél és szöveg közti távolság), <TABLE> és <TD> tag-re is beállítható Külön is beállítható a 4 oldalra: padding-top:25px; - felső padding-bottom:25px; - alsó padding-right:50px; - jobb oldali padding-left:50px; - bal oldali
Keretezés border-width:2px; - keret mérete border-color:szín; - keret színe border-style:stílus; - keret stílusa, értékei lehetnek: none – nincs keret, dotted – pontozott, dashed – szaggatott vonalas, solid – normál vonal, double – dupla vonalas, groove – 3D-s keret, ridge – 3D-s árnyékolt keret A keretek stílusát külön is meg lehet adni a 4 oldalra: border-top/right/bottom/left-style: stílus; beállítással
Keretezés (folyt.) A 3 keretformázási lehetőség egyben is megadható: méret stílus szín sorrendben: Pl.: table, th, td { border: 1px solid black;}